Customize Main Sidebar Colors and Hover

[hhg]

Hi, I am making a page with a widget area, and selected the main sidebar. It has categories and search only.

The problem is my text color is white so when I hover over the category the entire bar turns white and makes the white text blend away (#2). If you hover directly over the category name then the text appears (#3). Id like to get rid of the extra white hover bar effect in #2.

Also I wanted to get rid of the shadow effect (#1) around the category and just have it be clear.

Thank you for any help!

[rubin]

Hey There,

Please add following to the Custom CSS section inside your theme options:

.widget ul, .widget ol { box-shadow: none; }
.widget ul li:hover, .widget ol li:hover { background-color: none; }

Let me know if you need anything further.

[hhg]

Hi thank you for the reply. I added the following code but I am still having trouble with the white hover effect:

.widget ul, .widget ol { box-shadow: none; }
.widget ul, .widget ol { border: none; }
.widget ul li:hover, .widget ol li:hover { background-color: none; }

The shadow and border are gone now but not the white hover box. Thank you for any other advice!

[christian]

Hey Michael,

Add this too.

.widget ul li:hover, .widget ol li:hover {
    background-color: transparent;
}

Hope that helps.

[hhg]

Thank you for all the help @christian ! I have attached the final result when you hover over the word.

What is this shadow effect and how can I adjust it? The word starts white and when I hover it has this second layer of colored text on it. Thank you.

[ruenel]

Hello Michael,

By default, the text shadow were applied to the widget texts. This is the default code:

.widget {
    text-shadow: 0 1px 0 rgba(255,255,255,0.95);
}

Feel free to modify the code above and set the text-shadow property to none. For more details, kindly check this out:

• https://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Best Regards.