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.
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.
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.
Under the Options tab, expand Column 1 then set your desired Column 1 Width. In my case I’m using 650.
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.
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.
Take a minute to check out your site. We are getting closer to our target site.