Deep in the Code

UPDATE: If you are using Thesis 2.4 or newer, you will also need the information in the updated post. Read both posts before making any changes!

Given that most monitors today are not 17″ CRTs, I decided to change the default width for the content column on this blog such that more of the screen is used. I didn’t want to affect the width of the sidebar.

I am using the Social Triggers Skin on the Thesis 2 Theme; YMMV. The blog content width is changed in the Skin CSS under “.landing .container”, the right-hand sidebar is (predictably) in “.sidebar” and both inherit from the block “.container”.

To change the Skin CSS, go to the WordPress admin dashboard, and navigate to Thesis –> Skin Content –> click the Skin drop-down button and select Editor. On the resulting page, click the Home button and select Page. Now click the CSS button at the top of the page. This will display the CSS template for the Skin.

The CSS that must be changed is near the top of the template:

.container {
	width: $w_total;
	margin: 0 auto;
}
.landing .container {
	width: $w_content;
}

If you’re new to Thesis, you may find these values strange; they are variables. On the right-hand side of the page, you will see a list of all the variables that can be used here, with the option to create more.

The default values that I was concerned with are as follows:

$w_total: 897px
$w_content: 585px
$w_sidebar: 312px

Since I did not want to change the width of the sidebar, I did not show the CSS code here where that last variable is used; I do not need to change this one, but I do need to know its name.

I wanted to make the default values in CSS be the minimum widths allowed, but otherwise to allow the content column to fill much of the screen. By clicking on the variables in the right-hand pane, dialog boxes for changing the values appear. I changed the existing variables and added new ones like so:

Existing:
$w_total: 80%
$w_content: calc(100% – $w_sidebar)

(Notice the use of the calc() CSS native method in the $w_content value!)

New:
$w_total_min: 897px
$w_content_min: 585px

After changing the value in the dialog box, click Save to save the new value. The CSS template now must be modified. The changed CSS is:

.container {
	width: $w_total;
	min-width: $w_total_min;
	margin: 0 auto;
}
.landing .container {
	width: $w_content;
	min-width: $w_content_min;
}

Nota bene: If you also want to change the width of the sidebar, just change the $w_sidebar variable value. It can be a static number, or a percent value. If the sidebar is set to a percent value, I recommend adding a min-width value for the “.sidebar” class in the CSS template as well.

Be sure to click the Save CSS button on the Skin CSS page once you are finished.

Now, the content and sidebar columns together take up 80% of the width of the window, but if the window is shrunk, the content column will not get smaller than its original default size!