Build Your Own Business Website header image

What’s New in Thesis 2.0 Part 6 – Create a Custom Menu Style

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - , ,

Applies to -

In this session we show how to create a custom menu style in Thesis 2.0 by editing the existing menu package to create the style we want for font, alignment, padding and border settings. In order to place background images behind the menu items, we create a menu link package and a menu link hover package using the Single Element Styles package. We show how to use the Image editor and add a relative path for those images into the menu packages. Finally, we style the tagline by editing its existing package.

Now that we’ve got our header logo in here, we’re going to style this menu. You’re not going to believe how cool it is, this menu styling. I’m not even going to show you the default Thesis 2.0 styling because I’m going to show you something that you wouldn’t believe you can do without code.

Edit Existing Menu Package

We start styling the nav menu here. And there’s already a menu package created so we’re going to edit that menu package. Notice the CSS selector that it applies to is menu. It’s going to be important to us in a minute. Our font size, we’re going to make 17 pixels. Our font weight is going to be bold. Our font variant is normal. Our text transform is going to be none. Our text align will be center. I will leave one pixel letter spacing here for the moment.

Our link settings for links, our text color is going to be a green color. Our text decoration will be none. Background color will be transparent. This is something you couldn’t do in the old Thesis, but in Thesis 2.0 you can have the background color transparent. Our hover links are going to be white. Again, text decoration none, background color will still be transparent. We’re not going to do anything with active current or current parent links so they will inherit what happens above.

In terms of menu item padding, we’re going to give our top padding 45 pixels, bottom, 45 pixels, right padding of 11 pixels and our left padding of 11 pixels. And you’ll see why I’m doing this 45 pixels in just a minute. Our border settings is going to be none. Let’s hit save to this. Actually, this is save and compile so you can see what’s happening here.

Create New Menu Packages

Now that we’ve got that going on, we’re going to put a graphic behind each one of these menu items and that means we’re going to create some new packages. We’re going to create a menu link package and a menu link hover package so that we can put background images in here. Let’s add a package but this time, it’s going to be a single element style. So far everything we’ve done is a column package but this is going to be a single element style.

Menu Link Package

Select add package and the name for this one is going to be menu link. The reference will be menu link. The CSS selector is going to be .menu and then Thesis 2.0 applies its styles to the link part of the menu. So it’s going to be menu a. That’s the selector this is going to apply to. Let’s copy that as we have it.

Add Background Image in Image Screen

And for our options, we’re going to ignore font settings but we’re going to come over here to background and select a background image. Now in order for us to do that, we actually have to have a background image that we’re going to use. And so we’re going to use the Thesis Images section for doing that. First, we’re just going to hit save.

We’ll come down here and put our reference and then come over to images and we’re going to upload some images. First, we’ll start off with these images. These are 2 background images that we’ll be using. We can only upload one at a time, I guess. Okay, add the image, choose another file, add that image. Now we’ll choose our menu files and that was Barking Chihuahua…blue menu circle. Add the image and then we’re going to take the green menu circle and add that image.

Use Relative Path for Image Reference

See this bit of information here? We want to know what the URL is for our CSS. Now in this case, what we’re going to do is copy images green circle png. Let’s just copy the whole thing but I don’t think we’re going to end up using the whole thing. Come back over to CSS, go down to menu link, go to options and background and background image. I think what we have to do is delete that and delete that. And this is the relative path to our skin folder for our images. Just to make sure this is right, we’re going to save this. Hit save and compile. We’ll come over and take a look at it. Okay, I guess that was menu link. Did I do that right? I did.

Somebody says I added a slash to header… you’re absolutely right. That threw everything off. Okay, let’s come back and take that URL back out of there because all we need is the relative URL. You could also use your media library for this. But the nice thing about doing it this way is it makes it portable with your skin. Hit save and compile. Good call on that, Steve.

Set Options

I see I’m going to have to change my current. Oh, we didn’t set repeats properly and we need to set widths for this. So come back over and let’s go to menu, the main menu link first or the main menu one and let’s go down to link settings and to current links. Yeah, it’s got the background color defined there. If we take out all that definition, that will be good.

Actually, let’s make sure there’s no definition for the rest of it too. So current links, I took out current parent link. No background color, active link no background color, okay. Save and compile. We don’t need to compile it yet because now what I need to do is come back over to my menu link and in my background, tell it no repeat and in background position, we’ll say top center. And then we’ll scroll down here to width and we’ll give it a width of 88 pixels. I also want to give it a bit of margin. I’m going to give it 10 pixels of left margin. And I want to move the menu down from the tagline so I’m going to give it 40 pixels of top margin.

Menu Link Hover Package

Okay, there we go. Now, all we need to do is put the hover part in here and we’re going to be good to go. And that means we’re going to create another menu link although it’s going to be menu link hover. Add a package of single element style and the reference will be that. Again, we’re going to be referencing menu a: hover for the hover condition. Let’s save this.

The only thing we’re going to have to change is the image URL. So let’s go back over to images and grab that image URL, come back over to CSS, the menu link hover, options, background, background image. It will inherit everything else, the sizes and the position and everything else. The only thing that changes is the image itself. So we hit save, save and compile, refresh it. And now, you have a menu that looks like no other Thesis menu you ever saw, right?

Set Tagline Options

Now obviously, we have to move this header around. But first I want to fix this tagline here before I move the header around. So let’s fix the tagline. And the tagline is this right here, site tagline. Come over to options and for our text color, I’m going to use dark brown. Use that color there and I’m going to take the font up to 20 pixels. I’ll leave the default font weight. We don’t care about line height in this case. The font style is going to be the same. Font variant, text transform default. We won’t change any of that stuff. We’re not going to change the background. I don’t think we’ll have to change padding and margin. I do want to change alignment. We’re going to use text align center. We’ll hit save, save and compile, refresh.

You know, I think we’ll probably make this a little bit bigger and move that up a little. So one more time, we’ll go to the menu link and we’re going to change that margin down from 40… I think we’ll down to 30. And we’ll take our tag line and make it 24 pixels. We’ll come over here and refresh it. There we go. So there’s our default menu in Thesis 2.0.

0 Comments… add one
0 comments… add one

Leave a Comment