Build Your Own Business Website header image

How to Add Tiled Background Images to Full Width Framework Part 2

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 the series on How to Add Tiled Background Images to a Full Width Framework and in this session we show how to style the header and the footer widgets.

Video Transcript

Now the next thing I’m going to do is change it up for the header area. So if we come back over here and grab this background image again and then come over to the header area background image and paste that image here. But instead of Project Paper, let’s use the darker one which was Inflicted. And we need to make sure that it repeats in the X and Y direction. We hit save. So now I’ve got you know, these 2 different things. If you want to make a finer line between the two, we can add that shadow to the bottom so we come down to the top border top shadow and bottom border shadow is the one. So if we say, pick 4 pixels as our drop shadow, refresh that and refresh that, now we have a nice little drop shadow happening there. And interestingly… oh that’s right, because I want to get rid of the white here. I forgot what I was doing there for just a second.

And so if we want to get rid of that page color and essentially make it transparent, we can go ahead and select that. We can get transparent and refresh this. And now, we end up with you know, the strong header across here. Let’s make this a light gray switching to blue. So we come over to our Design Options and under our header, instead of the black, if we pick a light gray and hit save, now we have a nice, crisp look.

And we can do the same thing with this footer widgets plugin. We could take that dark color and we could fill the blue with that dark color. And we can also you know, swap out this nav menu so it doesn’t have to clash with it. But… so let’s just do that. Let’s take a quick swipe with that.

Go back to our footer widgets… no, our full width backgrounds and let’s take this header area background image again and just copy it. And go down to our footer area background image and paste it. We’ll repeat it in the X and the Y direction, hit save. We’ll come over here and take a look at what it looks like real quick before we get too far down the road. Okay, I must have a padding under this. Let’s get rid of that blue color and see if there a padding that we can get rid of for this.

So if we go down to our footer widgets plugin… so under our footer row 2 settings, let’s just look and see what we’ve got in terms of margins. Left margin, right margin but no bottom margin. Okay so then we come back over to full width backgrounds and we look at our footer area backgrounds. If we look at the height, let’s see. Oh, that’s interesting. Because what should be happening is this should be stopping right there. We shouldn’t be able to see this light color below that. The only time you should be able to see that is when the window is smaller, when the window is larger than the pages. And so we shouldn’t be able to see that right there. And I guess we’ll take a look at it and see why that’s the case. You know, I don’t want Firefox to update itself. See, there’s one good reason for having this system because freaking Firefox is always trying to update itself to its latest version which then makes everything else I want to do not work. Great, okay copy that.

Okay so then if we inspect that element, footer area, page, footer, footer row 1, footer row 2. Isn’t that interesting? No apparent answer for why that’s happening. Let’s just keep going lower. Maybe there’s more to it than that. Oh look, the UL sidebar list and then the under… and then we’ve got the margin at the bottom of our text widget. Yeah okay, it’s these extra little margin things that are causing the problem. And so I think if I define… but if we go back up here to footer. That is the footer. That is the page. Footer row… okay so I could get rid of that extra margin on the top. Bet you that would solve it. It doesn’t quite solve it but okay, well I’m going to come back to that one.

First thing I want to do is get rid of this white and then I want to get rid of the blue and then I want the rest of this stuff to stay there. So I’m going to get rid of the white by turning off the page background. So footer area page, we’re just going to make that background transparent and hit save. We’ll come over here and refresh this and now, that footer you know, goes all the way across. And then I want to get rid of this blue. And in fact, I think what I’m going to do is instead of this blue, I’m going to put a very light white, a semi-transparent image over this. But first, we’ll get rid of the blue and see what it looks like and that’s inside the footer widgets itself. And under our row background style background color, I can see I need to create… well actually, if I uncheck that, I bet you that solves the problem because it then takes the background color out of it. Yeah so that does solve the problem and in fact, that allows me to have a cool, little thing down there if that’s what I want.

So that’s basically what I wanted to show you. We could put a little… I’m not going to put a… am I? No, we’ll let it go with that. I just wanted to show you an example of using these you know, cool patterns and there are lots and lots and lots of different patterns in here and just about anything you may want to do, I’m guessing you can find. Rubber grip, that’s a little intense. And so, you flip through these things and just select download and you get the image. And then you can come to the plugin and insert that image and you can end up with some you know, fairly cool effects.

0 Comments… add one
0 comments… add one

Leave a Comment