stretch

Changing the Width of a TwentyTen Child Theme

One thing I noticed about the TwentyTen theme, is that everything is a bit too narrow for my personal preference. The widget column, the post area, the theme overall. So I decided to go ahead and make everything just a bit wider. I like my themes to always be around 1010px wide. But by default, TwentyTen is only 940px wide. I thought making the theme a bit wider would look nicer, and also allow me to make the sidebar a bit wider. This is a very simple edit, but be forewarned….. there’s math involved!

We are going to look at widening twentyten using a child theme in this example. You could also make it narrower, or if you’re real creative, give it a flexible width. The code you’ll edit will be the same, you’ll just need to do your own math. Also, if you decide to change the size of the theme, you’ll need to follow this tutorial to adjust the header size to fit your new dimensions.

Up until this point in my theme editing, I had always used the @import rule in my theme to call to twentyten’s css, and just added in rules as I needed them. But when I finally decided to change the width of the theme, I decided it was best to copy all of twentyten’s css over and stop using @import. You can check out the details of @import and child themes in general here. I’d recommend you consider doing the same if you are going to do this edit, as we start editing a fair bit of css. The more you want to tweak twentyten’s css, the more it makes sense to copy it all to your theme.

The most obvious edit we need to make to start this all out is the width of the theme. It’s right here in twentyten:

/* The main theme structure */
#access .menu-header,
div.menu,
#colophon,
#branding,
#main,
#wrapper {
	margin: 0 auto;
	width: 940px;
}

Tweak that to fit your new dimensions. I’m doing a 1010px theme, so mine now looks like this:

/* The main theme structure */
#access .menu-header,
div.menu,
#colophon,
#branding,
#main,
#wrapper {
	margin: 0 auto;
	width: 1010px;
}

After widening the main part of the theme, we need to make the menu wider. It looks like this to start:

#access {
	background: #000;
	display: block;
	float: left;
	margin: 0 auto;
	width: 940px;
}
#access .menu-header,
div.menu {
	font-size: 13px;
	margin-left: 12px;
	width: 928px;
}

And we’ve just modified it to our new dimensions like this:

#access {
	background: #000;
	display: block;
	float: left;
	margin: 0 auto;
	width: 1010px;
}
#access .menu-header,
div.menu {
	font-size: 13px;
	margin-left: 12px;
	width: 998px;
}

That’s the easy part. From here on out, there is a bit of math involved. You need to decise what to do with your extra pixels. In this example we’ve added 70px of width. So we need to divide that up between the sidebar and the post area. We have to make sure whatever we add to each totals 70px. And one other small detail, we have 4 widget areas in our footer. Those can grow too to accomodate our new width. That is another easy tweak, so let’s do that. The footer widgets in twentyten look like:

#footer-widget-area .widget-area {
	float: left;
	margin-right: 20px;
	width: 220px;
}

And I have 70px to play with, so my new css looks like:

#footer-widget-area .widget-area {
	float: left;
	margin-right: 20px;
	width: 235px;
}

That’s an additional 15px per widget area. Nice. I like to let my widgets have some space, they look far less crowded. However, if you were to just make this edit, the widgets are no longer really centered. So we just add in a new little bit of css like this:

#footer-widget-area #first {
	margin-left: 5px;
}

Underneath the .widget-area css and that takes care of it. 4 bigger widget areas, still nicely centered. Now we will move on to the main bulk of the edits. The content area. Do your math and decide how to divvy up your pixels. As I said earlier I had 70px to work with. Here’s what I did. I thought my sidebar widgets were way too crowded. So I added in 40px to the sidebar. I also thought the gutter was a bit too big. Thats the space between the sidebar and the content. So I reduced the gutter by 10px. This is done by adjusting the margins on the content and container. All of these edits take place in the layout section of the css. You may also want to edit the one-column and full width layouts to match your new layout. It may be easier to look at what I did vs. trying to understand my babble, so here’s twentyten’s css:

/*
LAYOUT: Two columns
DESCRIPTION: Two-column fixed layout with one sidebar right of content
*/

#container {
	float: left;
	margin: 0 -240px 0 0;
	width: 100%;
}
#content {
	margin: 0 280px 0 20px;
}
#primary,
#secondary {
	float: right;
	overflow: hidden;
	width: 220px;
}
#secondary {
	clear: right;
}
#footer {
	clear: both;
	width: 100%;
}

