Tabs - I would like to be able to have nice tabs.

When I enable the tabs, the product titles are just listed.

I would like to style my tabs adding images. Can anyone guide me in doing this, or have a template I can follow?.

Thanks for the help!

It's all in the CSS. I've been trying to do this for days myself, but I haven't gotten it to work good yet. I'm sure it would be fairly simple if you're good with CSS.

I tryied to fallow a template @ http://www.alistapart.com/articles/slidingdoors/
but its using unordered list to make it work. And Zen Cart does not generate UL for the product titles.

How are you getting it to work so far?

Take a look at YOURTEMPLATE -> tpl_modules_categories_tabs.php

the <ul> <li></li> </ul> calls are there.

You need to style them in you CSS stylesheet.

as a starting point with the styling, the current stylesheet looks like this:

#navCatTabs ul  {margin: 0;	padding:  0.5em 0em;	list-style-type: none;	text-align: center;	line-height: 1.5em;}

unvecino:

I tryied to fallow a template @ http://www.alistapart.com/articles/slidingdoors/
but its using unordered list to make it work. And Zen Cart does not generate UL for the product titles.

How are you getting it to work so far?

I think Zen Cart uses the same sort order you give the categories for the tabs. I was just playing around with the fields clydejones mentioned and a few others. But I'm just not getting what I want yet. I also downloaded something called CSS Tab Designer 2 to get some ideas.

clydejones I do not see where in the categories_tabs.php
it is calling out the products as an UL.

Below the categories_tabs.php page.

Thanks for the help.

$order_by = " order by c.sort_order, cd.categories_name ";

$categories_tab_query = "select c.categories_id, cd.categories_name from " .
TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
where c.categories_id=cd.categories_id and c.parent_id= '0' and cd.language_id='" . $_SESSION['languages_id'] . "' and c.categories_status='1'" .
$order_by;
$categories_tab = $db->Execute($categories_tab_query);

while (!$categories_tab->EOF) {

// currently selected category
if ((int)$cPath == $categories_tab->fields['categories_id']) {
  $new_style = 'category-top';
  $categories_tab_current = '<span class="category-subs-selected">' . $categories_tab->fields['categories_name'] . '</span>';
} else {
  $new_style = 'category-top';
  $categories_tab_current = $categories_tab->fields['categories_name'];
}

// create link to top level category
$link = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '</a> ';
echo $link;
$categories_tab->MoveNext();

}

<?php
/**
 * Module Template - categories_tabs
 *
 * Template stub used to display categories-tabs output
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_modules_categories_tabs.php 3395 2006-04-08 21:13:00Z ajeh $
 */

  include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_CATEGORIES_TABS));
?>
<?php if (CATEGORIES_TABS_STATUS == '1' && sizeof($links_list) >= 1) { ?>
<div id="navCatTabsWrapper">
<div id="navCatTabs">
<ul>
<?php for ($i=0, $n=sizeof($links_list); $i<$n; $i++) { ?>
  <li><?php echo $links_list[$i];?></li>
<?php } ?>
</ul>
</div>
</div>
<?php } ?>

includes/templates/YOUR_TEMPLATE/templates/tpl_modules_categories_tabs.php