Change the font text in recent posts

Support
#1

Hi there,

On my media page when you hover over the image you get text that says read more. How do i get that exact text and background opacity on my posts recents post on my homepage.

#2

Hi @123JH,

Please find this custom CSS:

.x-recent-posts .format-standard .x-recent-posts-img:before {
    content: 'Read More';
    width: 145px;
    margin-left: -72.5px;
    font-size: 20px;
}

And change to this:

.x-recent-posts .format-standard .x-recent-posts-img:before {
    content: 'Read More';
    width: 72px;
    margin-left: -36px;
    font-size: 12px;
    font-family: "Open Sans",sans-serif;
    text-transform: uppercase;
    font-weight: 400;
}

Also add this custom CSS:

.x-recent-posts .x-recent-posts-img:after {
     background: rgba(0,0,0,0.75);
}

Hope it helps :slight_smile:

#3

Unfortunately it has not worked the text font that says “read more” is still the old one…the opacity has changed which is great but need the font, font weight to change to the “read more” I have on my media page when you hover over the image. I have been using the font assistant (i dont know if that helps)

#4

Hi Carolina,

Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and see if that helps.

.x-recent-posts .format-standard .x-recent-posts-img::before {
    font-family: "Open Sans",sans-serif !important;
}

Thanks!

#5

Yes the font is the same now, but the font weight and size is off still…its almost there tho…if it helps ive been using the font assistant and the body weight 400

#6

Hello Carolina,

You will also have to change the height and the width in the code:

.x-recent-posts .format-standard .x-recent-posts-img:before {
    content: 'Read More';
    width: 80px;
    height: 80px;
    margin-left: -36px;
    font-size: 14px;
    font-family: "Open Sans",sans-serif;
    text-transform: uppercase;
    font-weight: 400;
}

Hope this helps.

#7

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