This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
Welcome back to Part 4 of Lesson 9 of the Build Your Own E-Commerce Website tutorial series. In this part of the lesson we are going to add an image to the header or sometimes I refer to it as the foreground image to the header of the header area of the Thesis full-width framework.
Add an Image to the Thesis Header as a Logo
In order for us to understand what we’re doing here we’re going to take a look at the final product. Here it is and this, the orange slice, is what we’ll be adding. Go ahead and grab that by coming over to Standards Compliance, selecting Media and it is this one right here, images/logo.png. You can see what it looks like so go ahead and save as. We are going to save it to the same place we did before on our hard drives under thesis_18 custom and images, go ahead and hit Save.
Inspect and Upload the Image
Before we leave this we may as well just look at the element itself. You can see that when I hit Select Element it went to div_id=header and in fact as you look at it you can see that it’s got some pretty big padding assigned to it – a large padding on the left, some on the top, and also under custom #header you can see that it has this background of the lime slice which is 450 by 180 pixels.
Let’s go ahead and upload that image to our Thesis ecommerce site. We saved it here so all we have to do is upload it. Now that we have uploaded it let’s try to make this change. Come over to the page and go to custom.css. We’ve got our custom #header_area and now we’re going to do our custom #header and then we’re going to have an opening bracket, a closing bracket, and then I am going to select both of these pieces that we did last time and I am going to include them again here except that this time I’m going to change the name. It’s not going to be top-background.gif, it is going to be logo.png. Now you can see it is being repeated over and over again there.
Customize the CSS of the Image
Instead of repeat-x I’m going to say no repeat. This doesn’t actually look the way we want it to at the moment. We want the navigation menu to go down below the header and we want this image to be up higher. So we’re going to take a look at why that is the case.
Come down here and look at .page; you can see that we put this inside of header but .page has this big padding area that you can see with the purple up at the top and actually if you come over here to header_area .page and turn it off you can see the image jumps up to where we want it to jump up to. So we are going to eliminate this padding top and we are going to do that by custom #header_area .page and we are going to say padding-top: 0px, semi-colon.
Then we want to shove this down if we can and the way we’re going to do that is by giving this header a little bit more height and we’re just going to take a stab in the dark here about how high this needs to be. I’m going to say height equals 140 pixels – see what that looks like. That looks about good enough for the time being. So here we have this image here and we have that sitting over top of the background image.
Now we want to move this logo and tag line down and over. They sit inside of div header, right? So the easiest way to do that would be to add more padding to the top and left inside of this. Our custom header height is 140 pixels. We’re going to say padding-top, colon, hyphen, top, colon and let’s call it 40 pixels for the moment, change to 60 pixels – 50 pixels – all right. Then padding left looks like that’s probably about 150 to 140 pixels. Change it to 100 pixels. Okay, I think for the time being we can call that good. You can see that this has been forced all the way down here at the bottom.
Let’s go ahead and copy these. You know, I usually take the whole section here just for ease, copy it, replace that whole section, paste. Go ahead and save it, upload it, retest it in this browser, compare that to this. I guess I do have it up a little higher but if that really mattered to us we could do that. What matters is that it generally works.
So then we come back over here and we take a look at it in Chrome, okay. Looks fine in Chrome and then we do it in Internet Explorer, looks fine in Internet Explorer.
That wraps up Part 4 of Lesson 9, Add an Image to the Thesis Header.