Build Your Own Business Website header image

Community Library Website Case Study – Part 35, Add Styling to WordPress Menus

Difficulty Level -

Filed Under Topics - , , , ,

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.

This is the thirty fifth in a series of live lessons on using WordPress and Thesis as a Content Management System (CMS). In this lesson we continue working on our new catalog page as we style the custom menus we created earlier. Using Firebug and Web Developer, we change the CSS so that the list items have the right text size and stack how we’d like. Then we change the style so the links look like buttons and finish off the styling by adding CSS3 features of round corners with a border radius and then a drop shadow.

Video Transcript

Okay so the first thing we’re going to do then is we’re going to style these menus and open up Firefox. Let’s inspect the element and what we’re going to do is… well, let’s edit the CSS in Web Developer as well… or custom CSS. And we have created sort of the base styles for this but we’re going to do some fun stuff with the styles here. We’re going to use a drop shadow and we’re going to round the corners and stuff like that just to make this look interesting.

Okay so the first thing we want to do, we said that the UL adult menu was list style none which is why it doesn’t stack like this. But what we want to do is we’re going to give it a width and then we are going to give each LI item a width and then we’re going to float them left so that they stack. So we’ll just start off with let’s see, let’s give this one a width of 320 pixels, 320 px and let’s float it left. Okay so now you can see there’s our 320 pixels and obviously, there’s enough room for 3 undefined width tabs or selections here so I just stack up. But what we want to do now is let’s give… well, let’s see, let’s start off with not 20 pixels of padding but let’s start off with 5 pixels of padding. Not 56 pixels but 5 pixels. And then let’s give it a width of 100… let’s see, let’s call it 145 pixels, see what happens there… width of 145 pixels. Now you can see they stack up in 2 lines.

Now the font size is too small so let’s just add a font size and let’s call it 14 pixels. Okay, that looks pretty good. And now I want to make these things look like buttons so I’m going to style the link. You can see there’s this link right here, I’m going to style the link in the similar way that we style links with the regular navigation menu. So I’m copying that UL adult menu, pasting it, UL adult menu a. We can get rid of… I guess we can get rid of all that really. And I want to give it a background color of red. Now you can see how it just you know, it doesn’t take up all the space available to it. That’s because we haven’t told it how to display but we’ll say display block.

Okay and then I think we probably need some line height there so let’s make these tabs a little bit bigger. Line height colon… let’s make it 30 pixels tall and let’s make the text white. So color white and then enter this text in the tabs. So probably the best place for us to do that is in the LI item itself so here what we’ll say is text align center. Okay, there we go. We have a nice little layout of buttons and you can tell obviously that if we style these the same way, they’ll just be able to stack over there.

Now I want to though do something totally cool with this and I want to add a border radius to these to make the buttons round. And the border radius is part of CSS 3 which has… in the adoption phase and which you know, all the latest browsers right now are supporting in one level or another. So this doesn’t work in Internet Explorer 8 but it does work in Internet Explorer 9 and that is called… well, let’s just go over to the W3 schools and take a look at this. And under their CSS 3 tutorials… in fact, let’s just go home and you look at their tutorial list, there’s a CSS 3. And then from there, if we go to borders, we’re going to look at border radius.

And so if we come down here to border radius, it’s actually quite simple. You just declare the border radius which is some number of pixels…we’ll say 5 and then there’s this moss border radius which is not a CSS 3, it’s a fix for Firefox. Firefox started supporting CSS 3 ideas quite a while ago and so they created these little things that you could add to… that would just show up only in Firefox. And so, we are going to go ahead and take both of these, copy that, come back over here and under the a, we’ll paste that.

And so, if you want the big circles, that looks just fine. I actually wanted them to be smaller so I’m just going to make them 5 pixels. There we go, it’s got kind of a rounded edge without being overly rounded. And Internet Explorer is just going to display square but everybody else will see this as rounded corners.

