Styling individual page tabs on Blogger

Changing the appearance of page tabs on Blogger is relatively easy. It can be done via template designer’s built-in menus or using custom CSS. However, the changes will be applied to all tabs.

What if you want to style each tab individually? Let’s say you want to use a different font or color on just a single tab, or add a different background image to each tab, or perhaps you fancy multi-colored tabs like the one on USA Today’s website. Is it possible?

USA Today’s multi-colored navigation tabs

Yes it is possible, with some HTML and CSS tweaks of course. See the demo on our widget showcase blog. Notice that “SEO Tools” tab has a different background color than the rest of the tabs.

This tweak is a two-step process and is limited to Layout templates only (it won’t work on Dynamic templates). Firstly you need to assign an identifier to each tab by editing the Pages gadget template HTML. Once you’ve done that, you can apply a unique style to any tab by referencing it’s identifier in CSS.

Let’s get to work:

1. Assigning a unique identifier(s) to each tab

For you to be able to target each tab individually in CSS, each tab has to have an identifier, and it has to be unique. In our case we will use a classname(s) as the identifier. Here’s how:

Update Nov 2012: Selected tab now keeps your custom tab styling.

1. Go to Template > Edit HTML > Proceed, click the Expand Widget Templates checkbox.
2. Locate your Pages gadget by finding this line of code:

   <b:widget id='PageList1' locked='false' title='Pages' type='PageList'>

3. Several lines below that you will find these code:

   <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
   <b:else/>
   <li expr:class='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li>

4. Replace it with this one:

   <li expr:class='data:link.title + &quot; selected&quot;'><a expr:href='data:link.href'><data:link.title/></a></li>
   <b:else/>
   <li expr:class='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li>

What the new code does is adding the title of each tab to the tab’s classname, thus enabling each tab to be referenced by it’s title later.

2. Applying the styling

To style a tab, go to Template > Customize > Advanced > Add CSS and enter a CSS snippet into the custom CSS box. The snippet should be of the following format:

.PageList li.TAB_NAME a {PUT CSS DECLARATIONS HERE}

in which:

• TAB_NAME is the name/title of the tab that you want to style differently. Remember classnames are case sensitive, so make sure you enter the name as you did when you created the pages.
  
• CSS DECLARATIONS are whatever property:value combinations you like to apply -background color, background image, text color, font etc.. The possibilities are endless.

For example if you want to color your “Contact” tab’s background orange, the code required is this:

.PageList li.Contact a {background-color: #FF8000;} 

For a multiple-word tab name, each word will become a classname. So if your tab’s name is “SEO Tools”, you can reference the tab either by using:

• "SEO", like this:

  .PageList li.SEO a {background-color: #FF8000;}

• or "Tools", like this:

  .PageList li.Tools a {background-color: #FF8000;}

Enjoy!