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, 1 month ago.

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

    afinevo
    Participant
    Post count: 47

    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

    anitac
    Participant
    Post count: 6385

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


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #21189

    afinevo
    Participant
    Post count: 47

    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: 7454

    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 Dalton400+ StudioPress Tutorials & 1200+ Code snippets

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

You must be logged in to reply to this topic.