Color Individual Tabs on the Thesis 1.6 Nav Bar

by Mike Nichols

The article about coloring individual tabs on the Thesis 1.5.1 nav bar has been been one of the most popular articles on Thesis Theme Tools.

Thesis 1.6 introduced a new menuing system, which includes dropdowns. Unfortunately, what works for Thesis 1.5.1 doesn’t work for Thesis 1.6, so a new article on coloring individual tabs has been a high priority.

If anything, Thesis 1.6 offers even more options for individually coloring the menu tabs and dropdowns than previous versions. As this article shows, almost everything about the new menu can be changed.

Figure 1: The standard Thesis 1.6 menu

Figure 1: The standard Thesis 1.6 menu

Figure 1 shows the standard Thesis 1.6 menu. Pretty dull, huh? It kind of fits in with most color schemes, but not really. You can change some tab colors in the Design Options, but only for the whole nav bar.

Figure 2: The Thesis 1.6 with individually colored tabs

Figure 2: The Thesis 1.6 with individually colored tabs

What if you could color the tabs individually? Figure 2 shows colored nav tabs as described in this article. Another example, the site ChampagneGossip (under development at the time of this writing), illustrates many of the things you can do to the standard Thesis menu with the methods below.

Preliminaries: Tab numbering and terminology

The Thesis tabs are identified in a curious fashion. As shown in Figures 1 and 2, the home tab is not numbered, but is named .tab-home. The second tab, which is the first tab to its right, is named .tab-1. The third tab, the second tab to the right of the home tab, is named .tab-2 and so on. So always count starting from the first tab to the right of the home tab when numbering the tabs in your code.

An unselected tab is one whose page is not currently showing. A selected tab is the one whose page is displayed at the moment. To hover is to hold the mouse cursor over the tab or dropdown item.

The background color is the color of the tab or dropdown itself. The color property is the color of the font.

Note that I have used standard CSS colors in the examples like “red” and “yellow” to keep things simple. You will want to substitute your own hex color numbers for these colors. The code examples are the same code used to produce the illustrations.

Coloring the background and font of individual unselected tabs

The following example shows you how to color the background and font color of the first three tabs individually when they are unselected. Of course, this code goes into your custom.css file:

/* COLOR UNSELECTED TABS */
/* home tab unselected background and font color */
.custom .menu .tab-home a {
	background: blue;
	color: pink;
}

/* second tab unselected background and font color */
.custom .menu .tab-1 a {
	background: green;
	color: white;
}

/* third tab unselected background and font color */
.custom .menu .tab-2 a {
	background: red;
	color: yellow;
}

Coloring the background and font of the currently selected tab

Figure 2 also shows the coloring of the currently selected tab, which is named “TAB 3.” The tabs will change to this color when their page is shown on the screen. This works for any selected tab, including Home, page-pages, and category pages. Alas, you cannot color the selected tabs individually:

/* CURRENTLY SELECTED TAB */
/* color of the currently selected tab background and font color */
.custom .menu .current a, 
.custom .menu .current-cat a { 
	background: purple;
	color: red;
}

Changing the background and font colors of individual tabs when the cursor hovers over them

Figure 3: Tab 1 (the second tab) with the cursor hovering over it

Figure 3: Tab 1 (the second tab) with the cursor hovering over it

Figure 3 shows the second tab, .tab-1, when the cursor is hovering over it using the code below. You can color each tab’s hover colors individually. The example below only shows you one tab, but you can figure out the rest of them, can’t you?

/* HOVER COLORS FOR INDIVIDUAL TABS */
/* second tab background and font when the cursor hovers over it */
.custom .menu .tab-1 a:hover {
	background: gray;
	color: green;
}

Changing the color of dropdown menus

Figure 4: Colored dropdown menu

Figure 4: Colored dropdown menu

The code below was used to color the background and font of the third tab’s dropdown, as shown in Figure 4. Each main menu tab’s dropdown can be colored individually. The colors of the entire dropdown are affected, not individual items. I have not found a way to color individual dropdown items — if someone discovers it, please let me know!

/* DROPDOWNS */
/* dropdown background and font color */
.custom .menu .tab-2 .submenu a {
	background: purple;
	color: white;
}
Figure 5: Hover color in a dropdown menu

Figure 5: Hover color in a dropdown menu

Figure 5 illustrates the hover color of an individual dropdown menu for .tab-2, the third tab. You can change the hover color of each tab’s dropdown individually. Here’s how to do it:

/* dropdown background and font color when the cursor hovers over it */
.custom .menu .tab-2 .submenu a:hover {
	background: pink;
	color: black;
}

Changing the color of the RSS Subscribe word

Figure 6: RSS Subscribe word colored

Figure 6: RSS Subscribe word colored

The RSS Subscribe word can be colored, too. Unfortunately, it loses the little RSS icon when you color it. The following code was used to color the RSS Subscribe word in Figure 6:

/* RSS background and font color */
.custom .menu .rss a {
	background: yellow;
	color: black;
}
Figure 7: RSS Subscribe word when the cursor hovers over it

Figure 7: RSS Subscribe word when the cursor hovers over it

Figure 7 shows the RSS Subscribe word when the cursor hovers over it when using the following code:

/* RSS background and font color when the cursor hovers over it */
.custom .menu .rss a:hover {
	background: orange;
	color: white;
}

Conclusion

I hope this article has been instructive and easy to follow. You are encouraged to leave comments below. If you want to email me directly, just click on the “Contact” tab in the menu.

©2010 Michael L Nichols. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!

Be Sociable, Share!