Text Color for Widgets & Background Color for Tags

[Patricia Loehn]

Hello and Happy Holidays,

I am trying to change the text from “white” to another color on my widgets – the site is in development but the bottom content area has a creme colored background – the text is white unless you hover over it – I cannot figure out where to change the text to black and create the hover color green.

Also, I have the tags on the creme colored background but they default to a black/dark grey background with white box border and white text – how do I customize this?

Thank you.
Patty

[Sushil Adhikari]

Hi Patricia,

To change tags color and border color, please follow this css :

.tagcloud a {
    color: #AD1F1F;        //chnge text color
    background-color: #282828;   //change background color of tags
    border-color: #545454;           //change border color
    
 }

To change color while hovering on tags

.tagcloud a:hover {
    border-color: #ff0000;     //change border color
    color: #ff0000;                 // chnge text color
    background-color: #fff;    //change background color of tags
    
}

Note: Please use child theme[file: style.css] to add this css, so your changes will not lost on theme update.

Happy holidays.

[Patricia Loehn]

Hi,

Thank you again. How would I do this for the text colors of a widget? Example if I put “categories” widget on the creme colored background the words show up white I can’t find where to change the text colors.

Patty 🙂

Here is what I put with your and my color codes – I have attached a screen shot as well – the background is still dark

.tagcloud a {
color: #da2d7c; //chnge text color
background-color: #f5efe1; //change background color of tags
border-color: #f5efe1; //change border color

}
.tagcloud a:hover {
border-color: #006989; //change border color
color: #006989; // chnge text color
background-color: #f5efe1; //change background color of tags

}
Screenshot2015-12-2523.31.09.png

Attachments:

You must be logged in to view attached files.

[Sushil Adhikari]

Hi there,

If you are keeping Archives, categories, Navigation and Tags widgets on buttom widget postition [ Buttom1, Buttom2, Buttom3, AND Buttom4] . Then you can change color setting from custimizer.

For this you need to follow following steps to fix your issue.
1> Go to dashboard-> Apperance-> Customize-> Colours-> there you will find many setting . The following setting are useful to change color of widgets on buttom widgets position
[ Bottom Widgets Title ]: is used to change color of widgets title eg: Archives, categories, Navigation and Tags widgets as in your screen shot
[ Bottom Widget Text ] : is used to change color of text
[ Bottom Widget Link ] : is used to change color of link eg: link inside Archives, categories, Navigation and Tags widgets title.
[ Bottom Widget Link on Hover ] : is used to change color while hovering on link.

IF this procedure helps you then no need to use custom css that is given before, just removed that.

To change color value in custom css , please use this tutorial for reference, so that you change color as per your requirement.
http://www.w3schools.com/cssref/css_colors.asp

Thanks.

[Author]

Posts