Changing Font Style/Color in Main Navigation Menu

• 

  thewayishere · Member · Apr 10, 2012 at 6:34 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  michaelfields · Member · Apr 12, 2012 at 9:14 pm

  • Copy link

  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;
  }

• 

  thewayishere · Member · Apr 13, 2012 at 1:27 pm

  • Copy link

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

• 

  thewayishere · Member · Apr 13, 2012 at 1:28 pm

  • Copy link

  Ahh nevermind… I didn’t have the hashtag before it. Works great!

• 

  michaelfields · Member · Apr 13, 2012 at 3:21 pm

  • Copy link

  You’re welcome! Glad I could help :)

• 

  thewayishere · Member · Apr 13, 2012 at 3:38 pm

  • Copy link

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

• 

  thewayishere · Member · Apr 16, 2012 at 8:08 pm

  • Copy link

  @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?

• 

  designsimply · Member · Apr 19, 2012 at 2:32 pm

  • Copy link

  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.

• 

  designsimply · Member · Apr 19, 2012 at 2:40 pm

  • Copy link

  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%;
  }