Change Catagories Layout

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

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.

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

some one please help!!! :cry:

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... ;)

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

is there a way to do this :blink:

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.

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

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>'; ?>

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;}

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. :no:

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?

i deleted all the <br>

where do i insert the css coding? :blush:

Probably anywhere in your stylesheet would work.

ok hows this look-

<?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=category-top'): // $new_style = 'category-holiday'; // break; a.category-top { display: block; background: #2233ff; color: #ffffff; margin: 1px 0 0 0; } a.category-top:hover { background: #000044; } 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 .= . "\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>' . . "\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>' . . "\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>' . . "\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>'; ?>

SalmonLikeTheFish:

ok hows this look-

Not quite what you want to do. The CSS goes in the CSS file not the tpl_categories.php file. So this...

SalmonLikeTheFish:

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

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

... needs to go in this file:

zencart root directory/includes/templates/classic/css/stylesheet.css

Place your code at the end of the file, otherwise your styles will be overwritten by styles that appear elsewhere in the stylesheet. If you are feeling confident you can fine the entries for these items in the stylesheet.css file and modify them to your needs.

HTH

Thanks for this! I was just getting ready to dig in and find where those <br /> tags were getting dropped in for a project I'm working on.

ok-

ive tried everything..

can anyone help!!

i removed <br>

i inserted the css coding in the style sheets for the default and the classic!

why wont this work?

please help zenners! :censored:

here is my site getsupps.com

Your categories sidebox still has a dropdown instead of the standard listing. The tpl_categories.php you show is not the file that is controlling the sidebox content layout; you have some mod that is controlling that, and we can't tell you what it is without being inside your site files.