In this session, we show how to style and add CSS3 gradients to the Thesis navigation menu using a button generator and coping and pasting the code to custom CSS. We also show how to adjust and style the buttons by writing some additional CSS.
The first thing we’re going to do is we’re going to take this menu bar here and we’re going to lengthen it out. We’re going to round its corners and we’re going to put a CSS3 gradient in it starting from you know, one color to another. And we’re going to do that by looking at this website here. Pardon me, yes this website here. This website is csstricks.com examples button maker and it does all kinds of really cool stuff. This morning, I made a CSS version. I mean, well this looks like an image, doesn’t it? But it’s not an image, this is just CSS code using the new CSS3 standards. And this morning I made a button for both the submit button and for a link using this and tonight, I’m going to use this on the menu.
And so to get ourselves started off, I think I’m just going to use this. Well, no. We’re going to go ahead and pick a different color here, a different color scheme. I think I’m just going to make it a darker color scheme though. So I’ll drag this thing over to there and hit select. And then the bottom gradient color, I’m going to drag down to here and hit select. And I think the hover background color, we’re going to leave the same and the hover text color, we’ll go ahead and leave the same. But the way this works is that you drag these things around so this top one adjusts the padding around the button. This one adjusts the size of the text and then this one adjusts the radius of the corners.
And so I think we’ll stick it like this, yeah. I think we’ll just go ahead and do it like this and what we’re going to do first is we are going to take this style and we’re going to make a… we’re going to apply this style to the entire menu in one long horizontal bar.
So the way we do that is to copy the code and you copy the code by pressing on the button where it says view CSS. That brings up the code. We’re just going to come down here and copy the code. We don’t need the button active so we won’t grab it but we’ll copy the rest.
And we’re going to come back over here to our website and do this in Firebug and in Web Developer so let’s edit the CSS and let’s inspect our element. What we’re going to do is we’re going to apply that whole thing to UL class menu. So it’s not going to be applied individually to the LI items or to the links. We’re going to apply it specifically to the UL menu.
And so, let’s come over to custom CSS and we’ll just paste that code in. Now at the moment, that doesn’t really affect anything because we don’t have anything called button. And what we’re going to do is we’re going to change the name of this from button to UL menu. So it’s going to be .custom .UL menu. And so in fact, we’ll just copy that and replace it .custom and we’re going to say UL .menu.
So we’ve got the whole menu thing here. We need to adjust the font size. So let’s adjust our font size down to let’s see, what happens when we go down to 12? Yeah okay, that looks pretty good. So we go down to 12 with this and then what we need to do is change the background color for menu a. If you look at the element here, this is actually the place where that background color comes from. And so, where did that go? Yeah, that background color right here. If we got rid of that background color and that color… oh, this is not the right one.
But be that as it may, what we want to do is we’re going to take this same thing again and copy it, come down and it’s going to be UL menu a. And since we don’t want this little round thing happening here, what we’re going to do is get rid of the corners for the tabs themselves so that means in this case, we are going to get rid of the box shadow and the border radius. Okay and we’re also going to get rid of the background color or the top border.
And then for this part here, for the menu itself, what we’re going to do…let’s see, let’s get rid of all of the font related information because we don’t need it in this. And then we also don’t need the padding so let’s say 0 padding for a moment. Okay now we’ve started to line up here and you can see you’ve got a little problem with our hover here. So now what we want to do is we’ll take this custom UL menu a, copy that and then replace button .hover with that. So now what we have there is that hover behavior that we defined earlier.
Okay and so you can already see that we’re you know, developing our nice little bar here. I think the next thing I would do would be to increase the padding on either side. And so we say maybe we take it up to 40. There we go. So now we’ve got 40 pixels on either side and so we have something that stretches from you know, one side or the other and we have an interesting hover behavior here.
And then we just want to get rid of how it affects this stuff. That is, we don’t want this, the drop downs to turn out like this. So in that case, what we’ll do is the drop downs are called submenu. So what we’re going to do is take our custom UL menu a, copy that and instead of UL menu, it’s going to be submenu. And it’s not going to be a hover, it’s going to be a.
And then let’s see, what else do we want to change about that? Actually, rather than being this color, maybe what we should do is make it the light color at the bottom of this. So the way this gradient works is that this is the top color of the gradient and this is the bottom color. So I’m just going to grab that bottom color and come over here and give it to this. Okay so we have that lght color and then when we hover over, we get the dark color. And I think we probably want to just… about the padding, let’s take it down to 20 pixels. Padding: 20 px because that extra padding is… oh, I guess it isn’t. I thought maybe that extra padding was doing something to it but it isn’t, okay.
Okay so that’s how we can use this one facility, that button facility to style the nav menu as a radius bar, right? The reason why we used that tool in particular is you can see that there’s actually a fair bit of heavy lifting involved in writing this stuff out. You know, you have to… you have a background color which is sort of the default and then you have a web kit gradient and then you have a web kit linear gradient and then you have a moss linear gradient and then you have a Microsoft linear gradient and then you have the Opera linear gradient. You know so you’ve got all these different things that need to go in in order to make this display.
And so the tool automatically does that for you. Now I’m going to go ahead and copy this code and put it in the forum later.