You know, I think maybe this doesn’t look as good as it could either so we’re going to make that bold, make that text bold. So that is font weight bold. There we go, that looks pretty good.

Okay now I want to create a hover condition because we don’t have a hover condition right now. So I’m going to take UL menu adult a, I’m just going to copy that again, paste it down below, colon hover and I’m going to make the background color blue. Now we don’t need to display a block line height color weight or font weight or border radiuses for this because it automatically is taking it from here. The only thing we really want to change is the background color so we’ll just go ahead and delete all of that. And then when we hover over there, they change color.

Okay, now I want to do one other cool thing and that is add a drop shadow to this when we hover over it. You know, you’ve seen that already in the DIY Themes site so I thought I’d show you how we’d do that. And we’ll come back over to W3 schools and again in that same place, there is the box shadow. Now box shadow does require a similar sort of thing as border radius for both Safari and also for Firefox, the older versions of it. Now I’m not… I’m a little surprised that they’re not showing it here but we’ll use it anyway.

Now this gives a big shadow, right? That 10 px, 5 px… each one of these things is the… this is the distance away from an edge. And so, it’s 10 pixels this way and 10 pixels this way. You could keep on going and say 10 pixels and 10 pixels and it would… this shadow would go all the way around. This 5 pixels has to do with sort of the blur you know, of 10 pixels, 5 pixels are blurring. And then it’s using this color of 8888. You know, I think that’s a little dark for me. Let’s see, where was that? Was there a try it yourself link here, I think? Yeah well, so if you added another 10 pixels here… actually, we needed to do it in this because that’s what’s Chrome is using, 10 pixels and click… oh, isn’t that interesting? It didn’t work the way it work the way it would there.

Okay so in any case, let’s just go ahead and copy this. Go back to our page here and then below the color change, we’re going to add the box shadow. And now you can see what happens, that’s way too much so I’m going to go 3 pixels, 3 pixels, and 2 pixels… and 3 and 3 and 2. And one more time… you know, a couple of years from now, nobody will be using these moss and web kit. Everybody will just be using the plain old ordinary box shadow because all of the browsers…oops, all of the browsers will have supported it.

Okay so let’s see, I did something wrong evidently. Box shadow, 2 pixels, 2 pixels, 2 pixels… I’m going to go back and look at the example. 10 pixels, 10 pixels and 5 pixels so 3 pixels, 3 pixels, and 2 pixels… should be working here. Oh in fact, what we really should be working on is this moss one anyway. Oh that’s it, I’m missing the p. Yeah, I can see you. Appreciate the fact that you saw that. There we go. Now you can see that you’ve got the nice little background image or that little drop shadow. You can do the other way around too, right. You can put the drop shadow over here or with the regular state and then have the hover state appear to be a depressed state. If you did that, you would… copy this or cut it out. Paste it here… now, oh isn’t that interesting? I was thinking it’s just staying with it now. So you would actually have to redefine these as being zeros. Or actually, I suppose you could redefine this as white… ffffff. Yeah, you wouldn’t have to go redefine it. You just change that to white. And so now, it looks like it’s being depressed when you over it. It’s kind of cool anyway.

Okay so that’s the first section. Now we need to do exactly the same thing for the children’s menu. What I want to do is just going to copy this… let’s see. Let’s go over here, copy it, bring up our custom CSS, take the adult menu and paste it. And then just going to clean this up a little bit. You can see that the browser or that NetBeans doesn’t yet recognize border radius since it’s not universally accepted yet but… so there’s the adult menu, now we’re just going to recopy this whole thing, come down below it and then we’re going to search and replace in this selection. We’re going to find adult and we’re going to replace it with children’s. We’ll match the case and we’ll replace all, close. Okay so now we got all those children’s in there, let’s change this… okay, we’ll save this, we’ll upload it, upload the right one. And let’s take a look at it, see how it looks. Okay.

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