Archived topic
How to change background color for selected widgets
5 replies · Started by Tawna on November 14, 2022
How to change background color for selected widgets (not the entire sidebar)
Hi there,
You would need to target the specific widget.
Any chance you can link us to the page in question?
You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Let me know :)
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!