Classic widget area color

[Lyser]

Hello, i have a classic widget area, and i would like to change color of background.

I used :

.x-widget-area {
background-color: rgba(250,250, 250, 0.1);
}

it works but i can’t remove the white when the widget is hovered, how to remove it (or add same color)

i tried :

.x-widget-area:hover {
background-color: rgba(250,250, 250, 0.3) !important;
}

but there is still this white.

[ruenel]

Hello @Lyser,

Thanks for writing in! It is not the widget that is in white when hovered. It is the list item because by default, there is this default CSS styling:

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

Feel free to change the background color into transparent so that the list item will no longer have a white background color when hovered.

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

[Lyser]

It’s working fine, thx ruenel ! =)

As you can see there is also this white background in the posts (with also white font for posts and comments), how to remove this white background, is this something we custom in Pro options or css is needed ?

[ruenel]

Hello @Lyser,

I can see that you are using Integrity stack. This stack will give you an option to have a Light or Dark theme. You can check this option in Pro > Integrity > Design. This is why by default, some parts of the page have the default white background colors. They have the following CSS styling built-in this stack styles.

.entry-wrap {
    background-color: #fff;
}

article.comment {
    background-color: #fff;
}

select, textarea, input[type="text"], input[type="password"], 
input[type="datetime"], input[type="datetime-local"], input[type="date"], 
input[type="month"], input[type="time"], input[type="week"], 
input[type="number"], input[type="email"], input[type="url"], 
input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    background-color: #fff;
}

Feel free again to modify the code and have a different background color for those areas in your page.

[Lyser]

Perfect, thx again ruenel !

[marc_a]

@Lyser,

It’s our pleasure to help you.

Thank you.