How to style “Read More” buttons / change colors on blog category page

  • Resolved semperaye

    (@semperaye)


    7 years, 10 months ago

    [ Moderator note: moved to Fixing WordPress. Please do not use Developing With WordPress for these topics. ]

    Hello,

    I’m having a custom css issue. I can’t seem to be able to style the “Read More” buttons on my blog category list. I’ve been using a background-color #0f5289 and hover background color of #0c2b44 though out. I don’t know how to do this. Here is my code for the login page that someone helped me do:

    input#wp-submit {
	background-color: #0f5289 !important;
	border-radius: 0;
}

input#wp-submit:hover {
	background-color: #0c2b44 !important;
	border-radius: 0;
}

    [Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

    I need help making a css code that works for my Read More pages. I tried various codes from other threads but none worked. Thanx!

    • This topic was modified 7 years, 10 months ago by Jan Dembowski.
    • This topic was modified 7 years, 10 months ago by bdbrown.
Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi.

    Can you post the URL of the page you want to style the Read More buttons on and I’ll have a look.

    Cheers

    Mark ??

    Thread Starter semperaye

    (@semperaye)

    Hi Mark!

    Woops ofcourse I would forget a link…

    Here’s an example:
    https://www.salamatphilippines.com/category/expat-life/

    Thank you ??

    I’ve had a look and it appears the Read More link on the URL you’ve posted is using an inline style (see below).

    <a style="background-color: #0f5289; border-radius: 7px;" href="https://www.salamatphilippines.com/expat-banking/">Read More</a>

    This is very specific, but you can over-ride this by using the !important and being specific too. Target the .blmore class and specifically the anchor tags within the class (like below).

    .blmore a {
    background-color: #0f5289 !important;
    border-radius: 0 !important;
}

    Apply similar logic to the hover state (if required).

    Note that this is a bit of a fudge, and you really need to work out why inline styles are being applied. As you have seen, inline styles make changes much more difficult.

    I hope this helps, and let me know if you need further help ??

    Mark

    Thread Starter semperaye

    (@semperaye)

    Thank you. I think its my piece of junk theme that doesn’t even have a style sheet or something..maybe thats why simple things like double line spacing and indents don’t work haha. Well anyway your code worked for the background color, and I tried the following for hover and it worked!

    .blmore a:hover {
    background-color: #0f5289 !important;
    border-radius: 0 !important;
}

    [Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

    I’m still going to look for a better theme.. thank you!

    • This reply was modified 7 years, 10 months ago by bdbrown.

    I know you’ve marked this as resolved and good luck with getting a better them, but just to say that I’ve had a look at the hover thing, and found this in the CSS that is working:

    .blmore a:hover {
    background-color: #0c2b44!important;
    border-radius: 0!important;
}

    If you change the colour to the colour you want, you should have solved your problem completely.

    Just for completeness…. ??

    Mark

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to style “Read More” buttons / change colors on blog category page’ is closed to new replies.