Build Your Own Business Website header image

Create a WordPress Site from a PSD File Using Thesis – Part 5 – Set Up the Header

Difficulty Level -

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.

In this session we set up the Header based on the PSD File design. The header has a logo image, contact information, tagline and no navigation menu. To accomplish this we use our BYOB Thesis Simple Header Widgets Plugin and BYOB Thesis Simple Nav Menu Plugin.

Video Transcript

So the next thing to do then is to set up the header. And if we take a look at our finished product, the header has a header image. It’s got a contact information and then it’s got this tagline down in the yellow and all that stuff is centered. So what we’re going to do is in order to do this, plus there’s no navigation menu. So in order to do this, we need a couple of plugins. We need the BYOB Thesis Simple Header Widgets plugin and we need the Simple Nav Menu plugin.

So from here, we’re going to add new and the first one we’ll get is the Simple Header Widgets. So we’ll search for Thesis in the repository and grab the Simple Header Widgets plugin. And then while we’re at it, we’re going to add the Simple Nav Menu plugin. We get this up, you’ll download the Simple Nav Menu from my site but I’m going to… I screwed that up. I’m going to choose a file then I’m going to pull it off of my server here and Simple Nav Menu. Now the only thing we’re doing then, it’s Simple Nav Menu, is choosing not to display the nav menu so we’ll just go ahead and do that first. And in terms of nav menu location, we’ll just say do not display and hit save. And if we come and look at the site, the nav menu is now gone.

Okay and we added the Content Widgets plugin and so are the… I’m sorry. We added the Simple Header Widgets plugin and so that automatically created a sigle widget area. And now we need to go and configure that.

So we go to Simple Header widgets and we’re going to start off with 2 header areas instead of one. And we… these header areas are not going to be side by side. That is, we’re going to have a header area that has this in it and we’re going to have a header area that does this in it. And rather than be side by side, they’re going to be stacked on top on top of each other where this header area is going to be that tall. It’s going to be 300 pixels tall or some such thing like that in order to shove the title, the tagline down.

So that’s the first thing to do then is we come over to our left header area and under left header area, we are not… yeah, let’s see. I’m just going to double check the way I set this myself. Okay so custom CSS location is going to be a separate CSS file. And then we aren’t going to use any Thesis defaults in our left header area. Remember that if we don’t specify a width for the left header area, the 2 header areas stack on top of each other. Were we to specify a width, they wouls sit side by side. But we’re not going to specify a width.

However, we are going to specify a height and I believe that is about 300 pixels. And then I don’t think we’re going to do a margin. We’re not going to do header background color and image. Actually you know, that might not be a bad place to put the header image but I guess we’re not going to do that there. And then in the right header area, we’re going to include a Thesis default and the Thesis default… it says, “retain Thesis default header functions in this area” and we’re going to say yes to that which means it’s going to drag that tagline into that area. And we’re not going to do a nav menu. We’re not going to do a search bar. At the moment, we’re not going to say anything about height and width or margin or padding or background color. So I think we’re just going to say save and see what comes out of this.

Okay, it’s getting pretty dang close so we got this down where we want it roughly and we’ve got our one header widget up here. So the next thing to do is to actually create the widget and under our left header area widget, we’re just going to drag some text and then we’re just going to copy that text and put it in there and automatically assign paragraphs and hit save.

Now when we’re done with this, obviously, it’s not going to go on the right spot. It’s going to go over here instead of over here and we probably do want it to come down a bit. So we will come back over to our Simple Header Widgets plugin and under right header area text alignment, we’re going to go ahead and say right. and then I think we are going to say… oh no, pardon me. Right header area is the bototm one. We’re going to say center to that one. Left header area text alignment, we’re going to say right and the left header area padding, I think we’ll give it 20 pixels of top padding. Let’s see what it looks like. Okay so that moved that over. Obviously, that pushed this down by 20 pixels so 300 pixels isn’t the right number. And in fact, it could very well be that 280 isn’t either just because we’ve got… this font’s going to be so much larger. So we’re just going to take a guess here and… well, we’re not even going to work with that yet. We’ll adjust that once we get this height right.

