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.!

Yes it is possible, with some HTML and CSS tweaks of course. See the demo on ourwidget 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 class nameas the identifier. Here’s how:

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

Go to Template > Edit HTML > Proceed, click the Expand Widget Templates checkbox.
Locate your Pages gadget by finding this line of code:
Several lines below that you will find these code:

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

<liclass='selected'><aexpr:href='data:link.href'><data:link.title/></a></li>

<b:else/>

<liexpr:class='data:link.title'><aexpr:href='data:link.href'><data:link.title/></a></li>

Replace it with this one:

1 <li expr:class=’data:link.title + " selected"’>

<a expr:href=’data:link.href’><data:link.title/></a></li>

2 <b:else/>

3 <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.

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:

view sourceprint?

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

Enjoy!

Milan Tomic

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.