Build Your Own Business Website header image

Create a Full Width Header Using BYOB Thesis Plugins

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.

Part 1 Installing the Plugins

This is part 1 of 6 in a series on Creating a Full Width Header Using BYOB Thesis Plugins. In this session we show how to install three plugins: BYOB Thesis Header Widgets, BYOB Thesis Nav Menu, BYOB Thesis Full Width Backgrounds. We’ll be using them as we create a header with a logo and a navigation image layout that uses image sprites.

Video Transcript

So this is what we’re going to produce. This is also a Thesis site. This is the site I threw up this morning for this demonstration and we’re going to produce a you know, a header with a logo image and with a navigation menu. I happen to prefer to use real text in a navigation menu rather than straight images that they have. But this nevertheless, relies on a sprite in the same way that theirs does. So this is actually one big image and each one of these menu items is displaying that one big image, depending upon what its condition is. And I’m showing 3 conditions, the gray condition is the standard link condition. The bright condition is the current condition and the washed out color is the hover condition. So I’m going to show you how to use my plugins and some custom CSS to create a header logo and navigation menu layout like this. You could just as easily choose not to use text if that was you know, what your preference was. But I think that actually using real text in a navigation menu is probably better than using straight images. And these could have, in fact, done that had they wanted to. They could have used, for example, learn hello, head, something you know, something and read. Those could have all been live text. Or actually, the whole set of text could have been live with only the image being this little part and the underline had they wanted to go to that effort. But nevertheless, that would be my preference rather than having straight images.

So I’m going to go ahead and mute your microphone and dive into it. And then if you have questions, go ahead and raise your hand and then I’ll chime in here as we go along and let you ask questions too.

So the first thing we’re going to start off with then is this site. So here’s the site as it is, sort of in its default condition. This is plain, old, ordinary default installation of WordPress where I created these 4 pages: beginner tutorials, intermediate tutorials, advanced tutorials, and rocket science. And I’m going to turn that into this and in fact, so that you can see, we’ll go ahead and lose our… because I… now, we’re going to turn this into what I just threw away.

Okay so we come back over to the site and the first thing to do is to load some plugins. So I’m going to add new plugins and I’m going to upload. Now, we’re going to use the Thesis Nav Menu plugins and the BYOB Thesis nav menu plugin, the BYOB Thesis Header Widgets plugin and the BYOB Thesis Full Width Backgrounds plugin. We’ll grab Full Width Backgrounds first, activate it. All these plugins can be found on the website. And then Add New and upload and we’re talking about the Header Widgets plugin.

0 Comments… add one
0 comments… add one