Creating background color for a single widget in Eleven40 theme

[afinevoParticipant Post count: 13]

Hey everyone!  I just purchased the Eleven40 theme and I have it installed as sidebar, content, sidebar, (no major changes, it looks like the sample site) as a test site on a server on my own computer while I figure things out.  I have the categories widget installed with the drop down option in the upper right hand sidebar.  I would like to add a colored background to make it stand out.  I tried using Firebug to identify it in the CSS file but didn’t have any luck.  I couldn’t find what it displayed.  Can someone point me in the right direction to find that particular widget in the style sheet along with the coding I should use to get a colored background just for that widget along with the correct padding, border, and etc?

Thanks in advance…

[anitacModerator Post count: 2613]

@afinevo, we need the URL of your site. Each widget area has a specific class id. Without seeing the site, we cannot target that area for you.

---

Twitter Handles: @thecre8tivediva | Website: Cre8tiveDiva.com | LinkedIn Group: http://goo.gl/nNe1m
Why Not Take The Challenge! – Help us answer some of the unanswered posts

[afinevoParticipant Post count: 13]

Ok, thanks Anitac.  It’s just on the server on my own computer right now as a test site.  I’m transferring the theme to my current site tonight and when I do I will send the link.  Thanks.

[braddaltonParticipant Post count: 2457]

Another way to style your widgets is to add a new class and i.d for a specific widget by installing this plugin http://wordpress.org/extend/plugins/widget-css-classes/

New class and I.D = cat-widget

Sample CSS:

//This styles the widget background, adds a border and padding on all 4 sides
.cat-widget {
 background: #2B2B2B;
 padding: 20px 20px 20px 20px;
 border: orange solid 2px;
}
//This styles the widget heading text and background with the same padding
.cat-widget h4 {
 color: white;
 background: #2B2B2B;
 padding: 20px 20px 20px 20px;
}

You could also install the Widget Logic plugin and paste in a conditional tag if you only wanted the widget to display on specific pages.

---

WordPress Developer & Consultant
Brad Dalton @ WP Sites – Click Here to Get Genesis Child Theme Tips Delivered.

[Author]

Posts