Need help? Check out our Support site, then


Change font colors in Structure Theme

  1. preciousformals
    Member

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

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

    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