Build Your Own Business Website header image

One Hour Website Makeover DJ Sean Denard Part 6 – Configuring the Header

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - , ,

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.

This is Part 6 of the One Hour Website Makeover for DJ Sean Denard’s site and in this session we show how to configure the header using the BYOB Thesis Header Widgets plugin.

Video Transcript

So now we’re going to start by configuring the header and so that’s next. Now, the header’s kind of complicated. In particular, this header is complicated because it has a flash object in it rather than just an HTML image. And not only does it have a flash image but that flash image doesn’t actually go to the bottom in the circle because I wanted these things to come up. And because I inserted this flash image inside of a text widget, these will not go any higher than the bottom of that flash image. So this actually has the Sean Denard in the circle. That’s actually a background image for the entire header area and that used positioning to get it so that it lined up perfectly with the flash. Now we’re not going to do that this morning because I think that’s just a tad more complicated than we need to at the moment, to introduce this plugin.

So I’m going to start off by configuring this text here, DJ Entertainment serving the Seattle area. In fact, I think… rather than just typing it, I’m just going to copy it. And okay, what I did was it pasted it into Notepad so that it loses all of its formatting then I’ll paste it again. Now we’ll come over to… let’s see, widgets right there and we’re looking at our header row 1, widget 1 column and we’re going to take a text widget, put it there and then we’re going to take a piece of text and paste it. DJ Entertainment serving the Seattle area and hit save, close, refresh this view and there it is up there. We’ve got our text sitting up there now.

And in fact, I think we’ll go ahead and we’ll put a logo in here too and then we’ll put text in both these boxes and then we’ll go through the process of configuring those. So the next thing I want to do is we’re going to come back to the header layout. A feature of this header layout is that it allows you to use the Thesis default header for things and it allows you to place the Nav menu in the header and it allows you to place the search form in the header. Now what we’re going to do here is, at the moment, we’re going to say let’s retain the default Thesis header functions somewhere within the header. And actually, we’re going to do it here, somewhere within the header. And then when we do that, it says okay, select the row that will contain it and we’re going to put it in row number 2. We have to hit save again so that it can give me the rest of the options. And then one last time, select the widget column that will contain the default header and since row 2 only has one column that we pick the one and hit save again.

Now, this will have meant that we lost the widget area, right? If we come back over and look at our widget areas and refresh this, now we’re going to see there is no header row 2 widget area. We’ve got our header row 1 and header row 3 but we are no longer… the header row 2 is no longer widgetized. Header row 2 now has the default Thesis behavior in it which has the name of the blog or the name of the site and the tagline.

Now what we’ll do with this is we’ll place the header image here instead of this. So if we come back over here to Thesis Options, let’s see. Yeah, let’s just go to the Thesis Options and then header image. We’re going to use this to upload. Choose our file, websites, Thesis toolbox, header horizontal widgets, WordPress, content, themes, thesis_182, custom images. And which one is it? It is the header no flash png, that’s what it is, I believe. No, it’s not that one. It’s this one here. Yeah, that’s the one. Upload, okay there we go.

So if we come back over and look at our site now, there is the header part of the site and you can see, I’m missing the circle here, right? And I’m missing a circle because that becomes a background image of this next widget area and so that’s where we’re going to go next. Header image and widgets and then header row 3 widget column 1, we’re going to add text. And let’s see, the text that we’re putting there is this phone number. So put that phone number there and hit save and close. And header row 3, this is going to be text and in this case, we are putting in check my availability. Okay, I need to hit save on those things. That’s save and save. And if we refresh this… oh, I need to specify a height for mine because it’s hidden down here below this stuff.

So we will specify a height for the full width backgrounds. I think for the time being, I think what we’re going to say is the height of the header area background should be… let’s call it 300 pixels for the moment. That should save my bacon here on this, almost saves my bacon. I must need to refresh the settings for my header layout. Okay, header layout, save it, refresh it. Isn’t that funny? Something is being hidden, apparently. So let’s specify a height for this. That might be what I need to do. Actually, let’s just make sure I don’t actually have a real flaw here. Row 2 widgets, header row 3. Row 3 widgets, okay. I do have… those are my two widget areas and the widget areas, I do have text in them. I do. So it’s just the text is not showing up and it must be because it’s hidden behind something. Okay, let’s see, header row 2, header row 3, header area. It goes down to the bottom page. Oh, that’s what it is. The page needs to… the page is actually… needs to go down further so that the rest of the stuff shows up because everything that’s not inside the page isn’t showing up.

Okay so let’s specify some heights. I think if we specify heights, we’re going to be fine. So header widgets, if we specify the height of our row 2, header row 2, height and margins. Header row 2 is 160 pixels. That’s how big that image is. And then I think header row 1, we’re going to call it 40 pixels and then in header row 3, we’re going to call that one 40 pixels as well. So let’s go ahead and hit save.

Okay let’s see what happens if I eliminate that, clear out that header image. Let’s see what happens. Yeah okay, so they’re sitting down there now and something is preventing them from displaying properly with the header image. So what I’m going to do instead, for the time being, is I’m going to put that in a text widget just like I’m doing here. So we’ll go back to our header layout and we’re going to turn off the Thesis default behavior. We’re probably going to have to shuffle a widget content around a little bit because we now added that and this is now the phone number, right? So we’re going to drag this one down to where it belongs, this one here, add a new one. We’ll put some placeholder text there for a moment. Hit save and then I’m going to go to a sandbox page and put it in using the text widget.

So if we go down up to pages and do I have a sandbox? Yes, I do have a sandbox. Edit and we’re going to delete that one. But we will… let’s see, we’re going to add an image. Let’s see, select the file. Let’s grab that Sean DJ 4. Let’s see, we’re going to give it… we’re going to have it linked to the homepage. We’re going to center it in the space. We’re going to make it a full size and we’re going to give it a title, say “Go back to my homepage.” We’re going to insert that into the post. And what that really means is that we’ll just give ourselves a link here that we can then place inside this text widget, header row 2 text. Place that in the text widget. Hit save and refresh this.

Okay so there’s the beginning of our logo.

0 Comments… add one
0 comments… add one

Leave a Comment