Tag Archives: Thesis Nav Bar

Four New Articles! Thesis Tabs, Statistics, Subdomains & Installing Thesis

Here are 4 new articles for you on various subjects. As always, they are liberally illustrated with images that help you see as well as read the instructions:

  • Color Individual Tabs on the Thesis Nav Bar” Many users want to color the individual tabs on their Thesis navigation bar. This illustrated tutorial shows you how to do that, along with changing the font color. Also, you can change the selected tab and font colors. The article is found under the Tricks > Menus category.
  • Installing Thesis for the First Time” Installing Thesis can be a scary task for a newbie. This tutorial is a step-by-step guide with lots of illustrations that makes installation easy.
  • Find this article in the Newbies > Getting Started section.

  • Statistics Plugins and Services I Use” There are many questions on the Forum about SEO plugins and services. This article lists the ones I use, describes why I do, and rates their accuracy.
  • Look for this article under Tricks > Stuff I Use.

  • Subdomain Setup Using cPanel” Setting up a subdomain off your main domain can be a smart thing to do, especially for testing your Thesis customizations. This article steps you through setting one up with cPanel, the most popular program used by hosts. The information will be of use for other host programs, too. The article is found in Tips > Administration.

Coming up are articles on upgrading Thesis, editing files for newbies, tools for color schemes, creating favicons and more! Stay tuned…

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: Standard Thesis navigation bar
Figure 1: Standard Thesis navigation bar

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: Thesis nav bar after background and font colors are applied
Figure 2: Thesis nav bar after background and font colors are applied

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.

Figure 3: Finding the category tab address with Firebug
Figure 3: Finding the category tab address with Firebug

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.

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!