Build Your Own Business Website header image

How to upgrade from Thesis 1.x to Thesis 2 Using the Thesis Classic Skin – Part 16 – Create a Custom No Sidebars 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.

Now that we’re actually looking at this page, I think we’re going to go work on that custom template in our upgrade Thesis 2 site. Let’s come over to our templates for a moment, we’re going to come over to our landing page template which is essentially a no sidebars template.

Upgrading Templates

This never even got upgraded to the new system so we got a lot of work to do. We’ll shift Header Area Page into Header, we’ll shift Footer Area Page into Footer Area, we will drag Header Area into Body, Content Area into Body and Footer Area into Body. Drag that down now, Header Area goes up, shift Nav Menu into the Header Area Page then shift Header into Header Area Page.

Our Footer goes into Footer Area Page then Container goes to our Content Area then inside of Footer Area Page we’ve got our Footer Widget 4, Footer Widget 3, Footer Widget 2, Footer Widget 1 then drag Footer Widget Columns into there.

We need to drag our Header Widget into the Header then drag it down then we need to drag our Footer Widget, that’s going to drag them into the Columns for the moment then open them up and 1 will go into 1, 2 goes into 2, 3 goes into 3 and 4 goes into 4.

Assign Headline Area to a Landing Page

I think the one thing that’s not right about this single post box, I want that Headline Area and I want the Headline in the Headline Area just like the regular pages are. Let’s save that template, come back over here and edit this page, assign it to landing page template and view the page. Okay, that is a little closer. Now, all of these things are distorted because we have some additional CSS that we need to add.

One of the things that I really like to do is, I hate the name of this landing page so I’m going to create a new template called No Sidebars then I’m going to copy from the landing page and I’m free to use landing page as a landing page, I’m free to make whatever changes I want to landing page and still have a no sidebars template. Instead of landing page, now we pick no sidebars, hit update, view it.

Let’s see, what was that supposed to look like? This is the WordPress style, okay. This one wants that landing page also or the no sidebars template. I obviously have some HTML in here that still isn’t added so if we inspect the element, I’ve got content rows, left columns and right columns and that kind of stuff. So let’s come back over to my CSS file and see if we can find that. It’s this here, content-row, column-wrap, etc.

We’re going to copy that, come back over to our skin editor, custom CSS and we’ll paste it, save it then take a look at it now. Perfect, okay, that one’s looking right. Now we have the same kind of thing happening with the eStore products and eStore selectors, this is a set that are going to have to change because you can see, I’ve got custom in front of all of them but I may as well grab all of these.

Set Up Thumbnail Images

Come down here to the bottom, paste those. Scroll up here and find the place where it says .custom and delete it. Save that CSS, I betcha this looks entirely different now. Not quite, we still haven’t fixed those thumbnail images yet, that’s something else I’m going to have to take a look at. These thumbnail images should have shown up as large, “eStore-thumbnail”, “thumb-image” and their height should have been 193. Here we go, that’s what they’re suppose to look like.

0 Comments… add one
0 comments… add one

Leave a Comment