Need help? Check out our Support site, then


Widget, change bg color and other properties

  1. I want to change bg color of all widgets using Edit CSS. Ive entered .widget {
    background-color: #FFFF70;} in edit css. That changes the overall BG of the widgets but not the background of the text. I want to make text bg the same color. I also want to change border width and color and change the font in headline and list elements. The following changes text font and headline font but not font color. And I still need border adjustment. With this code, hover produces the yellow bg
    .widget {
    background-color: #FFFF70;
    border: 0 !important;
    margin-left: 0 !important;
    font-family: tahoma, sans-serif;
    font-size: 10px;
    font-color: #000000;}
    h3 {
    font-family: tahoma, sans-serif;
    font-size: 16px;
    line-height: 24px;
    }
    }

    Is there a lost of properties or attributes or whatever they are called for class .widget ?
    Thanks a lot

    The blog I need help with is rantingbill.wordpress.com.

  2. Can you explain a little more what you want to do? Do you want that yellow color to be the background for the entire sidebar, clear down to the footer?

  3. Not quite. I just want the yellow in the Widget boxes and behind the text. Right now there is a yellow bg hover if I apply the above changes. The actual site I'm working on is http://wammtoday.wordpress.com/. The widget bg is grey, I want it to match the main body with a red border. I also want to change fonts, but the above code does that.
    Thanks

  4. This changes the grey background of the rounded sidebar areas to your color and leaves the white rounded border.

    .active .sidebar-inner {
    background: none repeat scroll 0 0 #FFFF70;
    }

    This makes the background of the widgets themselves yellow leaving the grayish area around them.

    .widget {
    background-color: #FFFF70;
    }
    
    #content .sidebar li {
    background: url("images/sidebar-li.gif") no-repeat scroll 0 0 #FFFF70;
    }
  5. And actually, this might be more what you want now that I've read through it again.

    .active .sidebar-inner {
    background-color: #FFFF70;
    border: 1px solid #EC3941;
    }
    
    .widget {
    background-color: #FFFF70;
    }
    
    #content .sidebar li {
    background: url("images/sidebar-li.gif") no-repeat scroll 0 0 #FFFF70;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic