Creating background color for a single widget in Eleven40 theme

Community Forums Forums Design Tips and Tricks Creating background color for a single widget in Eleven40 theme

This topic is: not resolved

This topic contains 3 replies, has 3 voices, and was last updated by  braddalton 1 year, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #21164

    afinevo
    Participant
    Post count: 69

    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…

    #21182

    AC
    Blocked
    Post count: 7712

    @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.

    #21189

    afinevo
    Participant
    Post count: 69

    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.

    #21227

    braddalton
    Participant
    Post count: 10563

    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:
    [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;
    }
    [/css]

    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.


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.