How I wrangled Thesis for WordPress in 5 minutes and got a static CSS layout

This brief tutorial will show you how to customize your Thesis theme, changing it from an em based layout (flexible) to a pixel based one (fixed).

If you look at 100 Web sites built with the Thesis theme and WordPress, I would estimate that 98 of them are using the em based layout (the default). That is, the layout is flexible, not pixel based and fixed. I like flexible layouts, whether they’re em or percentage based, but sometimes that’s not the most appropriate design solution for a given project.

It’s pretty easy to build a fixed width Thesis site if you know what CSS rules to change in your custom.css file. There are four steps to change your layout from flexible to fixed:

  1. Set up your column layout in Thesis > Design Options
  2. Copy the “core layout elements” from the layout.css file
  3. Paste the core layout elements into custom.css, adding “.custom” before each rule
  4. Change appropriate em based definitions to px

Those are the basic steps we’re going to take. Let’s get into the details.

Column layout in Thesis

column preferences for billweye.com

The first thing you’ll need to do is set up your layout preferences in Thesis > Design Options.

First, here’s my obligatory rant about how these preferences are labeled. As of Thesis 1.7, the labels for column widths in the preferences are defined as “pixels”. In fact, you are not entering the pixel width you want, but rather a number that’s then translated into ems using a formula. I’m not going to go on any further, except to say that I explain this problem with more detail in my tutorial, creating a flexible header in Thesis.

Back from my rant … define the column order and widths you want. At this point, the column widths aren’t too important, but you might as well give them the pixel widths you want. The number of columns and the order you want is very important. Define these preferences and save your work.

Copying the “core layout elements”

Now you need to copy the CSS rules that define the layout of your site. There are any number of ways to get these CSS rules; I’ll briefly show you one tool that I use, Web Developer add-on for Firefox. Using that tool you can easily open up all the CSS files. Look under layout.css and find the core layout elements section, then copy all the rules under that block. These are the layout rules for this site in that block (don’t copy these! yours may differ):

 

/*---:[ core layout elements ]:---*/
#container { width: 87.1em; margin: 0 auto; }
#page { padding: 1em; }
#header, #footer
       { padding-right: 1em; padding-left: 1em; }
#content_box { width: 100%; }
   .no_sidebars { background: none !important; }
#content { width: 58.1em; float: left; }
    .no_sidebars #content { width: 100%; }
    .post_box, .teasers_box, .full_width #content_box .page
           { margin: 0 2.1em 0 1em; }
    .full_width #content_box .page { width: auto; }
    .no_sidebars .post_box { margin: 0 1em; }
    .teasers_box { width: 55em; }
       .teaser { width: 26.5em; }
#archive_info, .prev_next
     { padding-right: 2.1em; padding-left: 1em; }
#sidebars { width: 27em; border: 0; float: right; }
    .sidebar { width: 100%; }
#sidebar_1 { border: 0; }
    .sidebar ul.sidebar_list
        { padding-right: 1em; padding-left: 1em; }

 

[Beware that the formating of the CSS code on this page will look different from what you’ll find in the layout.css file. It’s just the word wrapping that’s different, otherwise the code is correct.]

Did you find your CSS code? Great, copy it and we’re onto the next step.

Paste core layout elements into custom.css

Now that you’ve copied the core layout elements, we’re going to paste those into custom.css and add “.custom” before every rule, like this:

 

/*---:[ core layout elements ]:---*/
.custom #container { width: 87.1em; margin: 0 auto; }
.custom #page { padding: 1em; }
.custom #header,.custom  #footer
       { padding-right: 1em; padding-left: 1em; }
.custom #content_box { width: 100%; }
   .custom .no_sidebars { background: none !important; }
.custom #content { width: 58.1em; float: left; }
    .custom .no_sidebars #content { width: 100%; }
    .custom .post_box, .custom .teasers_box,
    .custom .full_width #content_box .page
           { margin: 0 2.1em 0 1em; }
    .custom .full_width #content_box .page { width: auto; }
    .custom .no_sidebars .post_box { margin: 0 1em; }
    .custom .teasers_box { width: 55em; }
       .custom .teaser { width: 26.5em; }
.custom #archive_info,.custom  .prev_next
     { padding-right: 2.1em; padding-left: 1em; }
.custom #sidebars { width: 27em; border: 0; float: right; }
    .custom .sidebar { width: 100%; }
.custom #sidebar_1 { border: 0; }
    .custom .sidebar ul.sidebar_list
        { padding-right: 1em; padding-left: 1em; }

 

Pretty simple. Now we move onto the heavy lifting in creating a fixed width layout.

Making changes to em based definitions

We’ve pasted our code into custom.css, added “.custom” to all the rules, and now we need to change most of the “em” definitions to pixel definitions. A couple of notes here: 1) I’m using this site as an example, so what you’ll need to change will differ; and 2) always test your site on multiple browsers and operating systems.

Let me show you the changes I made to the above code for this site, then I’ll explain those changes to you. Here are the fixed width CSS rules for this site:

 

/*---:[ core layout elements ]:---*/
.custom #container { width: 930px; margin: 0 auto; }
.custom #page { padding: 10px 0; }
.custom #header,.custom  #footer
       { padding-right: 0; padding-left: 0; }
.custom #content_box { width: 100%; }
   .custom .no_sidebars { background: none !important; }
.custom #content { width: 550px; float: left; }
    .custom .no_sidebars #content { width: 100%; }
    .custom .post_box, .custom .teasers_box,
    .custom .full_width #content_box .page
           { margin: 0 10px 0 0; }
    .custom .full_width #content_box .page { width: auto; }
    .custom .no_sidebars .post_box { margin: 0 1em; }
    .custom .teasers_box { width: 545px; }
       .custom .teaser { width: 270px; }
