Categories side box need help with list marker placement

[aozhaver]

Hi Everyone!

Yet again I am stuck due to my very poor HTML skills.

Basically I need a list marker to appear besides each category type and sub category and sub sub category etc etc but I need each "level" of categories to be indented.

The original code for my template has list markers in a single column so even if you click on a subcategory the list marker would remain in place while the category name would be indented. here is an idea:



As you can see in the image "Rings" is one of the top main categories and it has a subcategory "925 Sterling Silver".
"925 Sterling Silver" subcategory also has subs: Amethyst, Black Onyx etc etc.
Yet the list markers are in one vertical line and dont get indented according to the category tree level.

This is the relevant part of my code in tpl_categories.php

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 .= '<li><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 .= '';

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 .= '</a></li>' . "\n";
}



As you can see there is an <li> tag in:




else {
$content .= '<li><a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">';

Which makes the list markers appear but incorrectly!

Please help me know which tags to insert so that the list markers next to each category display next to the category level and not in just one straight vertical column line.

I hope this all makes sense - THANKS!

[DarkAngel]

without actually getting in there and experimenting this is a shot in the dark...try adding the part in red and see if that works

else {
$content .= '<li>&nbsp<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">';

[aozhaver]

That doesn't really do it you see since it adds a space but all the list markers still stay in one straight column...

Any more ideas anyone?

[econcepts]

As you can see there is an <li> tag in:


Which makes the list markers appear but incorrectly!

Please help me know which tags to insert so that the list markers next to each category display next to the category level and not in just one straight vertical column line.

Just on <li> tag won't do it. You need to set it up (in the code that you have singled out) to be a nested list. So a 'list' within a 'list' etc...

The one list element makes it think there is only one list.

Did you try to create something like the following:

<ul>
<li>Top Level Category Here</li>
<ul><li>Sub cat here</li>
<li>Sub cat 2 here</li>
<li>Sub cat 3 here</li>
<ul>
<li>Sub Sub Cat 1 here</li>
<li>Sub Sub Cat 2 here</li>
</ul>
</ul>
</ul>

Notice there are nested lists within the others where each sub cat starts / ends. Set a style sheet element on each nested list item and then adjust your stylesheet to increase / decrease the indent as needed (being that they are nested lists, they should auto indent to some degree anyhow.)

You'll also need to set the 'list item image' (or you could use a background image for each item in the list). This should put the list item image (the arrow you are showing) next to the item desired, and indented as you want.

[aozhaver]

Hey thanks so much for replying! Finally someone takes notice here...

Well its so hard for me to make real to you what I'm doing so i edited my code according to what you said here it is

else {
$content .= '<ul><li><a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '"></li>';

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

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

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 .= '</a></li></ul></ul></ul>' . "\n";

And you can see the (disastrous) results on my website directly www.majesticsilver.co.uk/store

Firstly lets consider if there is something basically wrong with the way ive arranged the HTML, if yes ill correct and try again if not ill discuss the css stylesheet with you... lets see I hope you subscribed to this thread and will reply soon

Thanks again!

[aozhaver]

PS Please ignore the last </li> I realised its wrong, still even after removing in no noticeable difference...

[econcepts]

You've got it coded wrong. The list is all off (view your source when looking at the page.)

There are too many list items compounding on each other and this throws everything off.

Try this add-on. It should automatically code it for you (at least give you a starting point.)

Categories menu - replace with ul/li

Let me know if that helps.

You might also want to look at the following (more in depth but should let you customize as needed).

http://www.zen-cart.com/index.php?ma...roducts_id=609

[aozhaver]

OK I did that code and Im exactly back to square one I got all my categories with a list marker next to them, then you open a subcategory the list marker remains exactly where it is...
what to do

You can see the results on my web page

[econcepts]

Almost there.

Did you set separate style items for 'category-top' vs 'category-subs' vs. 'category-products'? If not you need to do that.

Also, if you can't get that to work, you might want to consider altering the current code you are using (again.)

It has you almost there, but it still has all items in on 'list'.

You should be able to achieve what you want without altering that (adding more <ul> </ul> for the sub categories) but it is an option.

Just as a quick example (IF you were to go with adding the extra <ul> tags (try the stylesheet method first) it may look like this:

<ul>
<li><a class="category-top" href="http://www.majesticsilver.co.uk/store/index.php?main_page=index&amp;cPath=1"><span class="category-subs-parent">Rings</span>-&gt;</a></li>

<ul><li><a class="category-subs" href="http://www.majesticsilver.co.uk/store/index.php?main_page=index&amp;cPath=1_17">&nbsp;&nbsp;&nbsp;925 Sterling Silver-&gt;</a></li>
<ul>
<li><a class="category-products" href="http://www.majesticsilver.co.uk/store/index.php?main_page=index&amp;cPath=1_4">&nbsp;&nbsp;&nbsp;999 Thai Karen Silver</a></li>
</ul>
</ul>


</ul>

[aozhaver]

Hi again,

Im not sure what style sheets you are referring to exactly.
I have in stylesheet.css

categoryListBoxContents a {text-decoration:none; color:#C00505; text-transform:uppercase; text-align:center;}

but that doesnt seem to make a difference to anything

then I also have lots of options in stylesheet_boxes.css

one that affects all my side boxes directly and also the category side box is

.box ul{ font-size:16px;padding:0 0 0 4px !important; margin:-3px 0 0 0 !important;}
.box ul li{font-size:16px; line-height:27px; background:url(../images/list-marker.gif) no-repeat 0 12px; padding-left:16px; padding-top:6px;}
.box ul li a{ text-decoration:none;}
.box ul li a:hover{ font-weight:bold; color:#f42fdb;}

otherwise ive looked thru many options I cant see exactly what to edit, can you give more specific information?