Build Your Own Business Website header image

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.

Lesson 8 – Part 9 – Configure Header and Footer Backgrounds

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Styling a Full Width Framework Page

Let’s take that concept and work it into a styling on our page. If we come back over here to BYOB Thesis Plugins and go to our Full Width Backgrounds Plugin, the very first thing that we’re asked to do is, “Select the Background Areas to Customize”. We’re not going to customize the body but we are going to customize the Header area, the Content area and the Footer area.

Don’t let these little code-like things confuse you. There’s a pound sign(#) here and an underscore(_) here. That’s just what the HTML code actually looks like but that’s not really important to you, what’s important is the concept of Header area, Content area and Footer area. Those are the things that we’re going to be customizing.

If we hit “Save”, we get three new dialogs. We get our Header Area Background style, our Content Area Background style and our Footer Area Background style. You can also see Header Area page, Content Area page, Footer Area page, these are the things that we’ll be styling in order to get to where we want to go with this.

Specify Background Colors

We’re going to start off by simply specifying a background color for the Header area, let’s just pick green. Then we’re not going to do anything besides that, we’re going to come down here to the Footer area and do the same thing. Let’s give ourselves the real background color from the site here.

Let’s go to the Full Width Backgrounds Plugin on our completed site and look at our Footer area. This is the color red, so we copy it. Come back over to this and that’s our Footer area and just paste that color so we’ve got that color red there and “Save” it. Let’s refresh this and see what it looks like.

You can see that Background color or that body color stayed green. Our Header area is this bright green, our Content area, we didn’t do anything with so it stayed white and then our Footer area is this rose red color. However, you can see that our #header_area.page is white, #content_area.page is white #footer_area.page is white. The thing to do here then is to first specify a height. Let’s specify a height for our Footer Background style.

Specify a Height for the Footer

For our height, let’s say it’s 300 pixels, hit “Save” and come over here and refresh. Now you can see that the Footer has expanded to take up more space. The Footer area has expanded because we don’t have enough content, we’ll still see this Background in the background because it still comes up to the bottom of our Footer area but in any case we have specified the height of our Footer area.

Display Header and Footer Area Colors By Making the Background Transparent

The next thing we’re going to do is to make the color of the Footer area and the color of the Header area go through this page. Essentially we need to make a the page transparent because ultimately we want it to look like this. The page itself is going to be white, the Footer is going to be this rose red and ultimately the background of the Header area is going to be this gradation of color with the green background.

Notice how I actually don’t have any Content Area styling. We don’t actually need to customize the Content Area so we’re just going to let it stay white all the way across and we just hit “Save” to that. What we need to do with our Header Area page is make it transparent. We could give it a different color if we wanted or we could give it a background image but we’re just going to make it transparent.

Then we’re going to do exactly the same thing with our Footer Area Background styles, we are going to make that transparent. Footer Area page and Header Area page or both can be transparent.

Let’s refresh and here we go. The white page color only exists in the area of the Content area since we turned off that content area customization that white color went away. If we come back to our Thesis Design Options now and get rid of that green color in the background, that’s going to give us the appearance that we really want.

Using a Background Image in the Header

We’ve got our Footer area in this red color, we’ve got our white for our Content area and we have this bright green color. We don’t really want that bright green color, we want it to be something different and that different thing is to put a background image in the header here. Remember I told you that we were going to talk about images next week, I’m not going to talk about it too much now except to say that we’re going to use one.

The first thing to consider here is that somebody might start off and say to themselves, “Wow, that’s a great big background image.” You’ve got to make it as wide as you possibly can so it fills up the space plus it’s going to be tall. It’s going to come from the edge here down to the menu and we want it to have that green color of the menu.

Fortunately, websites have the opportunity to tile images which means you take a smaller image and you repeat it over and over and over again. That’s actually what we’re going to do here, we are going to take an image that is 20 pixels wide and 200 or so pixels tall. Essentially an image just sits right here and we’re just going to repeat it all the way across.

What that does is that makes the image size actually quite small and makes it very efficient, makes that page load faster and still gives you this very nice appearance all the way across. This is way better than say building one great image and sticking it in there as your Header because it will just needlessly slow your site down.

The very first thing to do in this situation in order for us to do that is we have to get that image into our system somehow. This is one of these places where you have to pretend we’ve already talked about images because we’re going to talk about this extensively next week. We’re going to come over to our Media Library and add a new image.

It’s very similar to what we did when we added the background image in Thesis. We’re going to select our file and it is header-background.png. Look how small it is, it’s only 3 KB in size but it’s going to paint quite a large area. Much larger than the actual header itself and we get that because we’re just repeating a very small image.

Add a Background Image for the Header

If we open up that image here, it’s 20 pixels wide and 202 pixels tall. If you want to see that entire image in action you select “Edit Image” and  this is what it is. It has this gradation in color that comes down to that green stripe and it has a tiny borderline at the bottom. That’s how big this image is and that’s just going to get repeated over and over and over again.

What we need to do is take the file URL, copy it to our Media Library and we’re going to capture the file URL that has been assigned to it. I’m going to explain this thoroughly when we talk about using images with WordPress and using images on your website but just bear with me for a moment. Anyway, copy that URL, come back over to our Plugins, Full Width Backgrounds.

We’re going to come over to our Header area and under “Background, Color and Image”, we’re going to expand this. We’re just going to dump this background color because we don’t want that, let’s just  make it white for the time being. Then we’re going to paste that address for our image right here. You have the choice of how often you want to repeat it and where you want to start it.

We are going to repeat it horizontally. You can repeat both horizontally and vertically, you can repeat only horizontally or only vertically or you can choose not to repeat it at all. It doesn’t really matter where we start the background image but for something like this starting it at the top center is always a safe thing to do.

We can ignore the horizontal position or vertical position because this is just another way of setting this value. We’re going to repeat it horizontally, it’s going to be top center and we’re going to hit “Save”. It almost looks right but it’s not quite right because in fact, this is quite a bit taller than this so what we have to do is set some heights.

First we’re going to come over to our Full Width Backgrounds Plugin  and we’re going to say, “Height”. We need to set that image at 202 pixels tall, hit “Save”, hit “Refresh”, and now we’ve got our green image down here.

Adjusting Header and Nav Menu Locations

The next thing we need to do is move our Navigation Menu down and in fact, we want to move our Header image down a little bit as well. We’re going to do that under Customize #header_area.page.

What we’re going to do to move that down is to come back over here to Design Options. We leave the Page Padding at 1 and refresh this. See it just moved that down and now we need to take this and move it down what looks like about 20 pixels. We’re going to give ourselves top margin, that what’s going to happen with our menu, we’re going to give it some top margin which is going to push it away from this logo.

We come back over to our Simple Nav Menu and look at our Menu Bar Margins. Let’s give ourselves say 24 pixels of top margin and hit “Save”, look over here and refresh this. It’s right on. All we have to do now is to get rid of this funny little white line and we can do that by coming back over here and going to Menu Bar Background, make that Menu Bar Background transparent, and hit “Save”.

That Menu Bar Background is the menu bar that’s behind the menu items. Once you make it transparent that little line goes away and now we have our menu nicely lined up directly over this background image which we have repeating all the way across. We’ve given ourselves some nice little space above and below this.

Adding a Drop Shadow

I want to add a little drop shadow to this. We want to put a little bit of shadow on the top to give us a little bit of depth. You can see what that looks like here, it’ll give us a little bit of drop shadow on this and that is a setting that we have here in the Full Width Backgrounds. If we look at our “Height, Borders and Shadow”,  we don’t have a top border but we are going to do a drop shadow on the top.

We’re just going to make it say a 6-pixel drop shadow. We won’t do one on the bottom but we’re going to do one on the top.We’re not going to do any top or bottom borders, just our shadow, hit “Save”, refresh. Now I have a little bit of drop shadow. Maybe I’ll make that drop shadow 4 pixels instead of 6. We make it 4 and here we go.

Lesson 9 Review

First you learned about how a Thesis Page is structured and we created a Navigation Menu to go to all the pages that we created last time. Then we used a couple of plugins that I’ve written specifically to make it easier to move things around and style them and we have sort of the bare bones of the appearance of our site already done just by using those two plugins. We are going to do some more styling of the site and styling of the Homepage in later lessons but we have the basics of the appearance design nailed at this point.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
5 Comments… add one
5 comments… add one
  • John Cunningham June 10, 2012, 2:34 pm

    Very good instruction….as usual. I am really looking forward to developing my second BYOB inspired website.

  • Brian Manley January 22, 2013, 3:27 am

    Hello,
    I cannot get the footer background color to flush from edge to edge of browser. I follow step by step what you show in this lesson but I am not getting the same result. Could this be due to my page area size? (I also have the Footer Widget – can this be a reason also?)

    Thank you for your help.

    • Rick Anderson January 22, 2013, 6:48 am

      Brian, the chances are you aren’t using the Full Width Framework. You set the framework in Thesis Design Options. If that’s not it, give me a link to the site so I can see what is going on.

Leave a Comment