Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 29: Setting Site Width Using Thesis 2

Thesis 2 Site Width

Using a browser plug-in, I’m able to measure the width of our site.  Thesis 2 and WordPress defaults to a site width of 900.  Most modern computers are using widescreen displays and even the older 17″ portrait monitors are likely 1024 pixels wide.  So in this step we are going to change the width of our site.  In Step 19 we learned that WordPress is displaying our site in a 2-column layout.  This means we need to change the width of both columns to add up to our desired width.  Let’s get started.

We need to change 3 CSS elements to set our desired column and site width.  I have chosen a site width of 980px (pixels).

From the Thesis 2 CSS page, click on the “Container” package.

Thesis 2 Container CSS Package

Inside the “Options” tab, change the “Width” to “980” (or your desired width).  If you enter just a number, Thesis will assume you mean pixels.  If you want to use other sizing elements you will need to enter them differently.  Don’t forget to click the green “Save” button.

Thesis 2 Container Width

Next, we need to change the widths of our 2 columns to add up to 980.  I like to use 650px for column 1 (the main content column) and 330px for the sidebar (column 2).  330px leaves room for adding advertising or other larger items in the future should you need them.

Now click on the “Columns” CSS Package.

Thesis 2 Columns CSS

Under the Options tab, expand Column 1 then set your desired Column 1 Width.  In my case I’m using 650.

Thesis 2 Column 1 CSS

Now scroll down, still inside the Options tab of the Columns package, and expand Column 2.  Column 1 and 2 widths will add up to your total desired width as set above in the Containers package.  In my case, 980 – 650 = 330.  Now click the green “Save” button.  Next click the green “Save CSS” button.

Thesis 2 Column 2 CSS

Go to your home page and click refresh. You will see that your site width has been changed to your desired total width.  In this example, 980px.

Thesis 2 Container Width Change

Take a minute to check out your site.  We are getting closer to our target site.

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 5 comments… add one }
  • Danika April 8, 2013, 2:47 AM

    Hey there,

    How do you get the footer color to expand the full width of your screen, but keep everything else as is?

    Thanks,

  • Doug Macklem April 11, 2013, 9:03 PM

    The only way I have tried so far is, in the HTML tab of the Skin Editor, to pull the Footer box outside of the Container but inside the Body. Move the Footer to the bottom to below the Containter. I think it will auto size to the width of the browser. You can do the same with your Header to give the full-width appearance. I have toyed with this look for my site but haven’t been pleased with it so far so I’ve stuck with the typical partial width look.

  • Lex January 5, 2015, 1:10 PM

    Hi! Im trying to put in a subscription bar like the orange one in this site, right under the header pic. Im also using thesis 2.0… any guidance you can offer? Can you point me in the right direction?

    http://einserkandidat.de/

    Thank you for your consideration.

    Lex

  • HatWired October 26, 2015, 2:27 AM

    Hello please help me i cannot seem to adjust my container and sidebar width. I have successfully resized my total width from 1250 to 1055 but it leaves a space on my left sidebar my theme is a 3 column theme.

  • Doug Macklem November 8, 2015, 4:56 PM

    I visited your site but only see 2 columns. Did you change it?

Leave a Comment