But we’re missing our logo so we’re going to put this logo in as a background image of our header area or actually, of our header. So if we lok at this for a second, here’s our logo. And I’ve already cut the log out and set it aside so I’m going to go ahead and start with that. I’m not going to repeat that process here but… so we will go ahead and upload that, select the file… let’s see, websites. And so our logo png, open up there. Okay it says it’s 345 byt 288. We’re just going to keep that information in mind. I’m not sure that we’re going to need it but we’ll come back over to our Simple Header Widgets plugin. And under header background color and image, we’re going to say customize the background style. And we want the background to be transparent because we want the watermark to show through. We want the background image in it. We do not want to repeat it so we’re not going to check either of those. We want it centered and we want it at the top. So check both of those things and hit save. Refresh this, there we go.

Okay so we’ve got Azymuth here in the middle. We’ve got that up there. We need to get this part of it done correctly. And so that’s really the next thing we need to do is start writing some code here. Okay, let’s see. Oh actually, no. I don’t want to take hers because I would have written the code there. And actually, the code really exists… websites and then Thesis Toolbox. I don’t think that’s right. What did I do here? Okay so Full Width Backgrounds, Thesis Toolbox, Header Widgets. Okay, I guess I did… okay, I guess that’s where it is. Header Widgets, WordPress, custom CSS should be blank. Perfect.

Okay so then we’re going to come back to the site here for a second and use my typical process of using custom CSS to adjust this stuff. And we’re going to give it a height and I believe… I think we’re also going to have to make it text align center. I don’t think that’s going to happen without doing that.

So we’re going to come over to Firefox and test that code before we get anywhere, before we go anywhere with it. Okay so we’re going to… let’s see, let’s add CSS to this and this, if we inspect this element, this is tagline. You can see it’s getting its size and everything from header, #header #tagline so that’s what we’re going to work on. So we say .custom… I think I still have my caps lock on… .custom #header #logo… no, #tagline. And then move in and we’re going to say font size… let’s say 2.4 em. Yeah, I don’t think that’s quite right. Maybe 2.8 em.

And then I think this wants… if I recall correctly, I mean, just looking at this thing here, I think it wants some letter spacing. It doesn’t look like the letters are tightly in there. I’m going to start off with one pixels of letter spacing. We’ll see how that works. Actually you know, I suppose I could just figure out from here, how big that is. The tagline is… oh well, that’s not going to help. That says 12 points but it’s clearly not 12. So we come back over here and we’ll say letter spacing: 1 px. Okay, I don’t know you know, maybe 2 pixels. Yeah you know, it pretty much looks alright. And then we’re going to say text align center.

Okay so that actually looks the way we want it to look so we’re just going to copy this little snippet of code and paste it in our CSS file, save it, upload it, refresh it. And you know, I don’t know, really, I mean, it almost looks like we need to lose about 30 pixels so that’s what we’ll do here. Actually, no. We’ll just test it over here. It’ll be a lot easier to test it hwere. So if we look at byob custom and we see our header area, header area height was 336 but if we look at our header widgets and our top, our row 1 height was how many pixels tall? 300 pixels. Let’s say, let’s call it 280. 270. Okay, 273. Well, that loks like about right so that’s what we’re going to change that to is 273 pixels. It’s actually the easy way to test this stuff is to do it in Firefox like that. And so now, our header height for this first row is 273 and hit save. Hit refresh.

It looks great except I think I lost my background image. I did. Clearly, I have a different version of it. My mistake. I have 2 versions of this silly thing set up so I’m going to turn off this Simple Header Widgets one and then I’m going to come bak and say 273 in terms of its height and hit save. And now, it should be right. Okay, there we go.

So that is pretty much it for today although it looks like I have somebody with a question. So I think I’m going to take this question from Cahty and then next week, we’ll come back and we’ll finish using the PSD as a basis for you know, creating this thing and taking it from where we are here to where we are there.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment