change coulours of widgets: please help me with the CSS code

• 

  danieleprosdocimo2 · Member · Dec 17, 2008 at 7:07 pm

  • Copy link
  • Add topic to favorites

  hi there,

  my blog is ecovalcucine.wordpress.com (theme Black Letterhead).

  How can I change colour of the widgets? At the moment they are red, while I’d like to put each widget with a different colour.
  I know the colour codes so what I need is the right CSS code structure to change the colours. (e.g. all the links in the blogroll should be green, all the contacts should be blue, and so on).

  thank you so much for your help,

  cheers

  Paola

• 

  devblog · Member · Dec 17, 2008 at 7:48 pm

  • Copy link

  As it is right now, you can’t change the color for each widget since they are using the same class selectors (xoxo and blogroll).

  <ul class="xoxo blogroll">
     <li><a href="http://www.designaddict.com/index.cfm">Design Addict</a></li>
     ..........
     ..........
     ..........
  </ul>

  There’s a way, however, that you could get the results you want but it could proof to be a tedious task: You could write all your links in a text widget and give them custom classes for which you’d write the declarations in your CSS code. For example, you could do something like this (manually, of course):

  <h2 class="widgettitle">Blogroll</h2>
  <ul class="xoxo blogroll">
  	<li><a href="http://www.designaddict.com/index.cfm">Design Addict</a></li>
  	<li><a target="_top" rel="friend" href="http://design-milk.com/">design milk</a></li>
  	......
  	......
  </ul>
  
  <h2 class="widgettitle">Contact Us</h2>
  <ul class="xoxo contactus">
  	<li><a target="_top" href="URL">Text Link</a></li>
  	<li><a target="_top" href="URL">Text Link</a></li>
  	.......
  	.......
  </ul>
  
  <h2 class="widgettitle">Partners</h2>
  <ul class="xoxo partners">
  	<li><a target="_top" href="URL">Text Link</a></li>
  	<li><a target="_top" href="URL">Text Link</a></li>
  	.......
  	.......
  </ul>

  Then, in your CSS, you’d write your definitions something like this:

  .contactus a {color: [color you want];}
  .partners a {color: [color you want];}

  That should give you the results you want.