[SOLVED] Change border on product images

[dna]

how can i change the border on product images....i want to remove borders or change color. can u help please

[rocky]

Topic split - please post unrelated questions in separate topics

Do you mean the grey border or the white border? You can change the grey border in the /* product.tpl */ section of css/global.css in your theme's directory:

#primary_block #image-block {
   border: #d0d1d5 solid 1px;
   height: 300px;
   width: 300px
}

Delete the border line or change the colour from #d0d1d5 to whatever colour you want.

Removing the white border is more difficult. You can go to Preferences > Images and change the "large" size so it fits the image proportions exactly. All your product images must have the same proportions for that to remove the white border though. It is not possible to generate different-sized thumbnails for different products.

[dna]

[sOLVED] works great...thank you so much

[rocky]

Please edit your first post and add [sOLVED] to the front of the title.

[Thielsen]

I need to get rid of the border around the product also, but my code looks different and I can't figure out what to change to loose the border.

Here is the bit of code in my themes/css/global.css

/* ————— product.tpl ————— */
#primary_block {}
#primary_block #pb-right-column {width:310px;float:left;margin:10px 0 0 0;background:url(../img/product_img_block.gif) 0 0 no-repeat;}


/* product img */
#primary_block #image-block {width:290px;height:290px;padding:10px 0 0 10px;}
#primary_block #image-block img#bigpic {width:290px;height:290px;cursor:pointer;}
#primary_block #image-block img#bigpic.jqzoom {cursor:crosshair;position:relative;}

Thanks in advance for any help.

[Sarak]

Topic split - please post unrelated questions in separate topics

 

Do you mean the grey border or the white border? You can change the grey border in the /* product.tpl */ section of css/global.css in your theme's directory:

 

#primary_block #image-block {
border: #d0d1d5 solid 1px;
height: 300px;
width: 300px
}

 

Delete the border line or change the colour from #d0d1d5 to whatever colour you want.

 

Hi Rocky,

 

I'd like to place a border around my product images but my global.css does not have a /* product.tpl */ section (combed through it a million times, I can't find it)

 

I tried to insert it myself, along with the code for the border you mentioned, but nothing happened. What am I missing?

Edited June 16, 2012 by Sarak (see edit history)

[halennoor]

Hi Rocky,

 

I'd like to place a border around my product images but my global.css does not have a /* product.tpl */ section (combed through it a million times, I can't find it)

 

I tried to insert it myself, along with the code for the border you mentioned, but nothing happened. What am I missing?

 

If you are using 1.4.go to product.css and edit border values as you wish:

#primary_block #image-block {
  border: red solid 1px;
  height: 300px;
width: 300px
}

Edited July 2, 2012 by halennoor (see edit history)

[Sarak]

Prestashop Version - 1.4.8.2

 

I think it may be an issue with the custom theme I'm using.

 

Nothing I'm editing in the product.css is appearing. It already states that my product titles are uppercase when they're not. And I'd like to change the "Add To Cart" button to a different image I have uploaded but it's not working.

 

It's not a major issue, I'm ok without product borders. It just doesn't make sense :/

 

Thanks for your advice though

[halennoor]

i see. what theme are you using though and if you can share with us your site so others can have a look too

[Sarak]

Hey, just noticed the product border is working, I was expecting it to be a border around the product images in the product list, rather then the picture of the actual product.My mistake.

 

Although, the add to cart button still isn't using the image I would like it to.

 

I am using a theme from prestadesigner.com. My site is http://www.dilevafashion.com (but it's in no way finished yet)

Edited July 2, 2012 by Sarak (see edit history)

[halennoor]

i think it is a pretty good looking theme your using. You just need to figure out what to change in the css files for some of the changes to occur. By the way, if you hv not changed your Preferences>Performance> Force compile turn to YES and cache turn to NO setting --- do that when your editing or making changes in your site. Reverse it after your finished with editing.

 

 

Replace the image by changing the line for background in global.css

 

Here as an example i replaced it with green.

 

 

 

span.exclusive_mini, span.exclusive_small, span.exclusive, span.exclusive_large, span.exclusive_large_disabled {

 

position:relative;

 

display:inline-block;

 

padding:5px 7px;

 

border:1px solid #f1553f;

 

-moz-border-radius: 3px;

 

-webkit-border-radius: 3px;

 

border-radius: 3px;

 

font-weight:bold;

 

color:#ffffff;

 

background:green;

 

 

cursor: pointer;

 

}

 

 

if you hv image you have to add the image url in place of the background:green;

 

background-image: url (".../img/add_to_cart_button.png");

 

 

 

For the uppercase situation find text-transform:uppercase and change it to text-transform:none;

 

Hope it helps.