This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
Welcome to Lesson 10 of the Build Your Own E-Commerce Website tutorial series. The goal of this tutorial series is to show you how to create a fully functional ecommerce website using WordPress, Thesis and WP eStore.
This is the fourth of the tutorials on styling your new ecommerce website. In these tutorials we’ll be styling the site to match the demonstration site and obviously you won’t be creating your store exactly like this but it is my hope that by going through the exercise you’ll learn how to style your own site the way you want.
In this lesson we’ll be looking at styling the navigation menu. This lesson is taught using Thesis 1.8 but if you’re still using 1.7 the differences in this section aren’t significant so you should be able to follow along anyway.
In the first part of this lesson we’re going to look at the structure and elements of the Thesis navigation menu especially as it relates to menu items for pages. In order to understand the structure there are really four big divisions that you kneed to know. The first is the HTML Structure, then the Link Behavior, the General Styles and finally there are the Specific Styles. We’re going to talk about the first three of those today.
The HTML structure
Come on over to this website that I created for visualizing these structures. It is thesiscss.com, and we are going to look at the navigation structure.
Now the navigation structure in Thesis is made up of an unordered list with ul .menu being the highest organizational structure. So ul .menu is an unordered list and each of the tabs across the top are li items of ul .menu. That means each of these tabs is .menu .li and then subpages are submenus of the main ones. The submenu is in general .menu ul. You could also refer to this upper level, which is the first submenu below the menu, as menu .li ul. Inside of each of those submenus, this .menu ul is a subpage which is .menu ul li.
If one of those subpages has a submenu below that we’d go to the next level of nested unordered lists. Then we’re at unordered menu ul ul and each of the subpages inside of that could either be referenced as menu ul ul li or as menu ul li. Now this sounds kind of complicated but what you can see is the hierarchy of it, right? You’ve got the ul menu and then ul menu li and then ul menu li ul and so on and so forth. So that’s the HTML structure. It’s just a set of standard nested unordered list items.
The Link Behavior
Next we come to the link behavior. If we look at General Styling for just a moment link behavior has to do with what the display of each individual menu item is going to look like. Link behavior comes pretty much in four flavors. The first is the standard link behavior and that is actually .menu a. That is it’s a link inside of .menu and so that is the standard default definition of the link.
Then you have the hover definition. Under a normal link if you hover over it, it changes color and that’s its hover condition. Its hover condition is governed by .menu a:hover.
The third link behavior is the current link. That is the link that represents the page you’re actually on and that is .menu current a. Then you have the parent link which is the link of the parent page of the menu item you are hovering over.
For example, if we come over and look at the site that we’re working on, this right here Our Products currently is the default behavior; that’s the default link and if we hover over Customer Support that is the hover condition. Then the current condition – we’re on the home page right now – the current condition is that it looks white. If we go to the Customer Support page then this is the current page and that’s its current condition and Home becomes a standard link.
Then you have the parent condition. For example, if we select Products that is the current link. But if we select Books now Our Products is the parent page so it gets the parent condition and becomes this other color.
So those are your four colors. You have the standard default behavior, you have the hover behavior, you have the current behavior and you have the parent behavior.
The General Styles
Then finally what we’re going to talk about is general styles. Come back over here to thesiscss and take a look at Granular Styling. Thesis assigns a class name to all of the menu elements and it has general class names and specific class names. The general class name of the upper level menu items for pages is tab. So that’s why you see .menu .tab, that refers to all of the top level links and none of the bottom level links – all of the top level links of pages. As it turns out Categories is different and it does not have tab. Categories has category item or cat- item as its definition. We’re not going to talk about categories much beyond this. We’re just dealing specifically with pages.
The general definition for the top level menu items is tab. In order they have tab-1, tab-2, tab-3 and tab-4 are assigned to each of these tabs in order. So if you want to identify a specific tab and give it a specific condition you certainly can by referencing its specific number.
Anyway, general top level items are menu. The next level down inside of that is the submenu and the pages inside of the submenu are items. So you have menu as the overall, you have menu .tab, you have .submenu and you have item as the three principal divisions. Then each of those things can be individually numbered and identified as well but we’re not going to worry about that in this lesson.
So if we jump back over here and take a look at this these are all tabs, this is a submenu, e-Books is an item and those are the general styles that are assigned to the menu elements.
That wraps up Part 1 of this lesson, Understanding the Structure of the Thesis Navigation Menu.