[MoonDog]

RobinBraves,

Looks like you've done everything correct. All you need to do now is to convert the sample code in subcategories.tpl to something that will read your data and place it formated on the page.

If you need some code to get you going I've gathered some code from various different threads and altered the subcategories.tpl file to show the output in icons and text. It is also hyperlinked so that you can click on the icon and the text. I've attached a thumbnail so you can see what it looks like.

First, add this code to the end of your skin1.css file:

 
.ColumnTitles {
      TEXT-ALIGN: center;
      WIDTH: 33%;
      PADDING-LEFT: 5px;
}

Then replace the code from <table> to </table> in the skin1/customer/main/subcategories.tpl file with the code below:

 
<table cellspacing="5" width="100%" border="2">
{foreach from=$subcategories item=subcat}
<tr>
<td class="ColumnTitles" valign="top"><a title="{$subcat.description}" <a href="home.php?cat={ $subcat.categoryid }"><img src="{if $subcat.icon_url}{$subcat.icon_url}{else}{$xcart_web_dir}/default_image.gif{/if}" alt="" /><br>
<font class="ItemsList">{ $subcat.category|escape }</font></a>
</td></tr>
{foreach from=$subcat.products item=subproduct}
{if $tmp is div by 3} 
<tr><td colspan="3"></td></tr>
<tr valign="top"> 
{/if} 
{ if $tmp and $first_subproduct ne "Y" }
{assign var="tmp" value=0}
{assign var="first_subproduct" value="Y"}
{/if}
{if subproduct}
<td class="ColumnTitles" valign="top"><a title="{$subproduct.description}" <a href="product.php?productid={$subproduct.productid}&amp;cat={ $subproduct.productid }&amp;cat={$cat}&amp;page={$navigation_page}"><img src="{if $subproduct.tmbn_url}{$subproduct.tmbn_url}{else}{$xcart_web_dir}/default_image.gif{/if}" alt="" /><br>
{$subproduct.product|escape}
{/if}
<br>
{assign var="tmp" value=$tmp+1}
{/foreach}
{if $tmp is not div by 3}
{assign var="tmp" value=3}
{/if}
{/foreach}
</tr>
</td>
</table>

The above code produces three columns.
If you need to change it to two column then change these 2 lines of code in subcategories.tpl:

 
{if $tmp is div by 3} 
<tr><td colspan="3"></td></tr>
 

For two columns you need to replace both number 3's to 2
And for 4 columns you need to replace them to 4

And also at these 2 lines of code:

{if $tmp is not div by 3}
{assign var="tmp" value=3}
{/if}

You also need to change the percentage code you placed in your skin1/skin1.css file.

Example: for 2 columns it's 50%

 
.ColumnTitles {
      TEXT-ALIGN: center;
      WIDTH: 50%;
      PADDING-LEFT: 5px;
}

Example: for 4 columns it's 25%

 
.ColumnTitles {
      TEXT-ALIGN: center;
      WIDTH: 25%;
      PADDING-LEFT: 5px;
}

Unfortunately I've been so busy, I didn't have much time to test it out completely, but it's a start to get you going. You might have to change the table code or the css code to what you need. I also didn't work on the sort order (it's ordered alphabetically), it's different than the sort order on the menu (see the thumbnail). You can change the position order in the categories section of the admin side.
Anyway, hope this will get you going.

- MoonDog -