Forums / Templates, Stylesheets, Page Layout / box around product image

box around product image

Locked

Views: 1,879

Results 1 to 11 of 11
This thread is locked. New replies are disabled.
30 Dec 2008, 7:44 AM
#1
rickiesdiscount avatar

rickiesdiscount

Zen Follower

Join Date:
Jul 2008
Posts:
229
Plugin Contributions:
0

box around product image

ok i know it is probably simple but how do i put a box around my main product image on my product page like the box around the add to cart button on my product page

http://www.rickiesdiscountelectronics.com/15-premium-digital-photo-frame-with-1gb-memory-21468.html

and like they have around their product image on this page:
http://www.echo-electronics.com/dual-xdmr7710-cd-player-with-mp3wma-playback-p-1280.html

i know you have to modify the tpl_product_info_display right?

what code do i need to add in order for it to do that?

thanks in advance.

30 Dec 2008, 8:19 AM
#2
knuckle_101 avatar

knuckle_101

Totally Zenned

Join Date:
Dec 2005
Location:
Cincinnati Ohio
Posts:
1,034
Plugin Contributions:
3

Re: box around product image

This is done with css using classes not hard coding. Borders is basically all you need for that class

For example

#productMainImage { width: 255px; height: 255px; margin: 0 1em 1em 0; padding: 5px; border: solid 1px #c0c0c0; }
 

of course adjust the style the way you like but this is what is used on that website.

PCI Certified Web Hosting - ControlScan, Security Metrics (Platinum Partner), McAfee, TrustKeeper
Business Class Web Hosting - Linux and cPanel Powered

30 Dec 2008, 3:26 PM
#3
rickiesdiscount avatar

rickiesdiscount

Zen Follower

Join Date:
Jul 2008
Posts:
229
Plugin Contributions:
0

Re: box around product image

thanks, i appreciate it...i knew it had to be something simple...if i wanted to do it around the product description i could do basically the same thing right

30 Dec 2008, 4:00 PM
#4
knuckle_101 avatar

knuckle_101

Totally Zenned

Join Date:
Dec 2005
Location:
Cincinnati Ohio
Posts:
1,034
Plugin Contributions:
3

Re: box around product image

Yes, find the class to that section and add to it.

 
border: solid 1px #c0c0c0;
 

Change the border size if you wish just change 1px and to change color change #c0c0c0

PCI Certified Web Hosting - ControlScan, Security Metrics (Platinum Partner), McAfee, TrustKeeper
Business Class Web Hosting - Linux and cPanel Powered

30 Dec 2008, 9:09 PM
#5
rickiesdiscount avatar

rickiesdiscount

Zen Follower

Join Date:
Jul 2008
Posts:
229
Plugin Contributions:
0

Re: box around product image

How do you move the shopping cart total up in the header like in that website?...ive tried using cart summary sidebox, but everytime i do the words are either below my header image or above it i have no idea how to get it on top of the header image like in the site i listed....

ive also been wanting to have my search bar on top of my header image...like in the site i listed below...i actually want to put it in the same spot...do you know how do accomplish this?

i deleted the header bar a while back because i didnt want it...is it not gonna be possible without that?

http://www.sonicelectronix.com/

i appreciate all your help thanks

30 Dec 2008, 11:54 PM
#6
knuckle_101 avatar

knuckle_101

Totally Zenned

Join Date:
Dec 2005
Location:
Cincinnati Ohio
Posts:
1,034
Plugin Contributions:
3

Re: box around product image

The shopping cart totals in the header on this particular website is custom coded into its design however you can start here with this module from the downloads

http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_62&products_id=498

Even though it is set for 1.3.7 if you are using 1.3.8a it may work but have not tested it. So backup before attempting.

ive also been wanting to have my search bar on top of my header image...like in the site i listed below...i actually want to put it in the same spot...do you know how do accomplish this?

This is also custom coded. Use the search code form the default template and integrate it into your own design

PCI Certified Web Hosting - ControlScan, Security Metrics (Platinum Partner), McAfee, TrustKeeper
Business Class Web Hosting - Linux and cPanel Powered

31 Dec 2008, 6:46 AM
#7
rickiesdiscount avatar

rickiesdiscount

Zen Follower

Join Date:
Jul 2008
Posts:
229
Plugin Contributions:
0

Re: box around product image

appreciate the answer i figured it would take custom coding to do that....

I have the borders/boxes working around my product description and everything but they do not display properly in mozilla....i added the code you mentioned....but the bullet points are outside of the border box in the product descriptions and the border around the product image on the product page doesnt even show up at all...

Please help thanks
http://www.rickiesdiscountelectronics.com/15-widescreen-hdtv-lcd-tv-2886.html

there is just an example page but it does it on all product pages obviously..

31 Dec 2008, 8:13 PM
#9
knuckle_101 avatar

knuckle_101

Totally Zenned

Join Date:
Dec 2005
Location:
Cincinnati Ohio
Posts:
1,034
Plugin Contributions:
3

Re: box around product image

This is all stylesheet related and you will have to work with it to make it align properly and so on..

I would use the developer tool for FF to fix this it is a designers best friend. There is more to it then just adding a single line of style.

http://www.w3schools.com/css/ maybe be of some assistance

PCI Certified Web Hosting - ControlScan, Security Metrics (Platinum Partner), McAfee, TrustKeeper
Business Class Web Hosting - Linux and cPanel Powered

4 Jan 2009, 11:19 AM
#10
first_trading avatar

first_trading

Zen Follower

Join Date:
Aug 2008
Posts:
244
Plugin Contributions:
0

Re: box around product image

nice job rikkies discount....................don't suppose you could tell me how you got the product description part to have those clickable tabs at the top so i could get the same thing on my site. i'd like my product description to be like yours.

cheers.

http://www.actionfigures4u.com/index.php?main_page=product_info&cPath=98_99&products_id=328

10 Jan 2009, 7:22 PM
#11
grimmy2016 avatar

grimmy2016

New Zenner

Join Date:
Oct 2008
Posts:
18
Plugin Contributions:
0

Re: box around product image

OK, since we are on the subject of product listings and CSS.

Can anyone tell me if there is a 'relatively' easy way to make my product pages display in a format more similar to http://store.sextoy.com/prod_info.php?a=sextoycom&pnum=DJ0901-10 [ADULT SITE]

I like the larger image and I like having it on the right side. I have been looking at the admin and cant find a way to swap it.

Any help?

OH, one more question, on this page http://www.echo-electronics.com/alarms-c-212.html I like the category listing page to be in rows and columns, much like we already have on featured and specials. Is there an easy way to get the same layout here?

On my site for example, when you click Bachelorette, I would like the grid system you see when you you at the section call Featured Products on my homepage http://delicate-delights.com/ [ADULT SITE]

Sorry I know its multiple questions... just thought this was agood thread to ask in since we all have similar questions.

Scott B.