Build Your Own Business Website header image

How to Create a Full Width Skin in Thesis 2.0 – Part 3 – Create the Styles for the Full Width Page Template

Difficulty Level -

Filed Under Topics -

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.

Once the HTML elements are created and arranged we move on to creating and configuring the Thesis 2.0 CSS Packages. We look at how the packages are linked to the boxes that they style and discuss the use and configuration of the Columns package.

Now we come over to our CSS section and the CSS section has a whole bunch of packages that are already part of this Thesis classic skin in Thesis 2. And these packages are essentially little groups of CSS information that apply to the boxes.

Create a Single Element Package

If we want these to line up in the middle, what we need to do is create a package for our page and give it a size and tell its width to be auto. So we’re going to create a package called single element style. We’re going to give it a name of page width. We’re going to give it a reference of page_width. And we’re going to give it a CSS selector.

Now this CSS selector needs to match what we are styling. You may recall that header area.page, content area.page, and footer area.page, those all got the class page_wrapper. So here, the selector that will apply to them is .page_wrapper. That’s the correct selector to affect that element. If you’re getting lost here, don’t worry about it because we’re going to come back and actually explain all that in here in just a minute.

Set the Options

Inside of that page, we’re going to give it a width. And so I’m going to say it’s 959 pixels wide and I’m going to make the left and right margins auto. This is a tool that is used in CSS to center something. So what we’ve done is we’ve taken the page, we’ve said it’s going to be 959 pixels wide. And then we’ve said the left and right margins are auto and that will center the page in the browser window.

Add the Package Reference to CSS List

Let’s hit save and come over and take a look at our canvass, nothing has changed. And the reason is that we have to add the reference of this package to the skin CSS list. And remember that I said the reference was page_width. I’m just going to copy that and put an ampersand and then the reference name.

Now you can see the canvass brings everything into the center. We actually have a page that sits in the middle. This page is now 960 pixels wide and it has an even margin on either side.

Define Column Width in a Columns Package

You’ll see that we still don’t have our 2 columns so the next thing we want to do is define the columns for our box that we called 2 columns. Remember this box here in the content area, we called it 2 columns? Well, this box needs some CSS to go along with it. And if you recall, I gave it the class columns_32, right? So that’s the class we’re going to use on our CSS.

Create a Columns Package

We’re going to create a new package but this time, we are creating a columns package, not a single element package like we did before. Add our package. We’re going to call it 2 columns and place that same columns_32 as our reference and then we’re going to say columns_32 is our class. So this class selector, this CSS selector has to match that class name that we added to that box.

Then we come over to our options and set the options for that column. You can select up to 4 columns. We’re selecting 2. And then in our first column is going to be 600 pixels wide and we’re going to make it float left and we’re going to give the left padding, 15 pixels. And we’re going to give the right padding 11 pixels.

And then column 2, that width is going to be 300 pixels. We’re going to float it to the right. The column 2 padding, the right padding is going to be 22 pixels and the left padding will be 11. So what this is going to do is it’s going to put both columns side by side.

The left column is going to have 11 pixels of right padding between it and the right column. The right column will have 11 pixels between it and the left column. That’s providing us with 22 pixels in between the 2 columns. That’s what’s happening here.

Let’s hit save to this, come over and take a look at our canvass. I didn’t change it because we haven’t put the reference in the reference list yet. So now, we put the reference in. Now, we have our 2 column layout. We have the one 600 pixel wide column and the other 300 pixel wide column. And we’ve got the padding and margin and so on inside. Now we have that basic 2 column layout.

Review the Changes

Let’s save and compile. And then come back over and refresh this and it’s now changed. If we go to our front page, it’s also changed because the front page is a child of our main page. But if we go to our blog, it’s still a 3 column layout. And if we go to a single post, it’s still a 3 column layout and the reason is that we haven’t changed those templates yet.

Variables

Keith asks whether or not those padding numbers could be variables. And while I’m not really going to talk about variables in this session, yes that’s what these are actually. If you see this single right here, we’ll just open up that single variable. They’ve put the value of 22 pixels as that single variable. So instead of saying 22 pixels, we could say single there and we’ll do that just so that you can see what I’m talking about.

Come back over to our 2 columns and look at column 2 and column 2 padding. And instead of 22, we could say $ and then the variable name which is single. And in fact, the other thing they have is one that is half which is 11 pixels so we could say $half. If you use that instead of the number, when you wanted to change everything to add more padding, you would only have to change the variable.

So that’s the power of these variables. But we’re not really going to talk about that yet because that’s an extra level of complexity for new folks.

Do Changes You Make to 1 Template Affect Others?

Steve asks whether or not if you make this customization to the homepage, will it affect absolutely everything? And the answer to that question is no, it will not. Home does not stand in for index. You’re kind of thinking about index… as home as being index and so if you set up index.php or if you set up the index template, it’s going to apply to everything unless something more specific comes along.

Thesis is never going to apply a home style template to everything if you don’t have other definitions.

Jim asks, “Do you need to save and recompile?” We don’t actually need to save and recompile in order to see it on our canvass. But if you wanted those changes to be applied actually yes, you would have to save and compile.

Are the Boxes and Packages Available for Multiple Pages?

Malcolm asks whether or not these packages or boxes will be available to other pages and the answer is yes, they’re available skin-wide. So when you create a box, it’s there in the skin. Keep in mind that any individual box can only be used one time on a page. So you couldn’t, for example, take header area and put it on there 3 times. It could only go on there once.

Having said that, if you create a header area for the front, it’s going to be always be there for every other template and it can be used.

How Many Templates Can You Create?

Ken, yes. You must have missed that part of the conversation. But in fact, that is the really compelling thing about Thesis 2 is that there are really unlimited numbers of templates that you can create. You can create templates for absolutely everything. Thesis does come with these core templates made. And that’s really what we’re talking about today is how to create a template.

First, how to change the page templates so that it’s this full width framework. We’re going to move this style over to a single template and then we’re going to create a custom front page template that’s different than this. So we’ll be doing all those things in this class.

Mike asks whether or not uploaded boxes and packages will be available skin wide. And yes, absolutely. Once you’ve uploaded a box or a package, you can use it anywhere on a skin and you often can create additional instances of it. And we’re going to see that soon.

0 Comments… add one
0 comments… add one

Leave a Comment