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.