WordPress.com

1. preciousformals
   Member
   Jun 25, 2012, 6:08 PM

   Hi:

   I'm trying to change the font colors of headers and the nav bar links in my structure theme CSS editor. I figured out how to change the body text, but I'm not sure about the others. Any help is appreciated. Thanks!

   The blog I need help with is preciousformals.wordpress.com.

2. thesacredpath
   Member
   Jun 25, 2012, 7:06 PM

   Menus: The first is the non-current, non-hover color, the second is the color when hovered, and the third is the color for the current page menu item. I included the border color declarations as well in case you wish to change those too.

   .ot-menu a, .ot-menu a:visited {
   color: #999999;
   }
   
   .ot-menu a:focus, .ot-menu a:hover, .ot-menu a:active {
   border-color: #FFFFFF;
   color: #FFFFFF;
   }
   
   .ot-menu .current_page_item a {
   border-color: #FFFFFF;
   color: #FFFFFF !important;
   }

   When you say, "header" which are you talking about? Post titles, widget titles, page titles, etc?

3. preciousformals
   Member
   Jun 25, 2012, 7:18 PM

   The nav worked, thank you! I guess I would want to change all of those options that you listed to clarify "header". Is there a way to do that all in one line, or do I need to specify each one separately?

4. designsimply
   Staff
   Jun 25, 2012, 9:56 PM

   Here are two different examples for you to work with:

   First, this will attempt to change the color for ALL headings. It's pretty agressive and might change more things than you want:

   h1,
   h1 a,
   h2,
   h2 a,
   h3,
   h3 a,
   h4,
   h4 a,
   h5,
   h5 a,
   h6,
   h6 a {
   	color: palevioletred !important;
   }
   h1 a:hover,
   h2 a:hover,
   h3 a:hover,
   h4 a:hover,
   h5 a:hover,
   h6 a:hover {
   	color: hotpink !important;
   }

   Or you could be more selective and try to change just post titles, page titles, and widget headings in the sidebar like this:

   .posttitle h3,
   .post h3 a,
   #sidebar_right h4,
   #sidebar_left h4 {
   	color: palevioletred !important;
   }
   .post h3 a:hover {
   	color: hotpink !important;
   }

   Try them out and see which one you like best. Adjust the color code as necessary.

5. preciousformals
   Member
   Jun 26, 2012, 3:04 PM

   Thanks so much! I also downloaded Firebug which helped me figure out what the div and class names were for each element....can't believe I didn't think of that before. Oh well, live and learn!

6. designsimply
   Staff
   Jun 26, 2012, 3:14 PM

   Firebug is awesome! Firefox actually has a separate web inspector built in now. Most of the current stable browser versions have it too.

Topic Closed

This topic has been closed to new replies.