widths

• 

  squigglyrainbow · Member · May 6, 2013 at 3:29 am

  • Copy link
  • Add topic to favorites

  Hi, this is my blog http://squigglyrainbow.wordpress.com/

  and I want to make the ‘white box’ where all my content is in a little larger so the background is not the dominant feature.

  How do I change this in the CSS?

  Thanks, Rachael

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

• 

  timethief · Member · May 6, 2013 at 4:21 pm

  • Copy link

  This thread will be moved to the CSS Forum for you.

• 

  designsimply · Member · May 7, 2013 at 12:57 pm

  • Copy link

  First, note that the background may look larger or smaller to different people depending on their monitor size and resolution settings.

  In order to change the width of the current theme you are using, Twenty Ten, you have to adjust several elements. Here is an example of increasing everything by 300px so the new container width is 1240px:

  #branding .home-link,
  #access,
  #access .menu-header,
  div.menu,
  #colophon,
  #branding,
  #main,
  #wrapper {
  	width: 1240px;
  }

  Once you do this, any image galleries or images set at full width would not adjust until you change the Content Width on the Appearance → Themes → Customize → CSS panel to match the new content width, which is 940 if you use 1240px as the new total width like in the example above.

  Now, this doesn’t adjust the header image so you would also need to do that with CSS. The following CSS will hide the current header image and then add it back again centered and repeating:

  #branding img {
  	display: none;
  }
  #branding .home-link {
  	border-top: 4px solid #000;
  	border-bottom: 1px solid #000;
  	background: url("http://squigglyrainbow.files.wordpress.com/2013/05/cropped-107_6026a1.jpg") center center repeat-x;
  	display: block;
  	overflow: hidden;
  	height: 198px;
  }

  You could change out the url() value in this example with a new, pre-sized image you upload to your media library with the proper dimensions. In the example above, you would want to make an image that is 1240 x 198 pixels.

  Note that this method will disable the header image settings on the Appearance → Header page because those are overridden using custom CSS. That’s not a bad thing, just something to keep in mind in case you ever wanted to change out the header image in the future—you would have to do it via CSS and not the Appearance → Header page.