Increasing buffer between main content and side bar (widget zone) on Twenty Ten

• 

  longconversations · Member · Feb 15, 2011 at 8:54 pm

  • Copy link
  • Add topic to favorites

  Hi! I tried messing with the code but couldn’t increase the gap between main content and the widget zone. Ideally I want to decrease the main content width so that there’s more buffer between main content and the two sides. Could someone take a look at my code and see whether it’s possible? Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  longconversations · Member · Feb 15, 2011 at 9:14 pm

  • Copy link

  Also, how to I change the font style for the menu fonts?

• 

  thesacredpath · Member · Feb 15, 2011 at 9:47 pm

  • Copy link

  To put more space between the content and the sidebar, just adjust the width in .entry-content. The sidebar will stay put. (also adjust the image and video width that is down below the CSS text area and decrease it by the same amount you decrease the content width so that images will come in properly.

  .entry-content {
  width: 600px;
  }

  To change the font for the menu only, you will want to add a font-family declaration as below.

  #access .menu-header, div.menu {
  font-family:"Times New Roman, Geneva, Times, serif;
  }

  One thing to note on fonts, is that the visitor’s browser will pull fonts from their computer, so if the font you specify is not installed on their computer, then the browser is going to substitute whatever it wants (typically the standard “serif” or “sans-serif” that is built into the browser. Always give several fonts (font stack) so that you are more in control. See the following link for the fonts that are standard and consistent from OS to OS.

  http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

  To use fonts that are not common between platforms, you can use typekit and then the visitor’s browser will pull the fonts directly from typekit on the web.

  http://typekit.com

• 

  longconversations · Member · Feb 16, 2011 at 1:47 am

  • Copy link

  Thanks so much!

  I haven’t figured out how to change the font yet – if I insert the font-family declaration into “#access. menu-header, div.menu” the entire menu and content region become unformatted. Any ideas why that is?

  I’ll explore into typekit!

• 

  thesacredpath · Member · Feb 16, 2011 at 2:49 am

  • Copy link

  That is weird. When I insert the font declaration it just changes the font of the menu.

  This will do it too though. Try this

  #access a {
  font-family:"Times New Roman, Geneva, Times, serif;
  }

• 

  longconversations · Member · Feb 20, 2011 at 7:05 am

  • Copy link

  :( no, when I insert the code the menu and content becomes unformatted. Strange!

• 

  thesacredpath · Member · Feb 20, 2011 at 10:16 am

  • Copy link

  It shouldn’t, but I see I left out a ending quote mark. Try the following (it works using firebug on your site just fine).

  #access a {
  font-family:"Times New Roman", Geneva, Times, serif;
  }