Change Color of Widget Fonts

• 

  vkim67 · Member · Dec 9, 2010 at 4:43 pm

  • Copy link
  • Add topic to favorites

  Hi, I have Bueno by WooThemes. I finally got my background picture to fit nicely. (Not exactly what I wanted but I’ll settle!)

  How do I change the font color of the widget text to BLACK instead of light grey so that they can be seen?
  (1)The widgets are “Recent Posts” and “Categories” and “Archives” including the title and the links below it.
  (2) Also, the links change color when I hover. How do I change the color it hovers to?
  (3) Also is there any way to change font of those to something more reader-friendly like Arial or what not?

  While I am asking about fonts…
  Is there anyway I can change font of my blog posts as well without buying type-kit?

  Thank you very much!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Dec 9, 2010 at 7:54 pm

  • Copy link

  Try the following. I’ve added the bold font weight since the image you have chosen still does not work well with plain black text. Not enough stroke weight on the font. Even with bold though it is hard to read.

  .widget ul li a:link, .widget ul li a:visited, #wp-calendar caption {
  color: #000000;
  font-weight:bold;
  }

• 

  thesacredpath · Member · Dec 9, 2010 at 7:56 pm

  • Copy link

  For the widget titles:

  .widget h3 {
  color: #000000;
  }

• 

  thesacredpath · Member · Dec 9, 2010 at 8:00 pm

  • Copy link

  Actually, I should have had more coffee. Sorry for making so many posts.

  .widget ul li a:link, .widget ul li a:visited, #wp-calendar caption {
  color: #000000;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:bold;
  }

  Still, with the background you have chosen, hard to read.

• 

  hallluke · Member · Dec 10, 2010 at 2:59 am

  • Copy link

  Setting a background colour for #sidebar might be a good idea so that the text is easier to read. Here’s some code to try:

  #sidebar .widget a, .widget h3, .widget {color:#000; font-family:arial,helvetica,sans-serif;}
  #sidebar .widget h3 {border-bottom:1px solid #FBDDDF;}
  #sidebar .widget a:hover {color:#fff;}
  #container .widget_categories li:hover {background:url("IMAGE-URL");}

  The first line will change the font and colours. The second will switch the orange border under the widget titles to the same colour as the rest of the horizontal lines. The third sets the hover colour and the fourth will replace the orange bullet with an image you upload to your media library when a link is hovered over with the mouse (the current file size is a .PNG 5 pixels square with transparentbackground).

• 

  hallluke · Member · Dec 10, 2010 at 3:04 am

  • Copy link

  Or perhaps try this slight modification. The last line formats widgets more like your posts:

  #sidebar .widget a, .widget h3, .widget {color:#000; font-family:arial,helvetica,sans-serif;}
  #sidebar .widget h3 {border-bottom:1px solid #FBDDDF;}
  #sidebar .widget a:hover {color:#F3686D; font-weight:normal;}
  .widget {background:#fff; padding:10px 20px 20px; border:5px solid #efefef;}