Using CSS Tab Designer with Zen Theme

With the zen theme you can use CSS tab Designer to customize the primary to what ever you want, from this:

To:

These tabs are generated from CSS tab Designer program. Step1: Download and install CSS Tab Designer.

Go to http://www.highdots.com/css-tab-designer and download the zip file and install the program (currently only for windows). Once installed play around with it and check out all the different tab styles. Select a style and go to File -> Generate HTML and save the files anywhere on your computer.

Step2: Customizing Zen Theme.

Make sure you have a working install of drupal and the zen theme, test this before starting.

Step3: Perform theme function override.

If you go to page.tpl.php (in the zen folder) you’ll see that is what creates the primary menu items. What we are going to do is override the menu_links function and add our own copy in template.php.

Go to http://api.drupal.org/api/5/function/theme_menu_links or below and grab a copy of the code:

function theme_menu_links($links) {
  if (!count($links)) {
    return '';
  }
  $level_tmp = explode('-', key($links));
  $level = $level_tmp[0];
  $output = "<ul class=\"links-$level\">\n";
  foreach ($links as $index => $link) {
    $output .= '<li';
    if (stristr($index, 'active')) {
      $output .= ' class="active"';
    }
    $output .= ">". l($link['title'], $link['href'], 
    $link['attributes'], $link['query'], $link['fragment']) ."</li>\n";
  }
  $output .= '</ul>';
  return $output;
}

Go to template.php and paste the function theme_menu_links code at the end of the file. Once pasted change the function name from theme_menu_links to phptemplate_menu_links. So the function should look like this in template.php:

function phptemplate_menu_links($links) {
  if (!count($links)) {
    return '';
  }
  $level_tmp = explode('-', key($links));
  $level = $level_tmp[0];
  $output = "<ul class=\"links-$level\">\n";
  foreach ($links as $index => $link) {
    $output .= '<li';
    if (stristr($index, 'active')) {
      $output .= ' class="active"';
    }
    $output .= ">". l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment']) ."</li>\n";
  }
  $output .= '</ul>';
 
  return $output;
}

The HTML generated from CSS tabs Designer wraps the menu text around a span tag.

<div id="tabsF">
  <ul>
  <!-- CSS Tabs -->
    <li><a href="home.html"><span>Home</span></a></li>
    <li><a href="products.html"><span>Products</span></a></li>
    <li id="current"><a href="services.html"><span>Services</span></a></li>
    <li><a href="support.html"><span>Support</span></a></li>
    <li><a href="order.html"><span>Order</span></a></li>
    <li><a href="about.html"><span>About</span></a></li>
  </ul>

We’ll have to change the l() function in phptemplate_menu_links to allow HTML in the title, so change the l function from:

$output .= ">". l($link['title'], $link['href'], $link['attributes'],
$link['query'], $link['fragment']) ."</li>\n";

$output .= ">". l('<span>'.$link['title'].'</span>', $link['href'],
$link['attributes'], $link['query'], $link['fragment'],$absolute, $html = TRUE) ."</li>\n";

Step4: Changing style.css Go to your folder where you saved the generated HTML and images from CSS tab Designer and move the images to /themes/zen/images there should only be 2 image files(tableftF.gif,tabrightF.gif).

Open the style.css file and go to line numbers 251 to 291, this is all the style for the primary links:

#primary {
  font-size: 85%;
  line-height:normal;
  padding:0px 0px 1px 20px;
  border-bottom:4px solid #2763A5;
}
 
 
 
#primary ul {
  padding:0;
  margin:0;
  list-style:none;
}
 
#primary li {
  display:inline;
}
 
#primary a {
  background:#6DA6E2 url(images/tabs.gif) repeat-x;
  color:#FFF;
  font-weight:bold;
  display:block;
  float:left;
  padding:5px 14px 5px 14px;
  margin: 0px 1px 0px 0px;
  border: solid #6191C5 1px;
  border-width: 1px 1px 0px 1px;
}
 
#primary a {
  background-position:0% 0px;
}
 
#primary a:hover {
  background-position:0% -42px;
  text-decoration:none;
}
 
#primary a.active {
  background-position: 0% -84px;
}

The code above will be replaced by (which is from CSS tab Designer):

#tabsF {
  float:left;
  width:100%;
  background:#efefef;
  font-size:93%;
  line-height:normal;
  border-bottom:1px solid #666;
  }
#tabsF ul {
  margin:0;
  padding:10px 10px 0 50px;
  list-style:none;
  }
#tabsF li {
  display:inline;
  margin:0;
  padding:0;
  }
#tabsF a {
  float:left;
  background:url("tableftF.gif") no-repeat left top;
  margin:0;
  padding:0 0 0 4px;
  text-decoration:none;
  }
#tabsF a span {
  float:left;
  display:block;
  background:url("tabrightF.gif") no-repeat right top;
  padding:5px 15px 4px 6px;
  color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
  color:#FFF;
  }
#tabsF a:hover {
  background-position:0% -42px;
  }
#tabsF a:hover span {
  background-position:100% -42px;
  }
#tabsF #current a {
  background-position:0% -42px;
  }
#tabsF #current a span {
  background-position:100% -42px;
  }

Before any of it will work change #tabsF to #primary and url(“tabrightF.gif”) to url(“images/tabrightF.gif”) and url(“tableftF.gif”) to url(“images/tableftF.gif”). The code should look like the following:

#primary {
  float:left;
  width:100%;
  background:#efefef;
  font-size:93%;
  line-height:normal;
  border-bottom:1px solid #666;
  }
#primary ul {
  margin:0;
  padding:10px 10px 0 50px;
  list-style:none;
  }
#primary li {
  display:inline;
  margin:0;
  padding:0;
  }
#primary a {
  float:left;
  background:url("images/tableftF.gif") no-repeat left top;
  margin:0;
  padding:0 0 0 4px;
  text-decoration:none;
  }
#primary a span {
  float:left;
  display:block;
  background:url("images/tabrightF.gif") no-repeat right top;
  padding:5px 15px 4px 6px;
  color:#666;
  }
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#primary a span {float:none;}
/* End IE5-Mac hack */
#primary a:hover span {
  color:#FFF;
  }
#primary a:hover {
  background-position:0% -42px;
  }
#primary a:hover span {
  background-position:100% -42px;
  }
#primary #current a {
  background-position:0% -42px;
  }
#primary #current a span {
  background-position:100% -42px;
  }

Replace the all the CSS code between lines 251 to 291 with the code above in style.css.

Share this: