Widget, change bg color and other properties

  • Author
    Posts
  • #601011

    rantingbill
    Member

    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.

    #601146

    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?

    #601240

    rantingbill
    Member

    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

    #601246

    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;
    }
    #601247

    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;
    }

The topic ‘Widget, change bg color and other properties’ is closed to new replies.