The sliding door technique has worked well for Zen's tabs for years. But its time to convert the tab styling to CSS3. This will improve the front-end performance of all sub-themes as they won't have to download a handful of images.



definitely agree on this one, it will help get rid of the annoying ie6 tab code & images too, falling back to basic functional tabs

Status:Active» Needs review
new9.67 KB

Here is my go at css3 tabs for zen

just the primary tabs for now, and I am using compass imports for cross browser support.. tweak as desired!

here is the added support for color mods. just enter the $tabs-color, the $tabs-text-color and the $page-bg

@import "compass/css3/border-radius";
@import "compass/css3/text-shadow";
@import "compass/css3/transition";
@import "compass/css3/images";
$tabs-color: #dedede;
$page-bg: white;
$tabs-text-color: #333333;
ul.primary {
  border-bottom: 1px solid darken($tabs-color, 14%);
  height: 26px;
  padding: 0 0 0 4px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: visible;
  font-size: 90%;
    li {
      @include border-top-radius(4px);
      @include single-text-shadow(lighten($tabs-color, 30%), 1px, 1px, 0);
      float: left;
      margin: 0 3px 0 0;
      border: 1px solid darken($tabs-color, 14%);
      border-bottom: 0px;
      position: relative;
      z-index: 1;
    &.active {
      z-index: 3; }
    a {
      &:link, &:visited {
        color: $tabs-text-color;
        border-color: lighten($tabs-color, 8%);
        @include transition(background-color 0.3s);
        @include border-top-radius(4px);
        background: adjust-color($tabs-color, $lightness: 0, $saturation: -10);
        float: left;
        height: 24px;
        letter-spacing: 1px;
        line-height: 24px;
        margin-right: 0; // override drupal default margin
        outline: none;
        text-align: center;
        text-decoration: none;
      &:hover {
        background-color: lighten($tabs-color, 4%);
        border-color: lighten($tabs-color, 8%);
      &:focus {
        background-color: lighten($tabs-color, 8%);
    &.active a {
      &:link, &:visited {
        @include transition(background-color 0.3s);
        @include background-image(linear-gradient(lighten($tabs-color, 2), $page-bg));
        background-color: $page-bg;
        border: solid 1px $page-bg;
.ie6 ul.primary li {
    top: 1px;

Status:Needs review» Needs work
new59.41 KB

ul.primary needs a display:inline-block in order for tabs spanning 2 levels to avoid text floating up next to the last tab.

There also seems to be another slight problem when tabs span 2 levels, the second level pushes over to the right of the selected block, screenshot attached

Status:Needs work» Needs review
new28.5 KB

Thanks for the start on this, Kris!

I've taken what you started and finished it up. (Mostly.) I haven't tested in any version of IE yet. :-p

I went ahead and pushed the changes to 7.x-5.x. Here's a screenshot.

It could use some eyeballs as I'm a bit tired, atm.

very nice work John, that looks great! Woot, so glad to see this going forth, man those old tabs stuck around too long.

Status:Needs review» Fixed

I just tested this in IE6. It's not perfect. The active tab colors are off. But they are totally functional.

Also tested this in IE9. Looks fine there (minus the gradients).

So, I'm going to close this. I look forward to bug reports. ;-)

Duh. The @import statements at the top of tabs.scss need to be moved to the base partial. Doing that now.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Component:CSS/HTML markup» layout.css

Just dropping by to say it is gorgeous. Congratulations!