[Resolved] Style sidebar widgets individually

[Josh Lake]

I’m looking to customize the style for each sidebar widget individually, much like the right sidbar on your site here: https://www.generatepress.com/support/ (top login widget is white bg, the rest are blue)

Is this built in to the add-ons?

[Tom]

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 🙂

[Roberto Enrique]

ahhhh, is that easy.

[Tom]

Sure is 🙂

[Daniele]

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

[Tom]

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 */
}

[Daniele]

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?

[Tom]

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

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

[Roberto]

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

It simplifies everything.

[Tom]

Ah yea, great idea 🙂

[Nine Dark Moons]

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!!!

[Nine Dark Moons]

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!!!

[Tom]

Awesome, glad we could help 🙂

[Author]

Posts