Site logo

Archived topic

How to change background color for selected widgets

5 replies · Started by Tawna on November 14, 2022

Viewing posts 1–6 of 6

How to change background color for selected widgets (not the entire sidebar)

sent - I added it in the gray field below - can you see it?

Hi there,

you will need some CSS.
This for example:


.left-sidebar .widget:nth-of-type(2) {
    background-color: #f00;
}

The nth-of-type(2) property will target the 2nd .widget in the left-sidebar

You can repeat that CSS rule and change the 2 for anyone you like.

And if you want to use one of your Customizer GLobal Colors then you can use a var like so:

.left-sidebar .widget:nth-of-type(2) {
    background-color: var(--contrast);
}

Just swap the --contrast for your chosen global color variable name

That worked perfectly - thank you

Glad to be of help!

This archived topic is closed to new replies.