Build Your Own Business Website header image

Thesis 2.0 Launch Party Part 6 – Add a Logo Image and a Navigation Bar to the Header

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

Chris asks whether or not it’s been tested on all browsers. I’ve been creating this responsive skin I mentioned and I’ve been testing it in all browsers including on the Mac and it’s been working fine so it definitely looks like it, works just fine on all browsers. Tom asked how do I make changes on code level custom CSS? It’s not at all the same and I’ll show you that but Tom, you’re going to hardly ever write any anymore.

Tom is asking where can you get your copy of Thesis 2.0. It hasn’t been publicly released, you’re still looking at an Alpha version. Sometime today it’s going to be available but I just don’t know when that’s the case. I have links setup on my site for downloading the stuff that I create. To the extent that you like coding, Tom you’re going to have a blast because there’s all kinds of coding you can still do. It’s just not absolutely necessary.

Is caching built-in? Some caching is built-in that is, it uses the WordPress transient system for caching queries and caching information like that but it doesn’t create static HTML and serve up static pages like say, W3 Total Cache. Let’s jump in styling these things because we’ve now succeeded in creating a 2 column layout and a 4 widget areas.

The next thing we’re going to do is add a header image up here and we’re going to do it beside the navigation menu. It’s going to look something like this by the time we’re finished, this whole thing is the header so we’ll have a big logo, our cool menu then this block of text that’s all going to be in the header. Let’s get back over to our skin editor here, take a look at the page skin and we want to change the header.

Create Big Header Columns

What I want to do is at the moment, I’m going to take the site title out. I’m going to drag it over and drop it here but I do want 2 columns in here and what does that look like? We’re not going to call it 2 Columns, what we’re going to do is call it Header Columns. I probably don’t actually need the other container. I can probably just say, Big Header Columns, add the box and the class is going to be big-header-columns.

I’m going to shift drag it up to the header and I’m going to create a new container, it’s Big Header Left and add the box. Just like we did with the footer widgets, we’re going to give it a class of c1 for the first column. We’ll add one more box called Big Header Right and we will give it a class of c2. Big Header Right and Big Header Left, we’re going to shift drag these up into header.

I forgot to tell you that you can actually drag this box thing around. You don’t have to do it from the bottom like that and shift drag the left one in. Let’s open this container up, Header Left and Header Right and c1 and c2, we’ve got that in place. I want to double check the size of my image here for just a second so I get this column the right size. I’m going to go to Media and my large number is 436px wide. The overall thing is 959 so there’s a little bit of Math here sometimes.

This overall page with this 959 and I’m subtracting 436 so the other column’s going to be 523. Come back over to HTML, big-header-columns, that’s the class, back to CSS, add the package, .big-header-columns. The name is going to be Big Header Columns, reference. 2 Columns, column 1 is going to be 436, left aligned, column 2 is going to be 523, right aligned, save it and add that reference, save and compile and refresh this.

Just to make sure I didn’t do something wrong here, what did I just changed? I haven’t saved the template yet, that’s what it is. We’ll save the template and if we come over and refresh it again, there’s not very much up there anymore. We come back over here and we’re going to come over to the Header Left Column and we want to put a header image here.

What we’re going to do is try another box type and this is called the Text Box and I’ll call it Big Header Image. Add the text box, I’m going to shift drag over the Header Left and this is where you can put any kind of HTML that you want here. I already have a sandbox page created for creating the HTML so we’ll just come over here to pages, all pages, go to my sandbox page and I’m going to get out of this other stuff.

Insert an Image from the Gallery

I’m going to insert an image from my gallery. I’ve got the large and I’m going to use the large version of it, the title to this one is not going to go anywhere because that’s only going to be on else, “We’ll Go Back to Our Home Page”. Let’s see Barking Chihuahua Cafe and a link URL is going to be just to our home page because that’s what’s going to be.

It’s going to be full size, we’ll have none like that so we’ll just insert that into the post then I’m just going to cut that HTML, come back over here and paste. I don’t need the class or an ID for this thing. We got a header image and if we just save the template now, refresh it, there’s our header image. Come back over here to About and it’ll take us back home so there’s our Big Header Image.

Now, our Header Right is going to have our Nav Menu in it now so we’ll go ahead and shift drag the Nav Menu into Header Right. Must going to put the Site Tagline into there so I’ll shift drag and drop that in there. I’m just going to have the class of menu, that’s fine, leave that as it is and let’s just see what that looks like now.

