Changing Widget Titile Colour

  • alenno

    (@alenno)


    8 years, 9 months ago

    Hi,

    I’d like to change the block colours of all the widgets (the rectangular block colours for “search”, “top posts” etc. to white as well as the “continue reading” button on the featured post section.

    Would really appreciate the CSS code to do that!

    Thank you!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    8 years, 9 months ago

    #site-aside .widget-title {
    background: #0000FF;
}
.ilovewp-post .more-link {
    background-color: #0000FF;
}

    Change that to your favorite color.

    To add CSS:

    • If you are using WordPress 4.7 or later, use the “Additional CSS” option in the customizer.
    • If your theme has a custom CSS option, use that to add the CSS shown above.
    • If not, install the plugin Simple Custom CSS.

    Learn to use the Chrome Developer Tools to help you see and test changes to your CSS.

    Michael Kracke

    (@krack3)

    8 years, 9 months ago

    At the most basic level, those would probably be found under the CSS class of “widget-title”. So you could start with something like 

    .widget-title,
 .ilovewp-post .more-link,
.ilovewp-post .more-link:hover {
    background-color: #ffffff;
    color: #000000;
}
    .ilovewp-post .more-link:hover {
   text-decoration: underline;
}

    This should turn the box with and the text black. You may need to do more styling to make it look how you want. As far as the Continue Reading button goes, make sure you watch out for that hover.

    Hopefully this helps

    PS I found the CSS class by using Google Chrome, right clicking the object and clicking Inspect….

    Ah.. you beat me

    Thread Starter alenno

    (@alenno)

    8 years, 9 months ago

    Thank you very much Steve and Michael! It’s worked great.

    Just one more query though: I’ve made the background of my menu white. How can I change the text colour so it’s orange when the mouse hovers over it as well?

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Changing Widget Titile Colour’ is closed to new replies.