Blog page - "read more" link button color change on hover

Support
#1

Hello team,
I would like to change hover colour of “read more” (Preberi več) link buttons and Headings of posts on blog page to #f9423a
Here: https://www.ir-image.si/blog/

I’ve tried under PRO > theme options > site links, but than links in footer would not be visible in hover because footer background is in the same colour and even after hover colour setting to desired colour, “read more” buttons were still white when on hover.

I have inspected the element and it has class=“more-link”, but can’t find the right CSS code. :slight_smile: What would be the right global css for this?

Thank you,
Peter

#2

Hi Peter,

Thank you for writing in, yes that is right the class is more-link, so your CSS selector would be .more-link then you need to combine this with the :hover pseudo-class since you want this to be applied on hover state of the element.

And the CSS property that you would need is color. So your complete CSS rule would look like

.more-link:hover {
color: #f9423a;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

#3

Thank you :slight_smile: it works. I would also like to change hover Colour of Headings on same page to the same #f9423a.

#4

Hi Peter,

You can update the previous code given to:

.more-link:hover,
.entry-title:hover a {
color: #f9423a;
}

Please note that we do not really provide support for customazation in the forum, the custom CSS provided only serves as a guide.

Thanks,

#5

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