Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls
 

Category Box Background Image

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions > Changing design
 
Thread Tools Search this Thread
  #1  
Old 01-15-2007, 07:19 AM
 
rossco rossco is offline
 

Advanced Member
  
Join Date: Feb 2005
Posts: 97
 

Default 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
__________________
How loud do you want it?

X-Cart Gold 4.0.12 & 17
Reply With Quote
  #2  
Old 01-15-2007, 07:53 AM
 
balinor balinor is offline
 

Veteran
  
Join Date: Oct 2003
Location: Connecticut, USA
Posts: 30,253
 

Default 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.
__________________
Padraic Ryan
Ryan Design Studio
Professional E-Commerce Development
Reply With Quote
  #3  
Old 01-15-2007, 08:16 AM
 
rossco rossco is offline
 

Advanced Member
  
Join Date: Feb 2005
Posts: 97
 

Default 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
__________________
How loud do you want it?

X-Cart Gold 4.0.12 & 17
Reply With Quote
  #4  
Old 01-17-2007, 07:52 PM
 
kalwani@hotmail.com kalwani@hotmail.com is offline
 

Member
  
Join Date: Jan 2007
Posts: 10
 

Default 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
Reply With Quote
  #5  
Old 01-18-2007, 03:24 AM
 
balinor balinor is offline
 

Veteran
  
Join Date: Oct 2003
Location: Connecticut, USA
Posts: 30,253
 

Default 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!
__________________
Padraic Ryan
Ryan Design Studio
Professional E-Commerce Development
Reply With Quote
  #6  
Old 01-18-2007, 09:14 PM
 
kalwani@hotmail.com kalwani@hotmail.com is offline
 

Member
  
Join Date: Jan 2007
Posts: 10
 

Default 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
__________________
www.justintrend.com
xcart V 4.0.19 (Unix)
Reply With Quote
  #7  
Old 01-19-2007, 02:59 AM
 
balinor balinor is offline
 

Veteran
  
Join Date: Oct 2003
Location: Connecticut, USA
Posts: 30,253
 

Default 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.
__________________
Padraic Ryan
Ryan Design Studio
Professional E-Commerce Development
Reply With Quote
  #8  
Old 01-26-2007, 12:25 AM
  crazyoval's Avatar 
crazyoval crazyoval is offline
 

X-Adept
  
Join Date: Jun 2006
Location: UK
Posts: 559
 

Default 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
__________________
X-Cart 4.1.11 on Linux
HandsOnWebHosting: Very helpful & professional
Custom Skin Design by ARS.
Numerous, ney, hundreds of modifications by ARS.
AlteredCart: Download Expander, One Page Checkout,
BCS Engineering: Great team, Top service.
WebsiteCM: good products & very professional
CDSEO, Hidden Categories, Custom Work
Magnetic One Store Manager: Brill
Forms To Go: Excellent+A+support
Reply With Quote
  #9  
Old 01-26-2007, 01:10 AM
 
inebriate inebriate is offline
 

eXpert
  
Join Date: May 2006
Posts: 301
 

Default 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 }
__________________
x-cart pro 4.0.18
linux
www.fabric8d.com (currently undergoing construction)
Reply With Quote
  #10  
Old 01-26-2007, 02:21 AM
  crazyoval's Avatar 
crazyoval crazyoval is offline
 

X-Adept
  
Join Date: Jun 2006
Location: UK
Posts: 559
 

Default Re: Category Box Background Image

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

Many thanks
__________________
X-Cart 4.1.11 on Linux
HandsOnWebHosting: Very helpful & professional
Custom Skin Design by ARS.
Numerous, ney, hundreds of modifications by ARS.
AlteredCart: Download Expander, One Page Checkout,
BCS Engineering: Great team, Top service.
WebsiteCM: good products & very professional
CDSEO, Hidden Categories, Custom Work
Magnetic One Store Manager: Brill
Forms To Go: Excellent+A+support
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions > Changing design



Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 01:40 AM.

   

 
X-Cart forums © 2001-2020