Welcome back to Part 7 of Lesson 6 of the Customize Thesis Like a Pro tutorial series. In this part of the lesson, we are going to finish our examination of CSS specificity and inheritance in the Thesis theme by looking at the classes that Thesis adds to each menu item and then looking at ways to style those menu items.
Thesis Default Menu Styling
The first thing to understand is that the Thesis theme offers us three levels of specificity that we can use in styling the menu. The first, the Thesis default, is menu wide. That is, you can style all the top level menus, items, and submenu items with a few selections in the Design Options and those settings will affect the entire menu. And that’s what we’ve been looking at so far as the Thesis default structures.
Levels of Thesis Customization in Menu Styling
However, the Thesis theme also offers us a group-wide specificity and there are a couple of different kinds of groups here that I’m talking about. The first groups are top level menus versus submenus in the Thesis navigation menu. So you can have one type of styling from the top-level menus and a completely different styling for all of the submenus. So that’s one type of grouping.
The other type of grouping is page links versus category links in the Thesis navigation menu. Thesis adds different styles to menu items that link off to pages than it does to menu items that link off to categories. And I’m not exactly sure why that’s the case but nevertheless, it does. And so you could style your category menu items and your page menu items separately from each other.
And then finally, it has the individual menu item level which means that any specific menu item can be styled with CSS differently from all the rest. And so you could even theoretically style every individual menu item differently from all the rest. The Thesis theme provides us with that level of control over the navigation menus.
Classes Thesis Adds to Menus
The way it does that is by adding two classes to each navigation menu item. It provides the element of the menu item and then it gives us a group class and then it gives us a unique class, a class that applies only to that specific menu item in CSS. So for example, on pages the top level menu items are LI .tab .tab 1 for the first tab and in categories it’s LI .cat item .cat item 1.
Top Level Menu Items for Pages and Categories
If we take a look for a moment at the structure of the navigation menu that we’ve been working on, you can see that we have, in CSS under UL menu, we have LI with a class of tab and tab 1 with a class of tab and tab 2. So tab is the group, tab 1 is the specific menu item. And then if we come down to the ones that’s related to the categories, you can see that it’s LI class cat item and then cat item 21. And in this case, this is the twenty first category and these category item names, they stay with the category. If this category was moved someplace else in the menu, this style would actually stay with that specific category rather than say stay with this location. Whereas tab 1 is always in the same place, tab 2 is always in the same place. That is not the way it works with categories. Cat item 21 is specific to a specific category and wherever it is in the menu, it’s going to be called the same.
Submenus for Pages and Categories
Submenus have a similarity to the way top level menus work. The submenus keep the same CSS syntax, it is element plus group class plus unique class which, in this case is for pages, it is UL .submenu .submenu 1. Now for categories, it’s different. Categories do not have a specific designator for each individual submenu in CSS. And so categories only have a group class, it’s UL .children.
Let’s look at the CSS again in Firebug and you can see that we have LI class tab tab 1 and then under that, there is a submenu. And so it’s UL class submenu submenu 1. Whereas, if we come over to the categories, and again, we’ve got the upper level category cat item, cat item 21, the submenu is children and this submenu designation is not unique to this submenu, it applies to every single submenu. Children is every submenu and this is going to receive a class of children and you can see that here. So there’s another submenu below this LI item and so the first submenu has a class of children and the sub submenu also has a class of children.
Submenu Items for Pages and Categories
The way the submenus here work for pages, these submenus represent not a specific submenu but a specific vertical location in the submenus. So if we hover over this specific example for a moment, everything in the first list or the first column is submenu 1. Everything in the second column and over is submenu 2. Everything in the third column over and is submenu 3 and so on and so forth. That’s the way this works so that the submenu is always the first column, submenu 2 is always the 2nd, submenu 3 is always the 3rd and so on and so forth. Well, that’s not the way it is with categories. It’s always children regardless of where we are in this string. Children is always that submenu.
Let’s take a look at the specific individual menu items and again, it’s the same CSS syntax – element, group class, unique class. So for pages, that is LI .item, which is the group class, .item 1, which is the unique class. And then for categories, it’s LI .cat item .cat item 2 or cat item whatever, whichever the number is for that catalog item. Now, if you were paying close attention, you’d notice that this looks like exactly the same structure as is used for the top level navigation and in fact, that is correct. LI .cat item .cat item 1, it’s the same structure and the same kind of class usage. And fortunately, these cat items, there can never be two with the same name. And so, we can still identify the specific one that we want to work with simply by using this number after the name.
That wraps up Part 7 of Lesson 6 of the Customize Thesis Like a Pro tutorial series.