How to change the font color of the footer widgets

body a will apply to all hyperlinks within your entire theme body, unless you specifically apply styles to hyperlinks that reside within a different element, such as your .footer classname, like so.

.footer a {
    color: #ababab;
}

You can do this for any element, and you can use tools such as Firebug to inspect your code structure to find the classnames of the elements you wish to apply styles to.

Hope this helps.

• This reply was modified 8 years, 3 months ago by ThemeSumo. Reason: specify footer classname, not footer element
• This reply was modified 8 years, 3 months ago by ThemeSumo.

Aha i see, thank you. I see there is still a hover over, how can i turn that off Sumo?

Update: I did it with:

.footer a:hover {
color: #ababab;
text-decoration: none;
}

There ya go! The body hyperlink color will still be applied to the footer links, but because you have now specified a particular element, .footer, and applied different styles to its hyperlinks, those take precedence.

Keep this in mind as it means you can remove the text-decoration from your .footer hyperlinks as they’re already being applied to all hyperlinks via the body a styles.

.footer a:hover { 
    color: #ababab;
}

The above code should produce the same results, the text-decoration: none; is still being applied.

• This reply was modified 8 years, 3 months ago by ThemeSumo. Reason: Additional information
• This reply was modified 8 years, 3 months ago by ThemeSumo.

I hear you. . footer just overwrites the main body tag. Thanks.

When i remove `text-decoration: none;’ the items get underlined, which i dont want. So i just let it sit there.

Ow Sumo, how can i do the same with the H2? I made the H2’s in my posts a specific color. But now my Rapidology(optin) plugin’s H2 is also the same color as the ones in my posts. Its on the right https://www.stijnspreekt.nl

• This reply was modified 8 years, 3 months ago by ClaitonLord.

Do you mean the e-book area to the right?

You have this code that is forcing a particular color on all <h2> elements:

h2 {
    color: #13C4A5 !important;
}

You’ll need to use !important to override this by using this code:

.western {
    color: #fff !important;
}

Hope this helps.

Alternatively don’t use “!important”

Ahaa yes, that worked. Thanks again Sumo!

@andrew, what do you mean?