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 <?php 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:

<

p>
function theme_menu_links($links) {
if (!count($links)) {
return '';
}
$level_tmp = explode('-', key($links));
$level = $level_tmp[0];
$output = "

\n";
foreach ($links as $index => $link) {
$output .= '
• ". l($link['title'], $link['href'],
  $link['attributes'], $link['query'], $link['fragment']) ."

\n";
}
$output .= '

<

p>';
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 = "

\n";
foreach ($links as $index => $link) {
$output .= '
• ". l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment']) ."

\n";
}
$output .= '

';

return $output;
}

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

• Home
• Products
• Services
• Support
• Order
• About

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']) ."\n";

To

$output .= ">". l(''.$link['title'].'', $link['href'],
$link['attributes'], $link['query'], $link['fragment'],$absolute, $html = TRUE) ."\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.