/*
LAYOUT: One column, no sidebar
DESCRIPTION: One centered column with no sidebar
*/

.one-column #content {
	margin: 0 auto;
	width: 640px;
}

/*
LAYOUT: Full width, no sidebar
DESCRIPTION: Full width content with no sidebar; used for attachment pages
*/

.single-attachment #content {
	margin: 0 auto;
	width: 900px;
}

And here’s my edited css:

/*
LAYOUT: Two columns
DESCRIPTION: Two-column fixed layout with one sidebar right of content
*/

#container {
	float: left;
	margin: 0 -310px 0 0;
	width: 100%;
}
#content {
	margin: 0 310px 0 20px;
}
#primary,
#secondary {
	float: right;
	overflow: hidden;
	width: 260px;
}
#secondary {
	clear: right;
}
#footer {
	clear: both;
	width: 100%;
}

/*
LAYOUT: One column, no sidebar
DESCRIPTION: One centered column with no sidebar
*/

.one-column #content {
	margin: 0 auto;
	width: 710px;
}

/*
LAYOUT: Full width, no sidebar
DESCRIPTION: Full width content with no sidebar; used for attachment pages
*/

.single-attachment #content {
	margin: 0 auto;
	width: 970px;
}

And that’s really it for editing css. Like I said, there’s a bit of math involved. But the basic process is to pick your width and set that first. Divvy up your new additional pixels among the 4 bottom widget areas, and then do the same for the content area and the sidebars. There’s one remaining non-css edit to do. In twentyten’s functions.php we see:

 
if ( ! isset( $content_width ) )
	$content_width = 640;

So the edit here should be pretty obvious. We just put that in our child theme’s functions.php with our new content width. So mine is:

// OVERRIDE TWENTYTEN DEFAULT CONTENT WIDTH
if ( ! isset( $content_width ) )
	$content_width = 680;

I just figured out that width by doing the math. I added 70px of width. I then added 40px to my sidebar, which would leave me 30px for my content area. But, twentyten had a sidebar margin 40px wider than the sidebar content. I reduced the difference to 30px. So that leaves an additional 40px for the content. Hopefully you can see what I mean in my examples, as I’m not sure my descriptions are totally clear here.

That’s it for widening the twentyten theme. You may have other tweaks to make. For instance you could make the space available to your site name and description wider. But I didn’t play with that as I have mine hidden or relocated. Hopefully I’ve given you enough information here to be able to play around and have some fun with your child theme. One thing I try to stress, if you can’t read your source code and figure out what css to edit, you need firebug. I can’t stress how easy it makes your life when you can just point at css and play with edits to see how they work!

