Change Catagories Layout

[SalmonLikeTheFish]

Im trying to make the categories tab look like my manufacturers tab.

Ive been looking for 2 weeks and cant find this info anywhere.. eek

PLEASE PLEASE HELP!!

THANKS ZENNERS

here is my site-
getsupps.com

[stevesh]

Sorry, I don't know the answer to your question, but I wonder why you would have the categories listing (or the manufacturers listing, for that matter) configured as a dropdown if they aren't going to 'drop down'. The stock Zencart categories listing will give you a long list.

[SalmonLikeTheFish]

its easier for people to see all the categories when its always visible.

some one please help!!!

[gjh42]

If it looks like a dropdown but is always expanded, you get the worst of both worlds: it always takes up the maximum space, but can't be styled for best readability.

Also, the current dropdown you have for categories doesn't work unless javascript is enabled. This means you are needlessly hampering free navigation on your site, and I think people who use alternate displays like screenreaders will not be able to navigate at all. Of course, maybe a muscle supplements store doesn't care about the less-than-full-mobility types... ;)

[SalmonLikeTheFish]

im trying to style the side similair to this page-
tfsupplements.com

is there a way to do this

[gjh42]

Of course! That is pretty much standard CSS styling techniques. You would style

a.category-top {
    display: block;
    background: #2233ff;
    color: #ffffff;
    margin: 1px 0 0 0;
    }

a.category-top:hover {
    background: #000044;
    }

to get the full-width blocks of color which change on hover (adjust the colors to taste).

You also need to delete a few <br /> tags in /includes/templates/your_template/sideboxes/tpl_categories.php, as it is set by default to work only with inline <a> elements, not block elements. Categories Dressing has all the setups you need for this and other custom styling.

[SalmonLikeTheFish]

im such a newbie at this eek! please tell me where to insert & what to delete if you could

here is my html-

<?php
/**
* Side Box Template
*
* @package templateSystem
* @copyright Copyright 2003-2006 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_categories.php 4162 2006-08-17 03:55:02Z ajeh $
*/
$content = "";

$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";
for ($i=0;$i<sizeof($box_categories_array);$i++) {
switch(true) {
// to make a specific category stand out define a new class in the stylesheet example: A.category-holiday
// uncomment the select below and set the cPath=3 to the cPath= your_categories_id
// many variations of this can be done
// case ($box_categories_array[$i]['path'] == 'cPath=3'):
// $new_style = 'category-holiday';
// break;
case ($box_categories_array[$i]['top'] == 'true'):
$new_style = 'category-top';
break;
case ($box_categories_array[$i]['has_sub_cat']):
$new_style = 'category-subs';
break;
default:
$new_style = 'category-products';
}
if (zen_get_product_types_to_category($box_categories_array[$i]['path']) == 3 or ($box_categories_array[$i]['top'] != 'true' and SHOW_CATEGORIES_SUBCATEGORIES_ALWAYS != 1)) {
// skip if this is for the document box (==3)
} else {
$content .= '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">';

if ($box_categories_array[$i]['current']) {
if ($box_categories_array[$i]['has_sub_cat']) {
$content .= '<span class="category-subs-parent">' . $box_categories_array[$i]['name'] . '</span>';
} else {
$content .= '<span class="category-subs-selected">' . $box_categories_array[$i]['name'] . '</span>';
}
} else {
$content .= $box_categories_array[$i]['name'];
}

if ($box_categories_array[$i]['has_sub_cat']) {
$content .= CATEGORIES_SEPARATOR;
}
$content .= '</a>';

if (SHOW_COUNTS == 'true') {
if ((CATEGORIES_COUNT_ZERO == '1' and $box_categories_array[$i]['count'] == 0) or $box_categories_array[$i]['count'] >= 1) {
$content .= CATEGORIES_COUNT_PREFIX . $box_categories_array[$i]['count'] . CATEGORIES_COUNT_SUFFIX;
}
}

$content .= '<br />' . "\n";
}
}

if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true' or SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
// display a separator between categories and links
if (SHOW_CATEGORIES_SEPARATOR_LINK == '1') {
$content .= '<hr id="catBoxDivider" />' . "\n";
}
if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
$show_this = $db->Execute("select s.products_id from " . TABLE_SPECIALS . " s where s.status= 1 limit 1");
if ($show_this->RecordCount() > 0) {
$content .= '<a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . '<br />' . "\n";
}
}
if (SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
// display limits
// $display_limit = zen_get_products_new_timelimit();
$display_limit = zen_get_new_date_range();

$show_this = $db->Execute("select p.products_id
from " . TABLE_PRODUCTS . " p
where p.products_status = 1 " . $display_limit . " limit 1");
if ($show_this->RecordCount() > 0) {
$content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . '<br />' . "\n";
}
}
if (SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true') {
$show_this = $db->Execute("select products_id from " . TABLE_FEATURED . " where status= 1 limit 1");
if ($show_this->RecordCount() > 0) {
$content .= '<a class="category-links" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>' . '<br />' . "\n";
}
}
if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
$content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>' . "\n";
}
}
$content .= '</div>';
?>

[gjh42]

Remove exactly this
'<br />' .
from these four locations:

...
CATEGORIES_COUNT_SUFFIX;
}
}

$content .= '<br />' . "\n";
}
}

if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or
...

$content .= '<a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . '<br />' . "\n";
...

$content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . '<br />' . "\n";
...

$content .= '<a class="category-links" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>' . '<br />' . "\n";


You will also need to have in your stylesheet

a.category-links {display: block;}

[SalmonLikeTheFish]

So ive been tryn to do this for the last 4 hours and no success.

please some one help me..

i need this idiot proof..

because i am an idiot. we all now know this.

[gjh42]

Sorry, I don't know how I can make it simpler. Can you find the four locations in your file? Are you deleting exactly the characters I mention above, no more, no less?