rectangles with rounded corners - how can I do it in prestashop?

[d.crysty23]

I've created some rectangles with rounded corners that look like this (see image) and I don't know how to put them in prestashop. I have them in html+css and I want them in fullscreen, just like in the image. Is there an existent module for this? Or can I create them from the article?

[Carolina Custom Designs]

Just transfer your existing CSS to your PS theme in the appropriate location. The CSS will work just fine within PS.

 

Marty Shue

[d.crysty23]

you mean that I should put the code lines directly in the global.css? 

I have other names for the divs

#product1{

    float:left;

    width: 443px;

    height: 194px;

    background: #fff;

	border: 1px solid black;

	border-color:#999999;

	margin-top:33px;

	margin-left:20px;

	border-radius:10px;

}

#image_wine{

    float:left;

	margin-top:-25px;

	margin-left:35px;

    width: 90px;

	height:239px;

	background-image:url(image/wine1.png);

}

#tile_image_product1{

   float:left;

   padding-left:100px;


}

[vekia]

hello

 

everything depends on template file construction and class / id you use.

is your website online? if so, please share url to page, where you're trying to implement these styles

[d.crysty23]

 it's not online. I can give you whatever file you want in order to solve this problem. It's very important and I'm trying to solve it.

[vekia]

ok, so where you want to change these styles?

in products listings like category view, manufacturers, tags, etc ?

or maybe in featured products on homepage?

[d.crysty23]

 in featured products on homepage. I want to make it like in the picture and publish it on the home page

[vekia]

ok thank you so you have to modify this file:

 

instead of:

#featured-products_block_center li {
margin-right: 10px;
padding: 10px 0;
width: 126px;
height: 240px;
}

use:

    #featured-products_block_center li {float:left;
    width: 443px;
    height: 194px;
    background: #fff;
	border: 1px solid black;
	border-color:#999999;
	margin-top:33px;
	margin-left:20px;
	border-radius:10px;
}

[d.crysty23]

the module looks like this now (pic1). I'd also like to know how to move the text to the right of the image. What class should I change?

 

[vekia]

it's not enough space to display more than 1 product in one row, this is why they appear line by line

[d.crysty23]

 I apologize for the double topic, it was a mistake. The theme I'm using is the default one and I've managed to modify it. Now I want the images to run over the borders like it's shown in the printscreen below. It's strange for me as well that in the html theme I created the images have a size of 94x246 but when I make changes in the module it looks different. Do you know how I could solve this problem?

 

 

http://www.3bwine.com/CRISTY/prestashop/

[vekia]

for the first it's necessary to modify home_default imagetype dimensions.

go to preferences > images, click on eadit near this imagetype and define own width and height params

 

them remove overflow:hidden; from:

#featured-products_block_center .product_image {
display: block;
position: relative;
overflow: hidden;
}

it's a part of http://www.3bwine.com/CRISTY/prestashop/modules/homefeatured/homefeatured.css file

[d.crysty23]

 i notice here a list with several image types and the places where they are published. Which of them should modify? or should I click "add new" and add my own type?

 Do you know what is the tag for text and price? I can't seem to move the text to the right and make it look nice. Thank you for your help

[vekia]

you have to change image named home_default

it's a image for products cover in homefeatured module

[d.crysty23]

 I've done as you told me, but with no result. The image is unclear, it loses quality. I set it with a width of 90px and a height of 239 px. I've also attached the image from BO so you can understand exaclty what I've done and to tell me what is wrong

.products_block img { float:left;width:90px;
	height:239px;margin-top:-26px;margin-left:25px;}

[vekia]

this is your image: 

as you can see it's almost rectangle

and on picture you attached your image looks like:

 

you have to:

change image size to image that i attached above

then upload images to products which have proportional size (not rectangle) because your images will be deformed, like it is now.

[d.crysty23]

Thanks,problem with image was solved.

 Do you know how I can allign the title on two lines? Right now, the title is only displayed in half and I want it to be like in the printscreen I posted before

 

 

PS: I have the same problem with the text from "featured products". The description is too short and I can't find the tag that needs to be modified in order to center the text and fix it up

 

Grazie!!!

Edited February 9, 2014 by d.crysty23 (see edit history)