Create a Page Intro

Actually no, I want to put one more text box in there so we’re going to add one more text box and this is going to be sort of our Page Intro. Add the box and I think in this case, I am going to create an ID, page_intro.

On my sandbox page, I’ve got some introductory text here that I want in there so I’m just going to copy that and paste it here. I lost my HTML, I guess I have to do it from the HTML view and I guess I probably should just put this in a p tag. I thought I could just copy that link but I guess not so we’ll just wrap that HTML in a p tag.

Now we’ll save this, come back and refresh it. Not quite, I haven’t drag the Page Intro into the thing in so shift, Header Right then we’re going to drag it down to below the Nav Menu. Here we go so Site Tagline, Nav Menu, Page Intro, save template, refresh it.

I am clearly having an issue on widths here. My image is 436px wide so I must have done the Math wrong for the next one which is 523 and it overlaps that. You know what, it’s inside the header and the header has some padding. The default header definition has some padding in it so we’ll come back over to this header here and go to the options and look at no margin, look at padding and we’re going to get rid of all the padding.

What you see here is the power variables and if I get the chance, I’ll show you how the variables work but for the meantime, we’re not going to have any padding at all. Save and compile that, refresh it, there we go. Now we’ve got our stuff in here but we’ve got a little bit of styling to do.

Style the Nav Menu

The first thing I’m going to do is style the Nav Menu. The Nav Menu styles is going to look like this. We’re going to have these buttons with the background and we’re going to have text. We’re really only going to have 2 conditions, our hover condition and our regular condition. We won’t create other conditions for it, just for time purposes. We’re going to start that process off by coming over to the menu style and under our options, we’re going to turn off the border. Right now it says, border is none.

Make Background Color Transparent

The other thing I want to do is say that the background color is transparent. I haven’t actually tried that designation, that works perfectly so background color is going to be transparent again because we’re going to put an image in here. We save that, we compile the CSS, come over and take a look at it, that should have changed that quite a bit, it has.

Now what we’re going to do is create a new stand alone package for our two different conditions. If we come over and look at that menu again, you can see that the selector is menu and in fact, that background color came from the selector, menu a. That’s the selector we’re going to create and it’s going to be a Single Element Style. We’re going to add the package, this is going to be Menu Link, the reference is menu_link and the CSS selector is .menu a.

We are going to pick a background for this right here. The background image, let’s grab it from the Media Library so this is our standard one. As a developer, what you’d really do is you do this as a sprite but we’re not going to do that at the moment. Background position will be top center so it’s 0 and 50%, background attachment is default, background repeat is no repeat and actually, we’re not going to use this to define the size.

We’re going to use padding to define the size so we’ll hit save and we’re going to hit save again just so you can see what this looks like now that we’ve done this. I haven’t added it here so that was menu_link and I mispelled this so let’s fix that, save that, we’ve added it to our list to publish, we refresh this so now we’ve got those things.

Customize Padding and Margin

Now, what I want to do is add padding and margin to get these things to separate. In menu here, in my options, in my menu item padding, I’m going to say, 30, 30 and I think that’s probably good. Hit save to that, save to that, let’s check out what the result is. We need more than 30 and 30 and I also want the text to be large so let’s go ahead and just make that menu text larger.

Font settings, we’re going to make it say, 15px and we’re not going to use the uppercase, we’ll go ahead and use the no text transform, we’re going to center and let’s hit save to that. I didn’t compile it though. I guess I didn’t choose a color, did I? Let’s pick it up to 17, let’s make it bold, let’s get the color the way we want it.

The link the color will be this green color which is that so there’s the link color. The hover color will be white and I guess we may as well just add more padding to that because it doesn’t look like that’s going to work yet. Menu item padding and top padding, let’s just make it 40 and 40, hit save, save and compile, refresh, okay.

Specify Widths and Margins

The next thing to do is to specify a width for each of these things and to specify some margin. How big is that image, that’s 108×108. The width of this menu link is going to be 108 and margin, we’re just going to give it a left margin of 20px. Richard asked if I can set overflow? I would have to set overflow here by physically typing overflow:none or overflow:hidden or whatever to do that because that’s one thing you can’t do here. We’ll save and compile, come back over and refresh. I guess 20px is too much and I’m still not getting quite enough height.

