Build Your Own Business Website header image

Creating a Full Width Header Using BYOB Thesis Plugins – Part 2 Configure the Header Widgets Plugin

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.

This is part 2 of 6 in a series on Creating a Full Width Header Using BYOB Thesis Plugins. In this session we show how to setup the BYOB Thesis Header Widgets Plugin and use it conjunction with the BYOB Thesis Full Width Backgrounds plugin to style the header, body and content area.

Video Transcript

Okay so the first thing we’re going to do is set up the header widget. So this header widget is going to have 2 widget areas or 2 areas. We’re going to hit save. I think the overall header height, we’re going to make it 220 pixels and we’re going to get rid of the default margins that come with… come automatically in the header and hit save. And then the left header area, we’re not going to use any Thesis defaults in it so it’s going to be widgetized. But in terms of its height and width, we’re going to make it 200 pixels tall and 200 pixels wide and we’re going to go with that for the moment. And the right header area, we are going to retain Thesis default header functions and we’re also going to place the Thesis nav menu in that and hit save. And then once I’ve done that, the menu settings gets added to this right header area and the place I want the header, the menu located is at the bottom of the header. Now, since we have the Thesis nav menu plugin also running here, it gives you this message, “The remaining settings for the Thesis nav menu are controlled by the BYOB Thesis Nav Menu Plugin.” So that’s where we’ll go and work on that.

But if we hit save again and we just refresh this, you’ll see we started moving stuff around here just a little bit. I want to get rid of this line. I want to get rid of the outline around the menu and I want to specify the height of this so that it floats in here beside this. So the first thing to do is to specify the right header area height and I’m just going to give that… 200 pixels tall. So now, it’s not going to try to go under the other one. That was what’s going on here because I hadn’t specified the height, the menu tried to slip under. But now that we’ve specified its height… oh, isn’t that funny? I used to have a little bit of stuff doing here. Oh, that’s right. We also need to work on the Thesis Design Options here for just a second. So in terms of Thesis Design Options, I need to make it big enough so I’m going to make it 2 columns, I’m going to make the content part 640 pixels, the sidebar 300 pixels and I’ll make that column order with the content on the left and the sidebar on the right. And in terms of the HTML framework, we’re going to pick the full width framework and we’re going to have 0 outer page padding. Hit save.

And then in terms of Site Options, let’s go look at the nav menu for a second. Okay, the feed link is not on, the home link is not on. I’ve picked the pages that I want, okay. And then I think… one last thing I forgot actually, was to get rid of the border in the nav menu. So I’m going to make the border 0 pixels here. Okay and now, let’s see what it looks like once I’ve gotten that far. Okay, that pops up. Actually, I still want to get rid of those lines. I forgot that too. So under Body and Content Area, I’m going to get rid of show interior layout and borders.

Okay and so now we have this thing shaken out a little bit better. And so the next thing I want to do then is… I would give this a little bit of margin so that this stands off of the header area. And then we’ll start doing the styling of this nav menu. So we come back over to our header widgets plugin and we get back over to the right header area margin. And let’s just give ourselves 20 pixels on the left and hit save. So that moves everything over.

0 Comments… add one
0 comments… add one

Leave a Comment