Color Individual Tabs on the Thesis Nav Bar

This article applies only to Thesis 1.5.1! If you want to color the individual tabs in the Thesis 1.6 menu, please see the article Color Individual Tabs on the Thesis 1.6 Nav Bar.

Many people want to change the background and font colors of individual tabs in the Thesis navigation bar. It is not a difficult task, and the colors can contribute to the overall color scheme of your Thesis blog.

Figure 1 shows the standard Thesis navigation bar before colors have been applied. The nav bar has been truncated so you can see the “Subscribe” word at the right end.

Figure 2 shows the same nav bar after the code below has been applied. Note that tab 6 remains uncolored and that the font colors of it and the “Subscribe” word are the default font color of the nav bar. Tab 5 is selected and has the gray color specified in the example code.

Using the code examples

All the following code goes into your custom.css file. If you want to color more tabs, just cut and paste the 4 lines for any tab and change the tab numbers.

Change the colors as you wish. The colors in the example are default css color words which are rather ugly! Remember that the color values are hex codes that begin with a pound sign (#) and have six numbers and/or letters, for example:

.custom ul#tabs .home-item a { color: #0FA7B3; }

Determining which tab is which

The home tab is always named “.home-item”. Page tabs start numbering with the tab to the right of the home tab, i.e the tab to the right of the home tab is named “page-item-1″. In Figures 1 and 2 it is the “About” tab. The next tab to the right is “page-item-2″ (called “Tab 2″ in the illustrations), and so on.

Category page tabs have their own unique way of numbering, and do not follow a logical counting scheme as do pages. The only way to find their address is with the Firebug add-on for Firefox. If you know how to use Firebug, find the “tabs” element. You will see the category tab addresses listed as “cat-item-00″ where “00″ is the number of the tab element, as illustrated in Figure 3.

If you don’t know how to use Firebug, leave a comment with your site’s URL and I will email your tabs’ names to you promptly.

Change the background and font color of unselected individual tabs

Following is the code to change the unselected background color and font color of the home tab and the four tabs to its right, as shown in Figure 2. Note that there is no code for the fifth and sixth tabs, so they remain uncolored when unselected. However, the fifth tab is selected in Figure 2, so it has the gray color specified in the next section, “Change the tab and font colors of the selected tab.” The last group of lines shows how to change the color of a category tab.

/* Change the home tab unselected color */
.custom ul#tabs .home-item { background: blue; }
/* Change the home tab unselected font color */
.custom ul#tabs .home-item a { color: pink; }

/* Change the about tab unselected color */
.custom ul#tabs .page-item-1 {	background: green; }
/* Change the about tab unselected font color */
.custom ul#tabs .page-item-1 a { color: white; }

/* Change the tab 2 unselected color */
.custom ul#tabs .page-item-2 { background: red; }
/* Change the tab 2 unselected font color */
.custom ul#tabs .page-item-2 a { color: yellow; }

/* Change the tab 3 unselected color */
.custom ul#tabs .page-item-3 { background: pink; }
/* Change the tab 3 unselected font color */
.custom ul#tabs .page-item-3 a { color: blue; }

/* Change the tab 4 unselected color */
.custom ul#tabs .page-item-4 { background: yellow; }
/* Change the tab 4 unselected font color */
.custom ul#tabs .page-item-4 a { color: green; }

/* Change a category tab unselected color */
.custom ul#tabs .cat-item-00 { background: yellow; }
/* Change a category tab unselected font color */
.custom ul#tabs .cat-item-00 a { color: green; }

Change the tab and font colors of the selected tab

You can change the background and font colors of the selected tab, too. In Figure 2, the fifth tab is selected, so it has the gray background and aqua font color of the example below. Both regular pages and category pages need to be changed.

/* Change the color of the currently selected tab (pages and category pages) */
.custom ul#tabs li.current_page_item { background: gray; }
.custom ul#tabs li.current-cat { background: gray; }
/* Change the font color of the currently selected tab (pages and category pages) */
.custom ul#tabs li.current_page_item a { color:aqua; }
.custom ul#tabs li.current-cat a { color:aqua; }

Change the tab and font colors when the cursor hovers over it

The background and font color of a tab can be changed when the cursor hovers over it. You can also change other properties, such as underlining and bold, with additional code.

/* Change the color of a tab when the cursor hovers over it */
.custom ul#tabs li a:hover { background: white; }
/* Change the font color of a tab when the cursor hovers over it */
.custom ul#tabs li a:hover { color: black; }

I hope this article has been helpful to you! Remember that you are invited to make a comments. You can also send me an email by clicking the “Contact” button in the nav bar.

©2009 Michael L Nichols. All rights reserved.

Related Articles

• Updated: Multilevel Menu with CSS and JavaScript (0)
• Two New Menu System Tutorials for You! (0)
• Tutorial: Vertical Multilevel Dropdown Menu (5)
• Tutorial: Multilevel Menu with CSS and JavaScript (41)
• Tutorial: Image Button Bar Menu/Submenu (0)

Tagged as: Menu, Menus, Thesis Nav Bar