Change Background Color On Individual Widgets

Hello.
Each widget has its unique ID. You can use that ID to apply a background to it.
You will need to add some custom CSS to achieve this.
Install and activate this plugin then go to “Add Custom CSS” on your dashboard and paste this

#widgetid {
background: #FFF;
}

in the box.

You can use this plugin to help you find the ID of a widget.

I tried it but nothing happened.

If the id is categories -16 do I then type in:

#categories-16 {
background: #FFF;
}

That’s what I did but nothing happened

Nvourva – Got it to work but now, I would like to reduce the spacing between those widgets who now have a background so that it looks as if they are all grouped together as a 3 in 1

you can see here https://www.abusybeeslife.com that Search, Categories, and Archives have the same background, so I want to reduce the spacing between them like the lines under the dropdown, and the old “whitespace” so it looks closer together.

Hope that makes sense.

You will need to add some extra styles.

Try this

#widgetid1, #widgetid2, #widgetid3 {
    padding-bottom: 15px;
    padding-top: 15px;
    border-bottom: none;
}

Hi,

I tried it and changed the different padding but could not quite get it.

This is an example of what I would like to do:

https://designyourownblog.com/blog/

When you scroll down on the sidebars, you can see search by…and then she grouped categories,search and archive

Can we do that?

Thanks Nvoura for your help

You are almost there, removing the widget titles will give you a result close to the one you are looking for.

Try adding this in

#widgetid2 .widget-title, #widgetid3 .widget-title {
display: none;
}

This is what I added:

#categories-16. categories, #archives-19 .archives {
display: none;
}

But nothing happened ??

I also removed the widget titles as you said.

while the #widgetid various from widget to widget (you have done that correctly), the CSS class .widget-title is and stays the same for all widget titles;

adjust your CSS accordingly.

Hi so I changed it to:

#categories-16 .widget-title, #archives-19 .widget-title {
display: none;
}

and nothing happened.

That is because you are missing a closing curly bracket after your previous style which causes anything below it not to render.

Thank you for your patience Nvourva!

I fixed it and it looks just the way I wanted it. I appreciate the time you have taken in helping me.

??

You’re welcome, glad to hear you like the result!

I’d like to ask you, if you like the theme and could take a minute to review it here it would help us a lot!

I love the theme, and I am thinking about getting Olsen Pro. I will definitely do the review ??

Thank you very much ??