Build Your Own Business Website header image

Thesis 2.0 Launch Party Part 9 – Add a Feature Box

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

Add a Recent Posts Widget

We’re going to drag a couple of widgets in now. We’ll go over to Appearance and Widgets and I’ve created a couple of widgets here for that. In footer, I think I’m just going to add a pages widget and in Footer 2, I’m going to add a Recent Posts widget. We’ve got a bit of extra padding in this thing and I didn’t really fully appreciate the fact that my color was going to be the same width as the things I set up here so you’re just going to have to bear with that, unfortunately because that’s not very good.

What is pushing the text widget away? Let’s make that float left, I think that’s what’s going on here, 2 Columns, 32, Column 2, float left. What I really should have done was made all my things so that they fit nicely inside the green space instead of where they sit right now but we’re going to do one more thing and that is add a feature box to this page and we’re going that from here. Go to HTML, we’re going to pretend we’re not doing this in our front page but obviously, we’re not actually doing it in our front page because the front page doesn’t work yet.

We go to our container, we’ll call it a Feature Box, we’ll add the feature box and give it a class of page_background because we’re going to use the same background colors in it. Then we’re going to create another box, Feature Box Columns, add the Feature Box Columns and each background is going to be that columns-32 because it’s going to be that same column configuration as the rest of the page so we don’t need to create new packages for it because the packages are already defined.

We do need to shift and drag that into the container, come down to our container and put it above the background, Feature Box Columns and put that in the Feature Box. We’re going to create a new container and call it Feature Box 1. We need to call it a c1, Feature Box 1 and Feature Box 2. We’re going to drag Feature Box 2 and Feature Box 1 and I think I forgot to give this one our column 2.

Create a Widget Area

We’re going to create a new widget area because we’re going to use the meteor slideshow and that’s got a widget we can drag into there so Feature Box Widget and we’re going to drag that into Feature Box 1. Feature Box 2 is going to have a text box in it and the box name is going to be Feature Box Text. I have a location and other information here that I want to copy from this and paste there. Close that, hit save template and we’ll come over to our widgets area and refresh our widgets area at which point, we’ll have our Feature Box Widgets.

This is the one, that was my mistake. Our location goes in here, come back over and refresh this. No, that was not I was looking for either, pardon me. Let’s try that again. Our location did go there, where was that meteor slideshow? I guess I never did do that, I thought I did, [meteor_slideshow], take a text widget and put it in there, hit save. There it is, you’re right, Meteor Slides Widget, I was just looking at the wrong spot. We’ll just save it like that, come back over, refresh the page and close this out.

Style the Feature Box

You know, I almost feel like that doesn’t need to be green. Let’s do that, we’re going to come back over to the HTML editor and under our Feature Box, we’re going to get rid of that class. We’ll call it Feature Box though, save it, come back over and refresh it. Then I can style this stuff the way we want, I had sufficient foresight, I would have made sure that my images fit in there nicely and we could style all this stuff as well but there you go.

If we come over to the main page, that’s how easy it is to make a fully customized site using Thesis 2.0. Someone has observed that I might have been able to do a couple of things a little faster had I just written a bit of code, that’s absolutely true. On the other hand, I didn’t need to write any code and I can easily style all the text in these things so that they are all different in each place just using those tools that you saw me show.

0 Comments… add one
0 comments… add one

Leave a Comment