Style sidebar widgets individually

Hi there,

You will need to use a tool like Chrome's inspect element, or Firefox's Firebug.

Each widget has a unique ID.

For example, the 30 day guarantee on the right has this id: text-6

So the CSS would be:

#text-6 {
      background: #1e72bd;
      color: #FFF;
      padding: 0;
}

Let me know if that makes sense :)

ahhhh, is that easy.

Sure is :)

hi Tom,
I knew that code works but just with text widget.

I gave a try indeed because i was customizing some widgets in the right sidebar and I applied the same class

{
background: #1e72bd;
color: #FFF;
padding: 0;
}

to 2 different widgets but:

the first one (a text widget) got all styles, the second (standard tag cloud widget) got only the background.

Why? And then, how to modify the widget title too (actually I need to change just the color)?

Thank you,
Daniele

You need to use your browser's code inspector to find the specific IDs for the widgets you're trying to alter, for example: http://screencast.com/t/TiXaLlJHvb

The CSS you added above is missing a selector, not sure if that's intentional?

The class for the widget title is .widget-title

So CSS to apply to all widget titles would be:

.widget-title {
    /* CSS in here */
}

And a specific widget:

#unique-widget-id .widget-title {
    /* CSS in here */
}

Hi Tom,
sorry if I didn't put the selector and thanks for the widget title customization.

But actually, that matter still remains.

I gave this css to the text widget ("Oggi negli anni '80")

'#text-20, #text-20 .widget-title {
background: #227DD0;
color: #FFF;
}

#text-20 {
background: #227DD0;
color: #FFF;
border: 2px dashed;
border-color: #000;
}'

and it works as you can see.

I gave this to the tag cloud widget

'#tag_cloud-2 {
background: #f30;
color: #fff;
border: 2px dashed;
border-color: #000;
}

#tag_cloud-2 .widget-title {
background: #f30;
color: #fff;
}'

and it works with everything but text (that still remains #000).

what's wrong?

Ah, tags use links, so you'll need to target the links directly like this:

#tag_cloud-2 a {
    /* CSS in here */
}

You should try
https://wordpress.org/plugins/widget-css-classes/

It simplifies everything.

Ah yea, great idea :)

OMG thank you!!! you just helped me in 10 seconds, after i spent 3 hours searching the web. i was just able to update the background of my archive dropdown to black. thank you thank you thank you!!!

i am using the archive that comes with wordpress/jetpack and all i did was add these 3 lines to my child-theme's style.css sheet:

#archives-dropdown-2 {
background: #000000;
color: #DC143C;
}

you have no idea how many things i have been trying. thank you!!!

Awesome, glad we could help :)