[Sheffield_Tiger]

I can't believe I asked this question....the answer isn't rocket science
Guess I was looking for something more complicated than adding a table into the categories tpl....anyway, I know it's simple and way above most of you from what I see, but just in case anyone else new to x-cart ever searches for this exact same thing:

--- OPEN --- /skin1/customer/categories.tpl

--- FIND ---

{section name=cat_num loop=$categories}
<FONT class="CategoriesList">{$categories[cat_num].category}</FONT>

{/section}

--- REPLACE WITH ---

{section name=cat_num loop=$categories}
<table width="165" border="0" cellspacing="0" cellpadding="0" height="19">
<tr>
<td width="8">[img]{$ImagesDir}/menu_l.gif[/img]</td>
<td valign="middle" width="149" background="{$ImagesDir}/menu_c.gif">
<FONT class="CategoriesList">{$categories[cat_num].category}</FONT>

</td>
<td width="8">[img]{$ImagesDir}/menu_r.gif[/img]</td>
</table>
{******** REMOVE THIS LINE TO ENABLE SUB-CATEGORIES TO DROP DOWN BELOW THE BUTTON **** 
    {if $cat eq $categories[cat_num].categoryid}
      {section name=subcat_num loop=$subcategories}
        { $subcategories[subcat_num].category|escape }

      {/section}
      {/if} 
**** REMOVE THIS LINE TO ENABLE SUB-CATEGORIES TO DROP DOWN BELOW THE BUTTON ********} 
{/section}

(note the commented out lines of code which were gleaned from this forum to allow the categories to "expand" with the relevant sub-categories...just delete the comment lines in order to add this feature



--- CREATE & UPLOAD TO /skin1/images ---

menu_l.gif (the left hand rounded edge of the button) 8px x 18px
menu_r.gif (the right hand rounded edge of the button) 8px x 18px
menu_c.gif (the straight "middle part" of the button where the text will appear over) 1x18px



---- OPEN ---- /skin1/skin1.css

---- FIND ----

.VertMenuItems:active      { color:   

note the full line is longer

---- AFTER, ADD ----

.VertMenuCategories         { color: #fff; font-weight: bold; text-decoration: none; background-position: 150px 19px; text-align: center; width: 150px; height: 19px }
.VertMenuCategories:link      { color: #fff; font-weight: bold; text-decoration: none }
.VertMenuCategories:visited     { color: #fff; font-weight: bold; text-decoration: none }
.VertMenuCategories:hover   { color: #fc0; font-weight: bold; text-decoration: underline }
.VertMenuCategories:active      { color: #fc0; font-weight: bold; text-decoration: none }

This will allow your text over the button to be a different colour/style to the rest of the VertMenuItems - edit to suit your site style. If you don't need this, just replace
class="VertMenuCategories"
in the mod to categories.tpl with
class="VertMenuItems"
[/b]