Redefining Drupal's primary and secondary task tab

Stephanie — March 26, 2008 - 10:46

When we started building our base theme for TopNotchThemes, the foundation on which all our Drupal themes would be built, polishing up the “Drupal default” (henceforth dubbed Drufault) was one of my top priorities. First target – primary and secondary task tabs. You'll most often see these tabs as a site administrator, when you're editing a node, user, view,ray ban 3244, etc. They're also exposed to your users most commonly on their My Account page, search, and registration/login screens.

Looking at the tabs from several other starter themes, I determined that we needed something both non-graphical and flexible. The traditional use of CSS borders and background colour to form a tab shape was a little tired looking, but it also had to be as simple as possible so that it could adapt to the wide range of designs our themes have.

I scoured the web looking for best practices for tabbed interfaces, and saw some damn ######y tabs. Then I hit on the perfect style.

Simple, clean, stylish. Very adaptable. Worked well for different colours, fonts, and from two tabs to dozens. It had to take into account there being no default tab selected, tabs that may wrap to more than one line, plus a smaller style of sub-tabs for secondary tasks.

Here's the CSS we ended up with:

#content-tabs { background-color: transparent; float: left; margin: 20px 0; padding: 0;
} #content-tabs ul.primary,
#content-tabs ul.secondary { border-bottom: 1px solid #000; clear: both; float: left; margin: 0; padding: 0 10px;
} #content-tabs ul.secondary { border-bottom: 1px solid #555; margin-top: 10px; text-transform: lowercase;
} #content-tabs ul.primary li,
#content-tabs ul.secondary li { border-style: none; display: inline; float: left; list-style: none; margin: 0 10px; padding: 0;
} #content-tabs ul.primary li a:link,
#content-tabs ul.primary li a:visited,
#content-tabs ul.secondary li a:link,
#content-tabs ul.secondary li a:visited { background-color: transparent; border: none; color: #000; float: left; font-size: 1.1em; line-height: 1.2em; font-weight: bold; margin: 0; padding: 0 0 6px 0; text-decoration: none;
} #content-tabs ul.secondary li a:link,
#content-tabs ul.secondary li a:visited { color: #555; font-size: 1em; line-height: 1.1em;
} #content-tabs ul.primary li a.active:link,
#content-tabs ul.primary li a.active:visited { border-bottom: 4px solid #000; color: #555; padding-bottom: 2px;
} #content-tabs ul.secondary li a.active:link,
#content-tabs ul.secondary li a.active:visited { border-bottom: 4px solid #555; color: #777; padding-bottom: 2px;
} #content-tabs ul.primary li a:hover,
#content-tabs ul.secondary li a:hover { border-bottom: 4px solid #777; color: #777; padding-bottom: 2px;
}
And a little conditional IE6 help:
div#content-tabs, div#content-tabs ul.primary,
div#content-tabs ul.secondary { display: block; float: none; height: 1%;
}