X-Cart forums - Help with Image in Category Menu

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

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

- - Help with Image in Category Menu (https://forum.x-cart.com/showthread.php?t=39077)

Help with Image in Category Menu

Hi,

I had no luck searching for this, but can anyone tell me how to add the category image in the Category Menu?

thanks for your help in advance

x-cart version 4.1.9

Re: Help with Image in Category Menu

hi Artisan,

If you mean category icons, here's one way although resizing maybe an issue if the icons are intended to be much larger in the header section of the main content (and remember to take care of default_icon.gif)...

in skin1/customer/categories.tpl locate something like the code below and {* comment *} it out...

Code:

{foreach from=$categories item=c}

<font class="CategoriesList"><a href="home.php?cat={$c.categoryid}" class="VertMenuItems">{$c.category}</a></font><br />

{/foreach}

{else} {foreach from=$subcategories item=c key=catid}

<font class="CategoriesList"><a href="home.php?cat={$catid}" class="VertMenuItems">{$c.category}</a></font><br />

{/foreach}

and undeneath it add this...

Code:

{foreach from=$categories item=c}

<div class="CategoriesListAndIcons"><img src="{$c.icon_url}" alt="" /><a href="home.php?cat={$c.categoryid}" class="VertMenuItems">{$c.category}</a></div>

{/foreach}

{else}

 {foreach from=$subcategories item=c key=catid}

<div class="CategoriesListAndIcons"><img src="{$c.icon_url}" alt="" /><a href="home.php?cat={$catid}" class="VertMenuItems">{$c.category}</a></div>

{/foreach}

Then add to skin1/skin1.css...

Code:

.CategoriesListAndIcons {

        FONT-SIZE: 12px; /* default x-cart font-size may want to change this to em */

        padding: 3px 0; /* Some spacing for top and bottom of each link */

        display:block; /* Using display block so that no extra <br />s are needed */

}



.CategoriesListAndIcons IMG {

        vertical-align:middle; /* puts the image middle of the box model */

        padding-right: 4px; /* padding for the right of the icon */

        padding-bottom: 2px; /* probably a better way but some browsers do not align middle properly */

        height:20px; /* change this for the set height of the icons */

        width:20px; /* change this for the set width of the icons */

}

Hope this helps. If I got your question horribly wrong, which I suspect, no worries I'm working on something like this at the moment as well ;D

Re: Help with Image in Category Menu

And if it's the category header image you're after, make a back up of dingbats_categorie.gif and rename it or something. Then upload your own image with the same filename.

Or similarly open up skin1/customer/categories.tpl and locate (should be near enough the last line)...

{ include file="menu.tpl" dingbats="dingbats_categorie.gif" menu_title=$lng.lbl_categories menu_content=$smarty.capture.menu cellpadding=$fc_cellpadding}

Upload your image to your /skin1/images/ folder and change the dingbats located in the code above, to dingbats="whatever-filename.jpg"

Hope this helps.

Re: Help with Image in Category Menu

Wasn't sure whether to start a new topic, or add my question in here.

I am new to x-cart, and have learnt a lot from these forums. I came in here tonight specifically looking for this type of information, only i am hoping to take it a step further.

I'd like to do away with the categories header altogether, and have buttons down the side for all the different categories i'm offering:
so right now i have the sideboxes and the first one says categories, but i want to do away with that and just have my buttons down the side of the page instead, like,
soap
lotions
body butters
soy candles
etc
etc
etc.

Can you tell me what code would need to be added to make this happen?
Also, specifically which files to change too.

In the meantime i''ll go play with this and see if i can manage it, without breaking my site.

Thankyou in Advance