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

Discussion in 'CSS' started by sam132, Feb 17, 2011.

0
  1. #1
    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
     
    sam132, Feb 17, 2011 IP
  2. c4ntaloop

    c4ntaloop Greenhorn

    Messages:
    14
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    #2
    What happened when you put the background-color property?
     
    c4ntaloop, Feb 17, 2011 IP
  3. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #3
    I am assuming #leftside is the side bar id? Simply add the background-color property to this element in the CSS, have you tried this already or not yet? Basically,

    
#leftside {clear:left; float:left; line-height:2em; margin:0 0 5px; padding:0; width:190px; background-color:#333;}
    Code (markup):
    Let me know how it goes,

    Jeremy
     
    jeremyhowell, Feb 18, 2011 IP
  4. sam132

    sam132 Member

    Messages:
    73
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    33
    #4
    Last edited: Feb 21, 2011
    sam132, Feb 21, 2011 IP