.custom #archive_info,.custom  .prev_next
     { padding-right: 2.1em; padding-left: 1em; }
.custom #sidebars { width: 360px; border: 0; float: right; }
    .custom .sidebar { width: 100%; }
.custom #sidebar_1
   { border: 0; background-color:#f5f5f5;
border: 1px solid #ddd; margin-top: 2em; }
    .custom .sidebar ul.sidebar_list
        { padding-right: 10px; padding-left: 10px; }

 

First, note that I didn’t change all of the rules (the rule changes are highlighted in red). For example, I didn’t change any of .no_sidebars rules — it wasn’t necessary because at this time I don’t have any such pages, but when and if I do, I can easily make those changes in my custom.css file. Also, there are some rules that weren’t necessary to change, but they were in the same block of code so for the sake of simplicity I grabbed it all.

The trickiest change to make is the first, the #container width. That number is the product of the addition of either 2 or 3 numbers (in this example 3 numbers are added). #container is the width of your page with all the content inside, so we’ll need to add the width of your main post section and the sidebars, plus (!) any additional margins we add. In this example I added

#content (550px) + #sidebars (360px) + ul.sidebar_list (20px) = #container (930px)

The last number I added, ul.sidebar_list, is the left and right margin of the sidebar list, which pulls it away from the background and border I styled.

I’m not going to cover all the changes I made above, but let me draw your attention to a few details. On the #content_box .page I needed to take out all the margin space except for the right margin, which gives me space next to the sidebar. For the .teasers_box, that should either be the same or a little less than the #content (mine is 5 pixels less, just in case); and the .teaser should be half or less than the .teasers_box.

Otherwise, the changes should be self explanatory. If you have any questions, please leave them in the comments and I’ll try my best to answer them.

I hope you found this tutorial useful. If you have any improvements to suggest, please leave them in the comments.

Photo by ctankcycles and republished here under a Creative Commons license.

10 thoughts on “How I wrangled Thesis for WordPress in 5 minutes and got a static CSS layout

  1. Can you give some reasons why a pixel-based layout would be more appropriate than an em-based layout please?

    1. There are quite a few reasons a fixed width layout (which can not be done when using ems for the layout, just to be clear), would be appropriate. But let me give you some of the top ones I’ve encountered.

      A client simply says “I want my site to look like that,” and points you towards a fixed layout. They might not know how to describe it, but if you come back with a variable width layout they’ll know. This is the number one reason I’ve encountered. And when money is on the line, you stop arguing and get paid.

      If there are a lot of images and videos on a site, for the sake of a standardization and a clean layout, using fixed column width is the way to go. For some, this doesn’t make a difference. Take this site: I want my full width images and videos to perfectly fill the main content area, right up to the left and right margins. That can’t consistently be done with em based layout. Well, you can use that em based image scaling, but I think it can make images look horrible.

      If you’re using em-based layout for accessibility reasons, I would say there’s less and less reason to do so. Most browsers when you increase the size of a page are now using a zoom method, that is they don’t simply scale the size of the text, but rather everything gets scaled. Likewise with accessibility, it’s easy for people to use their own override style sheets. So, fixed with layouts aren’t a huge problem when trying to create an accessible site.

      Lastly, just because. It’s another way to be creative, do something different. I like the clean lines of my site and the grid I’ve developed. That’s my preference … at least it is today. I can just as easily rip those custom css rules out and go back to a em-based layout.

      Thanks for your comment, Gary. I hope this helps.

  2. EMs and pixels are the same thing in Thesis as far as layouts go. The math is very simple and all you need to do is review how the CSS is generated to get to the bottom of it.

    Thesis turns the default font size to 10px in all modern browsers (including IE) so that amounts to 10px = 1em, 15px = 1.5em etc.

    The only people that are going to notice a difference are those that change their browsers default font size. Now if they do that on a EM based design everything will look more or less perfect since the design scales based on the default browser font size.

    Let’s say we have a box with a fixed height and width and we have some text in it. We’ve now matched the box size perfectly to the text. Now along comes a person with a custom browser font size, let’s say he uses 30px so its easier to read. With a EM based design the box would scale up with the text and everything would still look good. With a pixel based design the text would increase but the box wouldn’t. Now the design still looks the same but the text breaks out of the box and doesn’t look good anymore.

    The above is just a simple example.

    The pixels to EM conversion IS an exact science. You just need to do the math properly. Since Thesis already does most of the work for us all one needs is a basic understand of math and a calculator and you’ll be rocking EM layouts like pancakes. :)

    If you prefer pixels that’s fine, many do – but EMs aren’t a problem if used properly and they do render consistently.

  3. Danny, thanks for getting into the details of em-based design and explaining it in more depth than I did.

    I understand your explanation perfectly, and I actually agree ems should be preferred, but … designers can’t count on people keeping their default font sizes in browsers. I don’t believe that’s reasonable.

    Then when someone doesn’t have those default font sizes, it all goes down hill from there.

  4. That’s true, we can’t count on people keeping default font sizes. However many pixel based designs wont look very good with custom browser font sizes either.

    Neither solution is perfect (we’ve used both in projects and continue to based on client requests).

    P.S.: Personally, I prefer pixels!

  5. Oh my word. I think I might cry. You have answered a question that has been the bane of my life for months! You. Are. The. Man.

  6. Pingback: Convert px to em
  7. Nice blog bill.

    Can you tell me if there is a quick way to reduce the padding area around the content box?

    thanks,

    Simon

Leave a Reply