Build Your Own Business Website header image

How to Convert a Flash Site to WordPress & Thesis 2.1 – Part 7 – Rotating Header Banner with Meteor Slideshow

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.

The next thing we’re going to do in this Convert a Flash Site to Thesis 2.1 case study is set up this header here. But before we can do that we need to install a plugin and the plugin I’m going to install is the Meteor Slideshow plugin.

Setup Meteor Slideshow Plugin

So we’re going to say Add New and then Meteor Slides, activate the plugin and then we’re going to come over here to the Meteor Slides settings. I don’t remember off the top of my head what these image sizes are supposed to be so let’s take a look at them. The Top Banner Images are 670 by 136, so 136 by 670. And we have 11 slides.

I think for the purpose of this demonstration, I’m just going to put in 5. We’ll save those changes and then we’re going to come along here to slides, there we go. We’re going to add a new slide and we’ll call it “Bamboo” I guess, it doesn’t really matter what we call it because this doesn’t show up anywhere.

Actually, I’m also going to get rid of some of the Thesis options that don’t really apply to this like Title Tag, Meta Description, Meta Keywords, Meta Robots, Canonical URL, Custom Body Class, Custom “Read More” Text, 301 Redirect and Custom Template.

Set the Featured Image

We will set the featured image and upload. We’re going to Images for the gallery so Top Banner Images. I’m going to take one, two, three, four, five. Okay, so we’ve set that featured image and we’ll publish it and then we’ll add a new one. I’m just going to use the same name as it says so I’m going to say front2 that way I’m not reinventing any wheels. And set the featured image. This one is front3, front4 and front5.

Configure the Header Layout

We have 5 images set up in our slideshow so now we can come over here to the Thesis Skin Editor and start rethinking our header. In the first place the nav menu is going under the header, actually, let’s get to the right template. We’re looking first at the Front Page template and nav menu goes under the header.

We’re going to open up the header and we’ve already turned these two things off but we are going to create a new widgets box called Header Widget Area and we’re going to drag that into the header. Let’s save this template and then come back over to the page and drag the nav menu down.

Open that up, come back over and find our Header Widget Area, I don’t see it. That’s funny, I thought I called it, oh I did but Header Widget Area. We don’t care about the class, I filled out the class but it’s not a question of class. So come over and drop it into there and save our template.

Add Meteor Slides Widget

Now let’s come over to the widgets and we should have a Header Widget Area now showing up. The Meteor Slides Widget, there it is Meteor Slides, and we load our page and there it is, okay.

Add Custom CSS to Style Header Layout

Now that we’ve got our slideshow in here, we’re going to tackle the rest of our header layout including our menu. Let’s just look at what we’ve got here. The text should be bold and there’s no border. In order to remove all the borders from all of this we need to locate the code and they are actually around the a’s. This font style comes from menu a as well.

Let’s go over to Custom CSS and we’re actually just going to start the top of this page with the header area. This slideshow is supposed to be centered in the space. The padding above is a little bit too much and the padding below is way too much.

So let’s see what do I have, div id=”header”, “container” so we can get rid of the top padding for the body and we’ll start there. Then we’ll take our div id= “header” and I think text-align: center. It didn’t do it, did it?

Well if I made that 670 pixels, it’s not a good idea. Actually, we’re going to try that. We’re going to try to center this by taking that div class and moving it. So width 670px. Hmmm, something else is giving it its dimension so it’s getting that dimension. I suppose I could do the width of the header at 670 and give it margin 0 and auto and that’s going to work up to a point. Okay, so that’s what we’re going to do here.

Let’s just getting rid of this here. So body padding top and then #header width. Actually I’m going to say max-width and let’s see how that works. 670px; margin:0 auto; let’s see how that makes that header behave now.

Okay, that bopped up there. It’s now centered in the space available to it. We’ve got too much space here so header can have a bottom padding of 0 and that brings it down a bit. Then we’ll get rid of the border.

We’re getting closer. What’s the rest of that extra space for? Header widget, so actually the header could continue its bottom margin which would be fine. We’ll just get rid of the bottom margin of header widget instead but we still want to get rid of border bottom. So none and we’ll come down here to #header .widget margin-bottom.

Now that we have that part of the header done, we’re going to move on to customizing the menu style.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one