How to change colour of Widgets

• 

  subtledreamz · Member · Jan 17, 2009 at 11:01 pm

  • Copy link
  • Add topic to favorites

  I’m a very new to wordpress, I am using wordpress.com and have just upgraded to use the CSS.
  I’ve managed to change the colour of my background.

  My question is – how do I change the colour of the sidebar widgets
  to match the colour of my background etc.
  I couldn’t change the colour of my header either, so I just added a header to test it out.

  Sorry if this question is in the wrong place or if it has already been answered somewhere else.

  http://subtledreamz.wordpress.com/

  Thanks

  Lou

• 

  devblog · Member · Jan 17, 2009 at 11:23 pm

  • Copy link

  try this:

  .widget ul, .textwidget {background: [color you want] !important;}

  HTH

• 

  subtledreamz · Member · Jan 17, 2009 at 11:37 pm

  • Copy link

  Thankyou for replying, that changed the inside colour of the widets, I don’t suppose you have a code to change just the borders of the widgets at all?

  I’d like to use the colour of my background as the border colour and then have the block colour as white inside the widgets.

  Lou

• 

  universalgeni · Member · Jan 17, 2009 at 11:37 pm

  • Copy link

  This can only be done if your have the CSS upgrade or how is it?

• 

  subtledreamz · Member · Jan 17, 2009 at 11:38 pm

  • Copy link

  Yes I have upgraded to the CSS upgrade.

• 

  universalgeni · Member · Jan 17, 2009 at 11:39 pm

  • Copy link

  Well, I haven’t – soI’d like to know what options I have…

• 

  universalgeni · Member · Jan 17, 2009 at 11:48 pm

  • Copy link

  The only alternative I’ve been able to come up with s something about having the widget background colour as an image and the have click-able links in it via some sort of image mapping done at some online site. Quite a job.

  And I don’t even know if that will work on a WordPress.com blog…

• 

  devblog · Member · Jan 17, 2009 at 11:53 pm

  • Copy link

  I didn’t know you wanted to change the color of the borders too, that’s why I didn’t include them in the code. Gimme some minutes and I’ll post a revised code.

• 

  devblog · Member · Jan 18, 2009 at 12:03 am

  • Copy link

  try this:

  .widget ul,.textwidget {
  background:#fff !important;
  border: solid 1px #be9090 !important;
  }
  
  .widget .widgettitle{
  background: #be9090 !important;
  }

  Let me know if that’s what you wanted.

• 

  subtledreamz · Member · Jan 18, 2009 at 10:17 am

  • Copy link

  Thankyou very much for posting the code, i’ll try that now.

  Lou

• 

  subtledreamz · Member · Jan 18, 2009 at 10:20 am

  • Copy link

  That worked a treat, thankyou very much for your time and for the code.