X-Cart forums - Category Box Background Image

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

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

- - Category Box Background Image (https://forum.x-cart.com/showthread.php?t=28031)

Category Box Background Image

Hi

I'm trying to put a background image into my Categories box.

As I only want this to affect the categories list I've created a new template called Menu_New.tpl and set the categories.tpl to call this one instead of the normal one.

Problem I'm going round in circles trying to get the back ground image to show.

Is there a kind soul out there who could give me the code needed to have a functioning categories list with a background image?

Cheers

Allan

Re: Category Box Background Image

Just add a class to your template (i.e. <div class="catbackground"> code here</div>

Then add the CSS into your skin1.css template:

.catbackground {background: url(images/background.jpg);}

Upload the image to skin1/images.

Re: Category Box Background Image

Thanks Balinor

Just as you posted I finally got my code to work.

Created a new template called Menu_New.tpl and called that from the Categories.tpl.

I also created a new class called 'VertMenuBack' and instead of calling 'VertMenuBox' in the Menu_new.tpl I called 'VertMenuBack'.

Now works a treat.

Thanks for the speedy reply

Regards

Allan

Re: Category Box Background Image

Balinor
I am doing the same thing and got a question. In your response you said add a class <div class="catbackground"> code here</div>
What do you mean by "code here". Do I have to add some code there?
Thanks for your help

Cal

Re: Category Box Background Image

The code you want the background image for goes in the 'code here' area.

Also, if you could please update your signature with your X-Cart version per the forum guidelines that would be great, thanks! :)

Re: Category Box Background Image

Balinor

Thanks for the note.
Sorry, I am new to this and i am still not clear on what code would apply to background images. Is there an example you can provide? Or is there an example I can look up somewhere. I am trying to replace the whole background of my website (www.justintrend.com) with images and I am having problem doing that. Thank you very much for your help. Any help will be appreciated.
Also, I edited the signature...hope it is right (sorry, I am new to this)

Thanks a zillion

Re: Category Box Background Image

Grab yourself a good CSS book :) The code for applying a background image is:

background: url(images/image.jpg);

Upload the image to your skin1/images folder.

Re: Category Box Background Image

Hi Balinor, Im just trying to consolidate what has been written over a few postings here, Im not sure if I understand it correctly. Here's what I think is being said, if you dont mind confirming that would be really

Add a class to each of your chosen Smarty templates e.g.;

<div class="catbackground"> background: url(images/image.jpg);</div>

Im trying to add 5 different images for backgrounds for each of the lists on my page (categories, products,help,cart & login) so each class has a different name (catbackground,productbackground,helpbackground,ca rtbackground & login background) & goes in different templates.

Then add the CSS the following (e.g.) to your skin1.css template to cover all smarty template changes:

.catbackground {background: url(images/background.jpg);}

for each of the backgrounds I want to use as referred to in the various templates

Upload the images to skin1/images.

Have I got it right?

Thanks

Re: Category Box Background Image

Quote:

Originally Posted by crazyoval

Here's what I think is being said, if you dont mind confirming that would be really

Add a class to each of your chosen Smarty templates e.g.;

<div class="catbackground"> background: url(images/image.jpg);</div>

in your css file you define:

Code:

.catbackground { background: url(images/image.jpg); }

what balinor meant by "code here", is the actual code within the category box section

ie (dont use the bottom code unless it matches minus the div tag):

Code:

{capture name=menu}



<div class="catbackground">



{if $active_modules.Fancy_Categories ne ""}

{include file="`$fancycategories_config.modules_path`/fancy_categories.tpl"}

{else}

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

{section name=cat_num loop=$categories}

<FONT class="CategoriesList"><A href="home.php?cat={$categories[cat_num].categoryid}" class="VertMenuItems">{$categories[cat_num].category}</A></FONT><BR>

{/section}

{else} {section name=cat_num loop=$subcategories}

<FONT class="CategoriesList"><A href="home.php?cat={$subcategories[cat_num].categoryid}" class="VertMenuItems">{$subcategories[cat_num].category}</A></FONT><BR>

{/section}

{/if}

{/if}



</div>



{/capture}

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

Re: Category Box Background Image

Thank you inebriate, I shall have a go at this then.

Many thanks :-)