22 thoughts on “Changing the Width of a TwentyTen Child Theme”

  1. hi there!

    you helped me out not too long ago on the wp forums. i asked another ques, then i started a new thread with this ques, and i have not gotten an answer from anywhere.

    you helped me figure out how to expand the size on my content column on twenty ten after resizing my sidebar.

    i did it. your advice worked very well. however, my images and text are not aligned … and my text on the right side has a large space, like the margin cuts it short. I can’t find anywhere that posts how i can fix this specific problem.

    here is a good example of what i am referring to – http://theartmuse.net/2011/02/26/paint/

    do you see the text all the way to left?

    any help would be greatly appreciated!!! thanks so much!

    1. Hi there. First thing I noticed which we should address very quickly. It looks like you are modifying the actual twenty ten theme, is that correct? That is a huge no-no. Twenty Ten is considered a core file with WordPress. That means it is upgraded along with WordPress upgrades. Which basically means any edits to it will be lost. You can check out http://go.rvoodoo.com/WPchild for more info. You really should consider a child theme. As for the actual problems you are seeing, I’m at work right now so I don’t have any handy tools available to dig deeper right now. Hopefully I can look into it later. But maybe I can help you get a head start. Are you familiar with the firebug addon for firefox browser? With it, you can point at each element on your page, and see it’s corresponding css. I use it constantly in fine tuning websites. You can even adjust css code in firebug temporarily (it isn’t saved to your theme, but it lets you play in real time) to see what you can tweak. So I recommend figuring out the whole child theme thing first off, to save your hard work.

  2. thank you so much. i found the area to fix the problem.

    i will work on the child theme. i do not want to lose all my work.

    again, thank you so much!

    1. Excellent. I hope you’ll visit here while working on your child theme. Every post on this site for the time being focuses on various customizations for a child theme. This is the first time I’ve ever made one, so everything I do I document here.

  3. Awesome hints, thank you.

    I’ve customised TwentyTen pretty heavilly and I just needed to perfect the spacing in the footer widget areas; I didn’t even need to think about it, just read your tutorial!

    Keep up the good work

  4. Thank you so much for this in-depth tutorial. I haven’t found anything like it yet and I have it bookmarked for future reference.

    Instead of doing child themes, I just copied Twenty Ten and renamed it. I modified the template using the specs you gave here and it worked perfectly for a website that I am building.

    Thank you again for this in-depth tutorial. It helped me so much.
    May you have much blogging success.

  5. Thanks for tut, but i ran into one problem.. i just wanted to remove search from No Text twenty ten and just to widener menu area (coz some items went into second row) so i added into child only:

    #access .menu-header,
    div.menu {
    width: 950px;
    }

    and it was wider then before, but then a switched my menu on it it was double row again, when i choosed empty as my menu (had correct order numbers) and just left it as is it became onerow wide again. What can be wrong?

    Thanks

  6. How wide did you make your overall theme? How wide is #access? Way up in the structure area, that width needs to match #access down in the menu area. and then I make the #acess .menuheader, div.menu about 12px smaller than what I set the above 2 widths at

    1. My whole css:

      /*
      Theme Name: Me
      Author: Me
      Template: twentyeleven
      */

      @import url(“../twentyeleven/style.css”);

      #branding #searchform {
      display: none;
      }

      #access .menu-header,
      div.menu {
      width: 950px;
      }

      1. Oh, that’s a 2011 child theme! In your original comment you had said you were working with twentyten. Twentyeleven is going to be a bit different!
        http://vudu.me/oy
        http://vudu.me/p4
        YOu can see if anything in those links helps. I don’t even think 2011 has a .menu-header within #access.

        2011 has a responsive structure, meaning it can resize with the browser. So we can’t always guarantee your menu will be 1 line. We can make it 1 line at full width, but people with smaller monitors will still have the menu wrap.

        1. Let me try it in the evening. Thank you.
          If small monitor it is ok, but i have 1280 and have big spaces on the sides, so i imagine i can have 1line at full width.

          1. OK cool, I was just making sure you understoof how the menu was going to change based on viewport size.
            Anyway, this bit of css you have

            #access .menu-header,
            div.menu {
            width: 950px;
            }
            

            Isn’t going to work. That is for a 2010 child theme, you have a 2011 child theme. The width of the theme is determined here:

            #page {
            	margin: 2em auto;
            	max-width: 1000px;
            }
            

            so your theme is 1000px wide. Way down in the menu section of 2011 style.css, we can see #access gets 100% width. So the menu is as wide as it can be. The only options to make it wider, are to change the 1000px max-width assigned to #page, which makes the whole theme wider (as described in those 2 links I just gave), or you can possibly mess with the margins in the Structure area by altering

            #access div {
            	margin: 0 7.6%;
            }
            

            the 7.6% is the left and right margins. Reducing them may allow your menu to stay at one line. Depending on how many menu items you have.
            As I’m sure you are aware, I’m referencing original 2011 style.css here, you would copy any rules you want to edit to your child theme, and make your changes there.

  7. hi rev…. great post!
    question about widths….

    my changes look great on larger monitors but on smaller monitors i get a bottom bar and have to scroll left/right. im noticing the same thing on your page at the moment as view your site on a smaller monitor with different resolution settings.

    im researching how to use % to fix this. what tweaks to what youve already shown above do you recommend to allow the screen to adapt to various screen sizes and resolutions, so everything is contained nice and neatly?

    thanks
    courtney brazley

        1. I’ll check this out at home (I don’t have firefox at work) as soon as I remember…. (I get so hung up on homework at home, I forget to do anything else)

  8. Thanks a lot mate :) I never had a clue about how to create and edit child themes, and was always at loss for themes that could fit a 728×90 ad unit. With this post, I can edit my theme to fulfill my requirements :)

    1. What text specifically, and exactly what won’t align? Like main text right margin? Sidebar left margin? You can use firebug on firefox, or chrome and IE have built in dev tools to investigate your css and help you find what remaining values you might need to adjust. Of course, I’m happy to try and help if I know exactly what it is that you require.

Leave a Reply