How to change the sidebar background image/color (Wordpress)

4 replies
  • WEB DESIGN
  • |
I can't seem to work this one out, I've tried a bunch of different things!

I'd like to either change the background color of my sidebar (which is long) or change it to an image of a light color.

I understand I need to add the line "background-color: #0099CC" somewhere into the following section (when changing the color):

/* Sidebars */
#leftside {clear:left; float:left; line-height:2em; margin:0 0 5px; padding:0; width:190px;}
#extras {float:right; line-height:1.4em; margin:0 0 5px; padding:0; width:190px;}
#leftside p, #leftside ul, #leftside div.textwidget, #extras p, #extras ul, #extras div.textwidget {font-size:1.1em; margin:0 0 18px;}
#leftside li, #extras li {line-height:2em; list-style:none; margin:0 0 6px;}
#leftside ul ul, #extras ul ul {margin:6px 0 0 10px;}
#leftside ul ul li, #extras ul ul li {margin:0 0 4px;}
#leftside ul ul li a, #extras ul ul li a {font-weight:normal;}
#leftside ul.linklist, #extras ul.linklist {font-size:1.1em;}
#leftside ul.linklist ul, #extras ul.linklist ul {margin:0 0 20px;}
#leftside ul.linklist ul li a, #extras ul.linklist ul li a {font-weight:bold;}
#leftside h2, #leftside ul.linklist li h2, #leftside h3, #extras h2, #extras ul.linklist li h2, #extras h3, table#wp-calendar caption {background-color:inherit; color:#505050; font-size:1.3em; font-weight:normal; text-align:left; margin:0 0 6px;}
#leftside label, #extras label {display:none;}


I tried a few variations around the "background-color:inherit" but couldn't seem to get it to work.

Can anyone see what I'm missing?

Many thanks,

Sam
#background #change #image or color #sidebar #wordpress
  • Profile picture of the author AnthonyKrese
    You should post a link to the site, if you can.
    Signature
    What's for dinner tonight? Fast, easy, awesome recipes to keep the wife and kids happy!

    The Man's Cookbook
    {{ DiscussionBoard.errors[3379553].message }}
  • Profile picture of the author WilTGS
    Try changing background-color:inherit; color:#505050; to

    background-color: #0099CC !important; if you posted the link it would be easier to say.
    {{ DiscussionBoard.errors[3388946].message }}
  • Profile picture of the author wbdzgnr
    you try firebug, let us know if you got it fixed already
    {{ DiscussionBoard.errors[3390635].message }}
  • Profile picture of the author infoman66
    You can use Fire Fox (Or copy the page source into a tool for editing of Web sites Which has the ability to display nested elements as an XML structure (like Notepad ++)) to detect the name (id or class) of the element which is the main container for the sidebar .

    Then in Wordpress, in the css file find the id or class, which refers to the element and change the background color.

    And if it's #leftside (to me looks like that is it), add the desired background color to #leftside {background-color:#0099CC;}
    {{ DiscussionBoard.errors[3390868].message }}

Trending Topics