Drupal Consultant

Using CSS Tab Designer with Zen Theme

Submitted by ivan on Sun, 06/05/2007 - 15:40

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 print theme('menu_links', $primary_links); 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";

To

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

NOTE: I have attach a complete copy of style.css and template.php, also zen_diff_css_tabs.zip is a copy of the whole zen theme with different tabs.

Attachment	Size
style.css	10.02 KB
template.php.txt	7.12 KB
zen_diff_css_tabs.zip	162.07 KB

Tags:

Using CSS Tab Designer with Zen Theme

Tags in Category

Latest Articles

More like this