Change Sidebar Widget Font Color

Support
#1

Hello! Currently trying to change the color of the font on my sidebar widgets. I want to make the text white and the background black on hover (instead of white). You can see my sidebar on hippieonholiday.com/instagram-hashtags-cheat-sheet

I’ve tried most of the other code in the forum but it hasn’t worked so far. Any help appreciated!

#2

Hey Cassidy,

That can only be done using custom CSS. Before I provide you the override custom CSS code, please note that custom coding or theme customization through coding is outside the scope of our theme support. I’ll provide you with custom code, for now, to show you where to add CSS and some links where you could learn CSS coding so you could code on your own after this.

The code below would work if added in Theme Options > CSS.

.widget ul li:hover, .widget ol li:hover {
    background-color: #000;
    color: #fff !important;
}

.widget li:hover  a {
    color: #fff !important;
}

image

You can learn CSS from here https://www.w3schools.com/css/default.asp

You also would need to learn how to use a browser’s element inspector to help you find the selectors you’ll need. Click here to learn.

Hope that helps and thank you for understanding.

#3

Thank you so much! This definitely helped and I am checking out those guides.

I still need the font in my sidebar to be white with a transparent background when not being hovered over. Right now it’s black and thats my primary issue.

I came up with this:

.widget ul,
color: #fff !important;

But it’s not working. Any advice?

Once again, thank you for your help!

#4

Also, I noticed, while it shows up as working in the preview it does not work for my live site. It also shows the code I entered across the top of the website (which obviously looks awful). Since I have modified the css many times before and had no issues I’m not sure why this code is doing this?

#5

Hey Cassidy,

As you see this requires custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it.

To change the font color by default to white, you can make use of the following code:

.widget ul li a, .widget ol li a {
    color: #fff;
}

It seems like you’ve syntax errors in your custom CSS, you can validate your CSS here http://csslint.net/ and remove errors to fix the issue.

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this helps!

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.