Change color of the read more-button

Hey there,

You can achieve what you’re after by adding following Custom CSS to your theme using Advanced CSS Editor:

.more-link{
    background:#4a5e7a;
}

Hope it helps.

ormidleriet – since you’ve already got the Jetpack CSS Editor module active, there’s no need to install a separate plugin. You can add the CSS Suyogya provided in the Jetpack stylesheet editor under Appearance > Edit CSS.

Suyogya – Thanks for pitching in to help! If you view the source, you can see whether a site has the Jetpack CSS module active. On ormidleriet’s site, for example, I see this section in the head:

<style id="custom-css-css">/*
Velkommen til Custom CSS!

For mere info, se https://wp.me/PEmnE-Bt
*/</style>

Thanks both of you. I tried both things and nothing happens to the Read More-colors. It’s all still red. What am I doing wrong?
All I can see in that stylesheet is what you Kathryn just typed above.

@formidleriet: Try replacing the code I gave you with below code:

.more-link{
    background:#4a5e7a!important;
}

@kathryn: Thank you for letting me know, I’ll keep an eye out for this ??

Suyogya’s CSS declaration wasn’t quite specific enough. This CSS targets a more specific element and should do the trick without using !important, which should be avoided wherever possible.

.featured-page .more-link, .grid .more-link {
  background-color: #4a5e7a;
}

You’re right again. Somehow, I missed that. Thank you very much for correcting my code ??

No worries. ?? If you haven’t yet, I recommend testing custom CSS in the browser inspector on users’ sites before providing it to them. You can do that at the very bottom of the theme’s style.css file or in the user’s custom stylesheet for correct CSS inheritance.

Hey Kathryn,

I do use Stylebot to check the custom CSS before posting an answer, and the one I gave above did work at my end ??

Thank you so much! The last code worked at last. Thank you. Problem solved!

Glad you’re all set! Feel free to start a new thread if you need help with anything else.

Wow – tried this and it worked perfectly….

Now – how do I cahnge the background colour which is also showing RED on mobile header?

Ian
:O)

Oh and all the text is still red?! any thoughts experts…