Change font colors in Structure Theme

  • Unknown's avatar
    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: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    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?

  • Unknown's avatar
    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?

  • Unknown's avatar
    designsimply · Member ·

    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.

  • Unknown's avatar
    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!

  • Unknown's avatar
    designsimply · Member ·

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

  • The topic ‘Change font colors in Structure Theme’ is closed to new replies.