Build Your Own Business Website header image

Upgrade a Thesis 1.8.5 Site to Thesis 2.1 Using the Classic Responsive Skin – Part 11 – Setup Custom Templates

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 we want to set up our Landing Page Template as a Custom Template for this upgrade from Thesis 1.8.5 to Thesis 2.1.

Landing Page Template

We do want to change our Landing Page template as well. The Landing Page template is going to need the whole header footer setup like the others. So, Footer Bottom, Footer Top, Footer Top Widget Area, shift+drag Footer Widget Area into Footer Top. Shift+drag Footer Bottom into Footer, Footer Top into Footer, Header Widget Area, we need the Nav Menu too.

I forgot that she left the Nav Menu out of this. We’re going to add the Nav Menu to this but it goes below that and then let’s go over to her hoop shop, edit the page and assign it the correct template. It’s going to have the Landing Page template.

Let’s make sure it looks good before we move on. Oh, isn’t that crazy? It’s made the Landing Page narrower, we don’t want that to be the case here. She does have a landing body class and so instead of that then why don’t we create a Custom template and we’re going to make it the same as the Front Page template.

Turn Landing Page Template into a Custom Template

So, we’ll create a new one and this will be just a No Sidebars Page, open that up. We are going to assign the Front Page to it, save that template. Let’s go back over to the Landing Page template and let’s remove the Nav Menu. Because that was deliberate. Save that and come back over to the hoop shop and instead of Landing Page we’ll choose No Sidebars. There we go, that’s what we wanted it to look like. Just like that.

Adjust Widgets

We are just about there. We need to fix this little stay connected thing. So, we come back over to our widget section and we’ll just take a look at that widget. Stay connected, oh I see this is its own little widget and so we need to tell it to behave a little different here.

If we do widget .social-profiles image float left. Yeah, and then we want to clear those floats, we’re going to use a clearfix for that too. So widget .social-profiles. We’ll come back over to our Custom CSS, go down to the bottom .widget .social-profiles img float: left and then I am going to clear the floats by saying .widget .social-profiles:after. Then I’m going to add Chris’ $clearfix. I think it’s totally cool and that will clear those floats automatically and mean that it won’t cause havoc elsewhere. So, let’s copy this comment; Social Profiles Widget Styles, save the Custom CSS. Refresh this, dynomite. Now, what’s it look like over on hers? Yes, they just sit right together like that.

0 Comments… add one
0 comments… add one

Leave a Comment