Build Your Own Business Website header image

Upgrade a Thesis 1.8.5 Site to Thesis 2.1 Using the Classic Responsive Skin – Part 3 – Setup Main Site Structure in Thesis 2.1 Classic Responsive

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Now that we’ve reviewed the current page structure of the Thesis 1.8.5 site we’re upgrading to 2.1 we can move on to setting up the main site structure.

Typical Page Structure and Style

This main site is 918 pixels wide. If we come over to the regular page we’ve got a sidebar and a content area which has a special font size. The typical font size is I believe 15 pixels or 1.5 em. The typical column size is 640 pixels and the sidebar size is 242 pixels.

How to Calculate the Column Widths

If you watched the launch party videos you’d recognize that Thesis 2.1 Classic Responsive calculates its page width based on calculation of padding that is based on the font size. So, in order for us to get to this 918 pixel wide content area we have to do a little bit of math to be able to set this at 640 pixels and this at whatever is left over for it to equal 918 pixels.

To start we’re going to go over to my resources and and open up that Thesis 2.1 padding cheat sheet. This will help us to the calculations. We’re going to be using Arial 15px so the padding that’s being employed is 25 pixels.

We are going to have the 1900 and 18 pixel part of that is going to include two of these. That is 25px inside, well, essentially; 50px between the content and the actual sidebar. In order to get to 1900 and 18 pixels we have 640 pixels of content plus 50 px of padding. So, 918 px minus 690 px is 228 px. That’s going to be the width of our content column or our sidebar; 228px and 640px.

Let’s just come over here and dive right in to that. We’re going to start off in Design with Layout & Dimensions. It’s going to be 2 columns with the layout on the left, the Content Width is going to be 640 px, the Sidebar Width is going to be 228 px. Say okay to that. Font Size here is 15 pixels and Arial.

Let’s save this, refresh it and I think we’re going to find that our columns is 868px. But it looks like we need to add another 25 pixels to that in the sidebar so let’s just do that quickly. There is going to be a little bit of trial and error here because I didn’t calculated this in advance. So, another 25 px is 253 px let’s call that good and see how that works. 893px and 25, that’s it 918px.

Add Widgets to the Sidebar

Now that we’ve got our main column width set up let’s go over and add our widgets in the sidebar. Our sidebar is empty here right? but we’ve got this inactive sidebars and these are the ones that go in the inactive sidebar. So, in the news, pre-order your copy, stay connected. I think the book happens above stay connected on some pages we’ll take a look at that in a minute. But I think that’s good there, let’s refresh this and see.

In the news, pre-order your copy, the book and stay connected. We’ve got that in place and now the other thing that we’re going to do is get rid of the text box while we’re at this. So, we’ll come back over to the Thesis Skin Content and under content to display. We’re going to get rid of the WP admin link. We can turn off the Sidebar Text Box there so that doesn’t show up anymore. And that’s the main site structure set up.

0 Comments… add one
0 comments… add one

Leave a Comment