Welcome back to the eighth and final part of Lesson 6 of the Customize Thesis Like a Pro tutorial series. In this final part of the lesson, we are going to look at specific examples of styling individual navigation menu items using the classes that the Thesis theme adds to each individual menu item.
Top Level Menu Items in the Thesis Navigation Menu
Let’s look at the site we’ve been playing around with. First, we’re going to look at the top level menu items keeping in mind that pages are different than categories. We’ll go ahead and start off with a page. Let’s say .custom .tab and then say background color red. Now why didn’t that turn red? Why didn’t anything happen? Remember that the Thesis theme uses the a link for establishing background color. So what we really need to do is add the a. I’ve seen that a couple of times before so it’s sort of a trick question. And in this case, custom .tab a identifies all of the top level tabs and in fact, it colors every a that is a descendant of anything with a .tab this background color red.
And so every link to a page in this menu meets that standard. That is, every single one of these links is an a and they are all descendants of some selector with a class of tab. If inspect the CSS in Firebug, you can see that each one of these four upper level navigation menu items have tab as a class name. So any link that’s inside of them is going to be colored red.
Styling Individual Menu Items with CSS
Let’s say we don’t want to style every page link in the menu the same color and instead address only this first menu item. So we take that tab and change it to tab 1 and now, every a element, every link that is inside of or is descendant of something with a class name of tab 1 is going to be red. So that means everything under tab 1 will be red.
If we want to select only this tab and nothing below it, we need to go to another level of specificity. We create another level of specificity in CSS by using the child selector which is something that you haven’t yet seen before in this class. This is actually a descendant selector which means that every a that is a descendant of tab 1 is going to be colored red.
Styling with CSS Using Child Selector
What we want is to say that every a that is an immediate child of a selector with a class of tab 1, should be red. And the way you indicate that immediate child versus every descendant in CSS is with the greater than sign. So now custom .tab 1 greater than sign a means that every a that is an immediate child of anything with a class of tab 1 will get this background color. An example of that then is tab 1 because the only link that is an immediate child of this tab 1 is the link inside of tab 1. And so nothing else is affected by it any longer. So if you want to reference only a specific top level navigation tab, you need to use .custom .tab 1 greater than sign a.
Let’s look at that in the context of cat items. If we say .cat item a and background color red, every link inside of anything with the class of cat item is going to be red. Every one of these things is red because every one of them is inside of something with a class of cat item. If we want to be more specific again, we can add cat item .21 and now that will grab the entire chain of elements inside of cat item 21. Just like before, if we want to select the specific link of the top catalog item then we add the greater than symbol. And now, only those links that are immediate children of cat item 21 will get this style.
Styling Submenus with CSS
Next, let’s take a look at styling submenus with CSS. For pages, it would be custom submenu a and if we say background color green, we’ll make every link inside of something with a class of submenu become green. And that means that everything below the upper level is inside something with a class of submenu and therefore, whether it’s tab 1, 2, 3, or 4, everything below it is going to be green. So this is a way of styling every submenu item under the top level with the same style.
If you wanted to specify a specific navigation menu, let’s say submenu – 1, it could do that. Submenu – 1 and see what the difference is. In fact, there is no difference and the reason is that every submenu item is a descendant of submenu item 1. So you need something else then for the next submenus. Let’s say submenu 2 and make it brown. Now submenu 1 is green, submenu 2 is brown and everything that is a descendant of submenu 2 is brown. We could take the next step with submenu 3 and make it pink and so on and so forth.
Again, this is showing inheritance. Everything that is a descendant of submenu 1 is going to get this background color of green unless we become more specific. And now we reference submenu 2 and then everything that is a descendant of submenu 2 is going to get brown unless we become more specific and specify submenu 3.
Styling Categories with CSS
If we look at this in terms of the category items as well, we could say children a and background color green. And now, all of the children, in the same way, are green. Because we can’t say children – 1 or children – 2, we need to end up specifying children of individual category items. So we could say, we want category 25 and everything to be red. We could say cat item 25 and not red, what do we say? Let’s say brown. So everything except that stuff that is a descendant of category item 25 is going to be green.
Let’s say what you really wanted was this band here to be brown and this band to be yellow. You would actually have to become more specific because right now, this is green because it is a descendant of cat item 24. And this is brown because the link is a descendant from category 25. But 26 is not a descendant of category 25. So if you want to make both 25 and 26 brown, you have to add a level of specificity and you also have to move the one that you’re actually referencing.
For example, if we went to 24, now everything beyond 24 is brown, right? Well, if we want 25 and 26 to be brown but not 24, then we add an element which would be specific to descendants of 25 and 26 but not specific to the link in 24. That sounds more complicated than it is. Simply add UL to this and now what this says is make every link element that is a that is a descendant of UL item 24, make that brown. This link is not a descendant element. That is the link in category link 24 is not descendant of a UL element that is inside of category 24. It’s in there directly. So once we insert this UL here, we’re actually excluding the link inside of cat item 24 and we’re only including links that are descendants of UL category item 24.
If you wanted to take it to the next step and say that these two here be pink, then what you would do is the same thing for category item 25 because they are descendants of it. You would simply take this, copy it, paste it, make it 25, and make it pink. And now you have this one green, this one brown, this one pink.
Styling Individual Menu Items with CSS Using Child Selector
Now we’re going to look at the specific individual navigation menu items. For example, if you want to get to a specific tab or the specific category, then it would be custom .tab descendant selector or child selector a and in the same way with the categories. Well, that also applies to individual elements inside of these menus.
If we wanted item 10 to be red, we’d start off, for example, with .custom item a background color red. That is essentially the same thing as saying up here, submenu where we wrote .custom .submenu, made everything a single color. Well, item is essentially the same thing except that it addresses the items rather than the submenus. You can see that because of the order in which item in here is placed, it has overridden classes in CSS that we specified earlier because they all weigh the same, right? So if we look at custom item a and custom submenu 2 a, those have two classes and a selector. This has two classes and a selector and so the weight is the same and therefore, the order takes precedence.
Let’s be more specific. Let’s say item 10 a background color red. Now all of the descendant selectors, all of the a elements that are descendants of item 10, will become red. That includes this a element and everything else that follows whereas, all the rest of them keep their same styling. Now if we want this to only be a and nothing else, we would add that child selector again. Now, you can see that we are referencing only this one individual submenu element and not any of the rest. Items are very much like submenus and tabs in that regard, if you select the immediate child, you’re going to get a different result. Then you can reference just that one tab.
Unfortunately, again in this case, order matters. If we were to take custom submenu 1 and put it in front or put it after this, it would in fact take precedence over that and make this red go away. So the way you beat that is by making this more specific and you have two options for making it more specific. You do that by adding an element and so, in this case, you could add the LI element to this. Now, you’d want to add the LI element that has item 10 added to it. An LI item with a class of item 10 and its child selector a, the background color’s going to be red and now that takes precedence over this one which follows later because you are now two classes and two elements versus two classes and one element.
Instead of doing two elements, you could simply add another class to this as well. So you could say .submenu because this is also in a class of submenu, in fact, you might be better off saying submenu 1. This item 10 is a descendant of submenu 1 so the only a that is an immediate child of item 10 which is a child of submenu 1 is this one instance. That’s another way of this becoming more specific.
We have exactly the same issue with categories here. We’ll just grab category 21 and move it down here. And then if we want to specify a specific category, we’ve got 21 a here. If we want to get to 24, we would make that 24 and that specifies this one individual selector.
However, if we take the rule that makes this green and put it ahead of that, it’s going to override that. So let’s go look for that here for a moment. That’s children. If we take children down here and we need to add .custom to it if we want it to be on the same level, you’ve got two classes and an element this one is after. So it’s going to take precedence and you can see that 24 is no longer green. What you need to do then is to add a level of specificity to this here and you can add specificity exactly the same way. You can add specificity by saying LI and by adding an element and so now that works. Or we could add specificity by adding a class, for example, cat item. That will also add a level of specificity that this does not overcome.
As you can tell, this can be pretty complicated and there’s a lot to try to remember. Please feel free to come over to the site and use it for practice. All you have to do is open up Web Developer, go to custom.css and delete all the rules in here and you’ll be able to experiment. That’s one of the reasons why I put this up. You can find it at navmenu.byobwebsite.com and I think just about every potential combination is represented and you can look at my css to see how I got there.
That wraps up Lesson 6, Examples of Styling Elements of the Thesis Theme Navigation Menu, of the Customize Thesis Like a Pro tutorial series.