Sidebar Font Color

Support
#1

Hello! I am trying to make the font on my sidebar visible.

I wan the text color to be white, but to change to black text on a white background upon hover. I’ve got that fairly figured out but the “text” widget that I’m using for my about is not being affected. I try to address that in the last bit of code below.

This is what I have right now. If you could help me modify it to include the text box I would really appreciate it!

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

.widget li:hover a {
color: #000;
}

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

.contact-info .textwidget {
color: #fff;
}

#2

Hello Cassidy,

Thank you for the very detailed information. Your code seems valid and correct. The only issue is with this custom CSS block.

.contact-info .textwidget {
   color: #fff;
}

This code will only work if the container of the text widget is using contact-info. The problem is that there aren’t any containers on the page that bears that class name. To resolve this issue, just update your code and use this instead:

 .textwidget {
   color: #fff;
}

We would love to know if this has worked for you. Thank you.

#3

Wow! That was so fast. Thank you very much! It totally works.

While I’ve got you, do you know if there is an easy way to add a background on hover or just a background at all to the text widget? If not, the white text will definitely do but if it can be done fairly easily it would definitely look better with a background.

Thanks again!!

#4

Hello Cassidy,

Adding a background image to an element will require you more custom CSS. Keep in mind that custom development is beyond the scope of our support. What we can do is give you some pointers to get you started with. Anyway, you need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector of the element you need to use. And then you add a CSS code something like this to trigger the hover. For example, for your widget area, you can have something like:

.textwidget {
   background-color: transparent;
   color: #fff;
}

/* Upon hovering */
.textwidget:hover {
   background-color: #222;
   color: #fff;
}

It might look awful because of the lack of spacing. Adding a padding to code will definitely help.

.textwidget {
   background-color: transparent;
   color: #fff;
   padding: 10px;
}

/* Upon hovering */
.textwidget:hover {
   background-color: #222;
   color: #fff;
}

Screen Shot 2020-08-31 at 12.02.49 PM
Screen Shot 2020-08-31 at 12.02.49 PM730×1068 124 KB

Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

For references, check these out:

#5

Wow. Above and beyond! As I’m still tip-toeing in css this was INCREDIBLY informative. Thanks so much!

#6

Glad that we could be of help.

Cheers!

#7

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