Need help? Check out our Support site, then


Changing Font Style/Color in Main Navigation Menu

  1. Hi All,

    I'm new to CSS and just started a blog using Suburbia. I already bought the Annual Upgrade package. I'm wondering if there is anyway to change the font color/style/size in the main navigation menu on the left side of the page.

    Thanks so much for your help!

    The blog I need help with is fifthperiodlunch.com.

  2. Here's a couple of test styles to get you started. You'll need to change the values to your liking.

    #access li {
        font-family: Arial, sans-serif;
        font-size: 1.4em;
    }
    #access li a {
        color: green;
    }
    #access li a:hover {
        color: pink;
    }
  3. @MichaelFields - Works great, thank you! The only thing that isn't working is the "hover" color. I changed it to a color I'd like to use, but it's not working.

  4. Ahh nevermind... I didn't have the hashtag before it. Works great!

  5. You're welcome! Glad I could help :)

  6. @Michael - one more quick question. Will there ever be an option to add the author's names to the front page? I have bylines in the actual posts right now, but as you probably know it doesn't look that great.

  7. @MichaelFields - Hate to do it, but gotta ask: Is there also a way to make the font bigger in the widgets sidebar on the right side of the post pages?

  8. Will there ever be an option to add the author's names to the front page?

    Probably not if it wasn't part of the original theme design.

  9. Is there also a way to make the font bigger in the widgets sidebar on the right side of the post pages?

    To adjust the font size for widgets in the right sidebar for posts in the Suburbia theme, start with this and adjust the size to your liking:

    .widget h3.widget-title {
    	font-size: 150%;
    }
    
    .widget {
    	font-size: 130%;
    }

    Note that it's possible that some widgets or widget areas will have a font size set with an additional selector that it more specific. If you find that happening for any sidebar text, then you just need to identify that selector and add a rule to override it in your CSS.

    It's also possible to set the font for certain types of widgets or specific widgets individually. If you want to do that, you need to look at the page source in your browser to see what classes or IDs are set in the HTML and use those to create more specific CSS. For example, You can change just the categories widget fonts like this:

    .widget_categories h3.widget-title {
    	font-size: 150%;
    }
    
    .widget_categories {
    	font-size: 130%;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic