Jump to content

Remmoving the white square around pictures


Recommended Posts

If you upload a picture the surroundings of that picture is white ( sizes used can be seen in preferences-images)

But my pictures are not square but rectangle ( images of bottles)

The background of the page is olive-green, but the image of the bottle is surrounded by a white border.

How can I make that the square dissappears and trhe same color is used as the surrounding ?

see also attached file

 

note using gifs is no solution :gifs are not accepted and the bacxkground of the pictures is a brick-pattern, not the white square.

I think I must editge the prfeences-images section somehow to include a kind of basic-square-color (which is now white)

 

But how, that's the question ?

 

Tx

Patriek

 

post-474529-0-37962700-1390500969_thumb.jpg

post-474529-0-68685400-1390501118_thumb.jpg

Link to comment
Share on other sites

you mean "background" not borders.

your images must be "transparent" (with no background)

then go to preferences > images and use "PNG" image type.

 

now each image will be "transparent" without background (only when your original image is without background)

Link to comment
Share on other sites

yes you can, this border is a part of css styles.

in this case it's necessary to remove it inside your css styles.

 

for default theme you have to:

remove border 1px solid #ccc from:

#product_list a.product_img_link {
overflow: hidden;
position: relative;
float: left;
display: block;
margin-right: 14px;
border: 1px solid #ccc;
}

it's a part of: /themes/default/css/product_list.css file line ~42

Link to comment
Share on other sites

  • 5 months later...

Hi Guys!

 

First, thank you so much, Vekia!  I've had our developers working on this problem for 2 weeks.  After they came back and said they couldn't remove the border, I KNEW it had to be a CSS issue.  I found this post and, voila, it worked.

 

I wanted to thank you and to add that, chances are that if you needed to remove these borders, you probably need to remove the borders on the product page for the main image AND the thumbnails.  That's accomplished by modifying the Product.css located at /themes/default/css/product.css.  Their are 2 "border" statements that need to be deleted or commented out:

   Main Image is at line 18

   Thumbnail is at line 82

 

BTW, the version I'm working on is 1.5.4.1.  I'm sure the files are similar for the newer versions.

 

Thanks again!

 

Clem

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...