Formatting my recent posts on home page

Support
#1

Hi,

Screenshot from digitalnomadquest.com/home

  1. Is there any way to make the recent posts have a bit of text under the title? Of the first few words of the blog post.
  2. Is there any way to remove the borders around the boxes?
  3. Is there any way to make the full title showing for each post
  4. Is there any way to remove the blue underline in just these post titles (but keep the blue underlines for other URLs) - want to remove the underline under the “Start Here” button on the home page as well.

Thanks,
Sharon

#2

Hello Sharon,

Thanks for posting in!

1.) To make the recent posts display an excerpt of text under the title, please check out this thread: https://theme.co/apex/forum/t/recent-posts-excerpts/19766/6, https://theme.co/apex/forum/t/recent-post-excerpt/27612/8

2.) To remove the borders around the boxes, you can make use of this CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-recent-posts a {
    border: none;
    box-shadow: none;
    text-decoration: none;
}

3.) To display the full titles, you can make use of this code:

.x-recent-posts .h-recent-posts, 
.x-recent-posts .x-recent-posts-date {
    overflow: visible;
    text-overflow: clip;
    white-space:normal;
}

4.) The code is already included #1.

We would loved to know if this has work for you. Thank you.

#3

Cool it worked! But it displays really weirdly:

How do I make the title font slightly bigger, the body copy font smaller and with maybe 2 lines, and in black font color?

Thanks!
Sharon

#4

Hi Sharon,

To increase the title font, we can add font-size css property on the (point 3) CSS code provided by Ruenel above.

e.g.

.x-recent-posts .h-recent-posts, 
.x-recent-posts .x-recent-posts-date {
    overflow: visible;
    text-overflow: clip;
    white-space:normal;
    font-size: 120%;
}

And this is for the recent post’s excerpt

.x-recent-posts-excerpt p {
	font-size: 16px;
	color: black;
}

Hope it helps,
Cheers!

#5

Hi this helps.

How do I make it from what I currently have:

to this?

  • basically more spacing between the title + date + text, smaller date, and less lines showing for text

Thanks!

#6

Hello Sharon,

To increase some spacing, you may update the code and use this:

.x-recent-posts .h-recent-posts, 
.x-recent-posts .x-recent-posts-date {
    overflow: visible;
    text-overflow: clip;
    white-space:normal;
    font-size: 120%;
    margin-bottom: 20px;
}

The number of lines for the excerpt can be set in X > Theme Options > Blog > Content. You may set the “Excerpt Length” to at least less than 40 words.

Hope this helps.

#7

Great that helps. Is there any way to make just the date smaller? It seems font-size affects both the title + the date

#8

Hey Sharon,

To make the font size of the date smaller, please add this code:

.x-recent-posts .x-recent-posts-date {
    font-size: 95%;
}

Feel free to change the font size if needed.

#9

Thanks! Is there any way to remove the underline on the “START HERE” (but keep the underline for other links through out my website)?

#10

Hi There,

Please add this custom CSS under Theme Options > CSS:

.entry-content a.x-anchor {
    text-decoration: none;
}

Hope it helps :

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.