Widget, change bg color and other properties

• 

  rantingbill · Member · Apr 19, 2011 at 1:35 am

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  thesacredpath · Member · Apr 19, 2011 at 5:12 am

  • Copy link

  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?

• 

  rantingbill · Member · Apr 19, 2011 at 6:44 pm

  • Copy link

  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

• 

  thesacredpath · Member · Apr 19, 2011 at 7:06 pm

  • Copy link

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

• 

  thesacredpath · Member · Apr 19, 2011 at 7:17 pm

  • Copy link

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