In terms of menu, we’ll come back over to our menu item padding and make it 45 and 45 which should be enough. In our menu link, we’ll come back over and make our margin 10. See how that works. How much room do I have there so my width is 523. I guess we better go down to 5, maybe 5 will work. Isn’t that interesting, it doesn’t seem to be moving any. That width is 130, that width is 135 so part of this is the width issue. 108 is getting added to, let’s say 88 and see what happens. There we go so I can probably just add a bit more margin here.

I’m going to give myself some top margin here also just to push it away from the stuff above, 20px of top margin. Let’s do that hover condition so we come down to our hover condition. This was menu link so we’re going to add a package and it’s going to be Menu Link Hover, it’ll be menu_link_hover and .menu a:hover. The only thing we need to do is specify the background image, copy that, put it in there, hit save, hover, refresh, there you go. That’s a no code custom menu style.

Isn’t that interesting? I guess we are going to want to add a couple of additional styles to the menu. Let’s just take a look at this again quickly and I’m going to take out that. I think because I specified something there, it didn’t just inherit from the original. That’s it, if you specify something that it wants to inherit.

Create a Post Formatting Style

The next thing is to style this a bit so we’re going to create a post formatting style, add the package. The name of this is going to be Page Intro, reference will be page_intro and remember that we created an ID for that so that’s what I’m going to use, #page-intro.

In terms of options, the font size I think we’ll try at 16, the width of that, we’re going to use this little thing about 500px. The text align is going to be left, we’re going to use sub-headlines here, font is going to inherit, font size will be 18px, font variants, text transform, everything is going to stay the same there except for color. I want to change the color of the font. Where’s the font color, I thought I need the answer to this question.

Font weight, line height, text align, headlines, let’s save this for just a second. I must be thinking of something different here. I’m just going to create a second box for this and we’re going to call it Page Intro Text. I think that is something that he’ll probably fixing because text color should be part of that then #page-intro. Our options, we’re just going to pick the text color and I want this brown color right here.

We’ll just copy that, put in my text color in there. I think I’m good on that so we’ve got page_intro and we’re going to do page_intro_text. Let’s go ahead and save that, refresh it. Obviously, my HTML is different, page-intro, HTML ID is that. I’m getting my stop between when I use underscores and when I use hyphens. Often now, when something doesn’t work the way you expect it to work, it’s going to be because you mistype something like that.

I think that’s going to want to be bigger though, isn’t it? Come back over to CSS, come over to the Page Intro and in our options, we’re going to make the font size 16px. Pardon me I’m on the wrong one, this doesn’t really matter. Font settings, I guess we’ll make that 18px and I guess we’ll do it bold then sub-headings, 24px, we’ll make them bolder. Let’s give 40px for line height there and save that. That was inside of one of my boxes. Let’s just save this, refresh it, there we go.

I could probably set the width of this so that it’s a bit smaller, that’s 523px wide. I probably could set that width so that it had some margin and that might be the Page Intro, is that right? No, it’s not there so I would do it inside the container I guess and my container is Big Header Right. I think I get the gist to that.

4 Comments… add one
4 comments… add one
  • sybille October 16, 2012, 6:14 pm

    Hi Rick,

    wow, you put a lot of work into Thesis 2.0 already.

    I have problems downloading part 6 – any suggestions?

    • Rick Anderson October 17, 2012, 6:45 am

      Just try it again, or try it in a different browser. That kind of problem generally goes away by itself.

  • Chris October 23, 2012, 10:03 am

    Great Thesis 2 tutorials, best vids out on the web. I’m a Scotsman (mean lot)and even I’m considering the membership fee option on your site.
    But please can you end my despair!! How do I style a nar Bar if I do not yet have one, well I have one but it’s hidden.
    Can you give me an idea as to how to start. I have a CCS ‘&Menu’ menu Widget and in the HTML I have a Widget called menu (it’s in the Header).
    In FireBug the Nav is shown as Visibility:Hidden. But how do I get to it. I can see it in the FireBug CCS panel and when I highlight the Nav HTML code in FireBug the INVISIBLE box shows itself on the Blog page, but I’m lost from there.

    • Rick Anderson October 23, 2012, 10:12 am

      I know a funny little song about a Scotsman –

      On a serious note – It will be easier to answer that with a link to your site. However, the chances are you haven’t yet created a WordPress menu that you can assign to the menu box. Post a link and I’ll be able to tell you more.

Leave a Comment