Changing Tab Colors

• 

  decorinspiration · Member · Jan 21, 2009 at 4:53 pm

  • Copy link
  • Add topic to favorites

  How can I change the color of my page tabs using CSS?

• 

  rosclarke · Member · Jan 21, 2009 at 5:11 pm

  • Copy link

  We can’t even begin to help you without a link to your blog.

• 

  decorinspiration · Member · Jan 21, 2009 at 5:22 pm

  • Copy link

  Oops…sorry about that. Here it is http://www.decorinspiration.wordpress.com I’m having someone design the banner but I’m feeling a bit hamstrung by the tab colors. Here is what was designed for me

  http://www.etsy.com/get_convo_image.php?convo_id=11884348&image_id=6246714&image_type=full

  If I could change the color of the “home” tab to a lighter blue and change the yellow “search” to fuschia on the template I would be happy.

  Thanks!

• 

  gwideman · Member · Jan 21, 2009 at 9:14 pm

  • Copy link

  FWIW, the link to your image at etsy.com returns a sad face. Maybe a link from here is not allowed?

  At any rate, inspection with Firebug shows:

  —————————-
  /* This sets default tab color */
  #navigation, #navigation li {
  background-color:#A3C159;
  }

  /* This sets selected and hover tab color */
  #navigation .selected, #navigation a:hover {
  background-color:#1BA6B2;
  }

  /* The nav form background color yellow shows through around the search box */
  #navigation form {
  background:#FEC42D url(images/spring_flavour/corner_bottom_right.gif) no-repeat scroll right bottom;
  border-color:white;
  }

  /* Go! button colors */
  #navigation #searchbutton {
  background-color:#A3C159;
  color:white;
  }
  —————————-

  So… in WP’s CSS Stylesheet Editor you would add similar CSS settings, changing the colors to what you want.

  Hope that helps.

• 

  decorinspiration · Member · Jan 21, 2009 at 10:09 pm

  • Copy link

  Wow…this was great. Thank you so much! Last question – how can I change the color of my widget boxes on the side column?

• 

  decorinspiration · Member · Jan 21, 2009 at 10:11 pm

  • Copy link

  and how do I change the color of the text in the selected tab box and rollover? Right now the white text is not showing up with the light blue.

  Thanks again for all your help!

• 

  gwideman · Member · Jan 22, 2009 at 12:23 am

  • Copy link

  General answer to this line of questioning — save yourself considerable effort by getting the firebug extension for Firefox. Once you have that, in the browser window you can right-click on an element on the page and select “Inspect Element”, and then view a firebug display showing you exactly where the styling for that element comes from in the CSS. You can basically copy and paste that info into your custom CSS and then edit it to fix what you want to change. (Indeed, you can change it right in the firebug window to assess the result on the spot.)

• 

  decorinspiration · Member · Jan 22, 2009 at 1:41 am

  • Copy link

  Thanks for the tip. I had to play around with it for the past hour, but I think I’ve figured it out. You’ve been great!