X-Cart forums - Adding line in between each listed category?

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Adding line in between each listed category? (https://forum.x-cart.com/showthread.php?t=8153)

Adding line in between each listed category?

Is there an easy way to add lines between each category listed under the "Categories" menu box? I would like it so each category would have a line seperating them. thanks

Go to skin1/customer/categories.tpl and find this code:

Code:

{if $config.General.root_categories eq "Y"}

{section name=cat_num loop=$categories}

<font class=CategoriesList>{ $categories[cat_num].category_name|escape }</font>




{/section}

and after the
put <HR>

You may not want it to place a <HR> after the last category, so one way to do this is put this instead of the <HR>:

Code:

{if !$smarty.section.categories.last}

<HR>

{/if}

This site may help to.
http://smarty.php.net

Carrie

wow thanks Carrie that worked like a charm and is exactly what I was looking for. The only thing is that I put the code in place of the <hr> so that it would not add a line to the last category but it is still doing so.

Also, how do I change the distance now between the categories because they are a little furthur apart than I need, and one last question is how do I change the color of the line separating them? Thanks again...I really appreciate all your help.

Sorry about that. Change the "if" part to this:

Code:

{if !%cat_num.last%}

To change the <HR> properties, you'll need to change it in skin1.css

I can't think of anything off the top of my head that would shrink the spacing down. You can try removing the
since you have the <HR> in there now. I doubt that's going to make a difference though. It's probalby the <HR> properties causing it.

You could include an image of a line instead of the <HR>. That may give you more of the look you want. Just put what ever HTML you want inbetween the if statement to change the look between the categories.

Glad I could help!

Carrie

This worked great in case anyone else wants to try it...Thanks for all your time and help Carrie!

I also implimented this HR line and it works well, however I would like to do the same in my manufactures and help menu boxes

Can anyone tell me which tpls and where to place this code??

Thanx
Kirsten

skin1\modules\Manufacturers\menu_manufacturers.tpl should do it for the manufacturer's and skin1/help.tol should do it for the help area.

Carrie

Thanx carrie

But I already contacted the xcart ppl and they helped me implement the spacing changes I needed for these other menus and I went with just extra spacing rather than having the line

Kirsten

Nice tip, but how do I implement it in a DHTML menu like the one Cart-labs has. I need it so it only apply to the top categories not the submenus, so everything will stay inside the line.
I already try after the
but only afect the submenus.

Here is my code:

Quote:

{literal}

<style type="text/css">
.menutitle1{
font-weight: bold;
text-decoration: FF8800;
border:0px;
width:160px;
cursor:pointer;
margin-bottom: 0px;
padding:2px;
margin-left: 5px;
border-bottom:0px;
}
.bottom1{
margin-left: 7px;
border-top:1px solid #F2FBE4;
height:1px;
width:160px;
padding:0px;
margin-bottom: 0px;
}
.sub1{
margin-bottom: 0px;
margin-left: 7px;
border:0px solid #F2FBE4;
color:#000000;
width:160px;
padding:2px;
border-bottom:0px;
}
</style>

<script type="text/javascript">
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.sub1{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsBy TagName("span");
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar[i].className=="sub1")
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

</script>
{/literal}

<table width="181" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="{$ImagesDir}/new/categories-header.gif" height="46" valign="top"><p class="menutext">product <font color="#FFC000">categories</font></p>
</td>
</tr>
<tr>
<td background="{$ImagesDir}/new/categories-repeat.gif" valign="top">
{* Keep all menus within masterdiv *}
<div id="masterdiv">
{section name=cat_num loop=$categories}
<div class="menutitle1" onclick="javascript:self.location='home.php?cat={$ categories[cat_num].categoryid}'">[img]{$ImagesDir}/new/bullet.gif[/img]{$categories[cat_num].category}</div>
<span class="sub1" id="{$categories[cat_num].categoryid}">
{assign var="switch_var" value=0}
{section name=subcat_num loop=$allcategories}
{if $allcategories[subcat_num].parentid == $categories[cat_num].categoryid && $allcategories[subcat_num].category != $categories[cat_num].category}
{if $cat eq $allcategories[subcat_num].categoryid}
{assign var="switch_var" value=$allcategories[subcat_num].parentid}
{/if}
[img]{$ImagesDir}/new/bullet.gif[/img]<a href="home.php?cat={$allcategories[subcat_num].categoryid}">
{if $cat eq $allcategories[subcat_num].categoryid}
<font color="FF8000">{$allcategories[subcat_num].category }</font>
{else}
{$allcategories[subcat_num].category }
{/if}
</A>

{/if}
{/section}
</span>
{if $switch_var gt 0}
<script>SwitchMenu('{$switch_var}')</script>
{/if}
{if $cat eq $categories[cat_num].categoryid AND $categories[cat_num].subcategory_count > 0}
<script>SwitchMenu('{$cat}')</script>
{/if}

{/section}

</div>
</td>
</tr>
<tr>
<td background="{$ImagesDir}/new/categories-footer.gif" height="31"> </td>
</tr>

I would imagine at first glace that it would go after this:

Code:

{if $allcategories[subcat_num].parentid == $categories[cat_num].categoryid && $allcategories[subcat_num].category != $categories[cat_num].category}

But you may get a quicker answer asking cart-labs since they would be familiar with this code you posted.

Carrie