Build Your Own Business Website header image

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

Difficulty Level -

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.

Community Library Website – Case Study Part 1 – Site Organization
Community Library Website – Case Study Part 2 – Create Custom Post Types
Community Library Website – Case Study Part 3 – Custom Post Type Configuration
Community Library Website – Case Study Part 4 – Custom Taxonomy Decisions – Theory
Community Library Website – Case Study Part 5 – Custom Taxonomy Decisions – Practical Application
Community Library Website – Case Study Part 6 – Incorporating Existing Data Into the Project
Community Library Website – Case Study Part 7 – Creating Hierarchical Custom Taxonomies
Community Library Website – Case Study Part 8 – Creating Non-Hierarchical Custom Taxonomies
Community Library Website – Case Study Part 9 – Creating Custom Post Meta
Community Library Website Case Study – Part 10a – Restore the Database Using BackupBuddy
Community Library Website Case Study- Part 10 – Creating Custom Post Meta – Continued
Community Library Website – Part 11 – Importing Existing Data to the Website
Community Library Website – Part 12 – Prepare Existing Data for import by the CSV Importer plugin
Community Library Website – Part 13 – Import Existing Data Using the CSV Importer Plugin
Community Library Website – Case Study Part 14 – Date in Permalink Configuration
Community Library Website – Part 15 – Importing Images
Community Library Website – Part 16b – Final Data Import
Community Library Website – Part 17 – Add Thesis Post Meta to Custom Post Type
Community Library Website – Part 18 – Add WordPress 3.0 Menus
Community Library Website – Part 19 – Add Post Meta and Taxonomy Information to the Post Display
Community Library – Part 20 – Add topics and audience to book display
Community Library – Part 21 – Display the Rest of the Post Meta in the Post
Community Library Website – Part 22, Create the Permalink Structure
Community Library – Part 23 – Remove Custom Post Meta from Post Display
Community Library Website – Part 24, Add Taxonomy and Post Meta Data to the Teaser
Community Library Website – Part 25, Add Taxonomy Data to the Teaser
Community Library Website – Part 26, Adjust the Teaser Styling Using Design Options
Community Library Website – Part 27, Styling the Teaser Using CSS
Community Library Website – Part 28 – Fine Tune the Teaser Display
Community Library Website – Part 29, Designing a Custom Catalog Page
Community Library Website – Part 30, Using a Query String in a URL
Community Library Website – Part 31, Adding Custom WordPress Menus
Community Library Website – Part 32, Add Custom Menus to the Catalog Page
Community Library Website – Part 33, Add Another Custom Menu to the Catalog Page
Community Library Website – Part 34, Troubleshooting Custom Menus
Community Library Website – Part 35, Add Styling to WordPress Menus
Community Library Website – Part 36, Add HTML Markup to WordPress Menus
Community Library Website – Part 37, Add WordPress Menus to Archive Pages
Community Library Website – Part 38, Add and Style a List of Tags
Community Library Website – Part 39, Add a Search Box to the Sidebar
Community Library Website – Part 40, Add Links to the Sidebar
Community Library Website – Part 41, Add Taxonomy Drill Down Browsing
Community Library Website – Part 42, Custom Loop to Display Custom Post Types
Community Library Website – Part 43, Simple Custom Query
Community Library Website – Part 44, Custom Taxonomy Query
Community Library Website – Part 45, Add Thesis HTML Structure to Teasers
Community Library Website – Part 46, Display Posts from the Last 60 Days
Community Library Website – Part 47, Custom Loop If Have Posts
Community Library Case Study – Part 48, Increase the Number of Posts that Display on the Custom Catalog
Community Library Website – Part 49 – Naming Conflicts in Custom Taxonomies
Community Library Website – Part 50 – Find and Replace Semi-colons in the Database
Community Library Website – Part 51 – Modify Taxonomy Names Directly in the Database
Community Library Website – Part 52 – Sort Posts by Meta Value
Community Library Website – Part 53 – Show the Term Label Only when a Term Exists
Community Library Website – Part 54 – Sort Archive Posts by Meta Value
Community Library Website – Part 55 – Add Sort Order to Custom Taxonomy

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

Leave a Comment