Need help? Check out our Support site, then

Change font colors in Structure Theme

  1. preciousformals


    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

  2. 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

    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. 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 a,
    h2 a,
    h3 a,
    h4 a,
    h5 a,
    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

    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. 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.

About this Topic