Forums / Templates, Stylesheets, Page Layout / How can I add a border to my products' thumbnail pictures?

How can I add a border to my products' thumbnail pictures?

Started by dkunev on 7 Jun 2011, 9:18 PM · Views: 1,326

Results 1 to 9 of 9
7 Jun 2011, 9:18 PM
#1
dkunev avatar

dkunev

Zen Follower

Join Date:
May 2011
Posts:
117
Plugin Contributions:
0

How can I add a border to my products' thumbnail pictures?

Hello guys!

I'm having problems adding a 1 pixel border to all my thumbnail pictures...

Playing with css with the help of our dear forum member I managed to add a border to my Main image and Aditional images in Product info display with code:

.additionalImages img {border: 1px solid #aabbcc;}

#productMainImage img {border: 1px solid #aabbcc; }

Also managed to add the border to all images in the NewProducts and Featurd and Special products center boxes with this code:

.centerBoxContentsNew img {border: 1px solid #aabbcc;} 

.centerBoxContentsSpecials img {border: 1px solid #aabbcc;} 

The furthest i got triyng to fi this is adding:

.centerBoxContents img {border: 1px solid #aabbcc;}

But this adds the border to the Buy Now buttons too :no:

Please help!

7 Jun 2011, 9:32 PM
#2
haredo avatar

haredo

Totally Zenned

Join Date:
Apr 2006
Location:
Texas
Posts:
6,189
Plugin Contributions:
0

Re: How can I add a border to my products' thumbnail pictures?

Add this to the bottom of the includes/templates/black_pure_free/css/stylesheet.css

.itemImage {border: 1px solid #cccccc;
margin: .2em
}

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.

Zen Cart Certified hosting at myZenCartHost.com.

7 Jun 2011, 9:42 PM
#3
dkunev avatar

dkunev

Zen Follower

Join Date:
May 2011
Posts:
117
Plugin Contributions:
0

Re: How can I add a border to my products' thumbnail pictures?

Thanks for sticking with me haredo....

That allmost did work!!! Only the border is not on te edge of the picture itself pot more on the edge of the field...

look here: gadgetshop.bg/index.php?main_page=index&cPath=2 compare the ones above with the ones below!

7 Jun 2011, 9:53 PM
#4
haredo avatar

haredo

Totally Zenned

Join Date:
Apr 2006
Location:
Texas
Posts:
6,189
Plugin Contributions:
0

Re: How can I add a border to my products' thumbnail pictures?

Well if you say so then....

Change to this:

.itemImage img{
border: 1px solid #AABBCC;
}

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.

Zen Cart Certified hosting at myZenCartHost.com.

7 Jun 2011, 10:02 PM
#5
dkunev avatar

dkunev

Zen Follower

Join Date:
May 2011
Posts:
117
Plugin Contributions:
0

Re: How can I add a border to my products' thumbnail pictures?

Nope... that makes it even worse! It bonds all the images' borders together and it starts looking like a table!

Increasing the margin squeezes the sides together! I could try and eyeball it but then if the columns per row are 3 instead of 4 like most of my pages it doesen't look good...

can we merry .centerBoxContents and .itemImage somehow to make it work?

7 Jun 2011, 10:05 PM
#6
haredo avatar

haredo

Totally Zenned

Join Date:
Apr 2006
Location:
Texas
Posts:
6,189
Plugin Contributions:
0

Re: How can I add a border to my products' thumbnail pictures?

please post the code I gave you so i can see live please...

.itemImage img {
border: 1px solid #AABBCC;
margin: 0.2em;
}

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.

Zen Cart Certified hosting at myZenCartHost.com.

7 Jun 2011, 10:10 PM
#7
dkunev avatar

dkunev

Zen Follower

Join Date:
May 2011
Posts:
117
Plugin Contributions:
0

Re: How can I add a border to my products' thumbnail pictures?

It's live now!

7 Jun 2011, 10:11 PM
#8
dkunev avatar

dkunev

Zen Follower

Join Date:
May 2011
Posts:
117
Plugin Contributions:
0

Re: How can I add a border to my products' thumbnail pictures?

OMG haredo YOU ARE THE BEST!!!!!!:clap:

The first time I didn't see taht you added "img" to the code! Stupid me!

A BIG THANK YOU! :bigups:

7 Jun 2011, 10:22 PM
#9
haredo avatar

haredo

Totally Zenned

Join Date:
Apr 2006
Location:
Texas
Posts:
6,189
Plugin Contributions:
0

Re: How can I add a border to my products' thumbnail pictures?

You are most welcome, ty for posting the solution...

Never bite the hand that feeds you for FREE :smile:

Must better on posting now, Yes post one question at a time ..

Nice site BTW

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.

Zen Cart Certified hosting at myZenCartHost.com.