Build Your Own Business Website header image

Creating a Full Width Header Using BYOB Thesis Plugins – Part 6 Add Gradient Background to the Header

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 the final part in the 6 part series on Creating a Full Width Header Using BYOB Thesis Plugins. In this session we show how to add background color to the header area using the BYOB Thesis Full Width Backgrounds Plugin. We use colorzilla.com to pick a color and generate the gradient code. We also show how to style the header using Thesis Design Options.

Video Transcript

Okay so that’s part of this. Now, the next part of it is we’re going to add some background color and stuff like that to this using my background… my BYOB Thesis backgrounds plugin. And so, we’re looking at the full width background and the background area that we’re going to change is the header area. So we’ll go ahead and say save to that. And now, we’re going to make this height 250 pixels… or no, what did I say? 220, right? 220 pixels and we’re going to let go of that for a moment but we’re going to put a gradient in.

Now, I’ve shown you this before, ColorZilla gradient editor and you know, their default gradient looks like this, right? And you can pick from different gradient styles as you look through here and then use something to you know, start yourself off with. And so, if we, for example, just for grins right now, what we’ll do is we’ll pick this… no. Yeah, let’s just pick that orange for example. If we just grab that gradient, copy it, come back over here, you can paste that code right there. Hit save, come back over to this and now that gradient runs across or runs through the header here.

Now obviously, that color doesn’t really look that great with this stuff so we’re not going to use this color. But I thought we’d just use another grey and so, I’m just going to come down here and maybe grab that grey. Now, this grey is a little light for me and so I’m going to darken it up a little bit, I think. Yeah, darken it up just a little bit. Say okay to that and I think we’re going to reverse… I don’t want that to be white. So I’m going to pick a very light grey for that. Say okay to that and then I want to reverse it because I want the dark at the top and the light at the bottom. If you’re familiar with Photoshop then you’re familiar with how this gradient thing works. This gradient behavior is exactly the way gradient works in Photoshop. And now, I’m going to copy that and come back over here to background image… no, background gradient and replace that old stuff with this.

I also though want to get a little bit of drop shadow on that bottom so I’m going to come down to the bottom, border drop shadow and I’m going to give myself 4 pixels of drop shadow. So if we refresh that, okay it looks like this and now I want to push all this stuff down here a little bit. So the way I’m going to move that down… yeah, I’m going to move this whole thing down by coming back over to my header widgets and I’m going to header margin. I want to give myself, let’s see… let’s give that 20 pixels, see what happens there. Top margin of 20 pixels, okay that drives that down. I think I’m also going to change the size of this though so we’ll go into Design Options and under header, I’m going to take that up to 44 points and I’m going to take this up to 16 points. And I’m going to use Arial Narrow for that. I think I’m going to change this color but I’m not exactly sure what. Let’s just pick a… let’s just pick kind of a deepish blue here for this color. Let’s see how that looks. Okay and then when you hover… that is not good at all.

So we’re going to come over here to that again and let’s see, header… I think let’s just try white for this, fff. Yeah, there we go. So now we have…. Now, I think also I’m going to change that font size. Let’s see, I don’t know how much room I have to go with this actually though, but let’s just change that font size. Let’s see if that breaks my site. It does.

Okay, let’s… okay, let’s see. If I take that down to 13 points, will it work? Not quite. 12? Well, I can’t do anything about it. Nav menu… I kind of want that font to be bigger. I might have to eliminate… oh actually, you know what? I can though, choose a different… so what I should do really is I should just choose a different font style. If I choose Arial Narrow again and then go to 14 points, I bet that works just fine. Yeah, that works just fine.

And then if I change the hover color, let’s see… let’s change that hover color to white. Hover to fff… there we go. Actually you know, it might make sense to take that blue… I guess that looks okay.

0 Comments… add one
0 comments… add one

Leave a Comment