X-Cart forums - Adding a background image to items in the category menu?

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

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

- - Adding a background image to items in the category menu? (https://forum.x-cart.com/showthread.php?t=20434)

Adding a background image to items in the category menu?

Apologies if this has been covered already..I've searched all over but can't seem to find any answer except for fancycategories

however
- our company is evaluating x-cart so not spending any extra on mods & extensions just yet (not my choice before you have me down as a tightwad...I'm just the worker working with the tools I am given)
- also modifying other aspects and heard mention of fancycategories not being too great sometimes with other mods & hacks.

So not keen on going down the fancycategories road just at the moment...

What I want to do, is to add a blank button image as a background to each text link in the category menu.

I tried doing this through css but obviously this adds buttons all over all the menus..

but I can't seem to work out how and where I should be adding these images into any of the tpl files....or is it a little more involved?

Not totally new to the idea of templates, but new to smarty (and of course x-cart) so any help or pointers appreciated...and hopefully doing this will help me learn a bit about how this whole thing is glued together

TIA

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

Code:

{section name=cat_num loop=$categories}

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




{/section}

--- REPLACE WITH ---

Code:

{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 ----

Code:

.VertMenuItems:active { color:

note the full line is longer

---- AFTER, ADD ----

Code:

.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]

Thanks for posting that, S_T, I'm up the road near Bradford.

Any chance of a link to your site to see it in operation?

Cheers
Steve

Afraid not because it's not my site, I just work for the company - that is keeping it a secret until it's launched..

Now doesn't that make it sound much grander than it actually is :lol: :lol:

Dhooooo - you republicans !! :cry:

I took the risk and got it to do what I wanted anyway, S_T. Thanks for the posting.

Steve