Modificar apariencia de los baner o letreros en productos en 3D

[Mary Brezden]

Holas!!

Chicos, alguien sabe de que forma puedo hacer que los productos de una pagina se vena como en la imagen? Lo que me interesa es que esten dentro de un cuadro gris ligero y arriba aparezca el letrero en azul 3d (en mi caso no dice nuevo, aparece el descuento, no quiero modificar el titulo, solo quiero dejar esa apariencia)

 

Gracias!

 

[Divyesh Prajapati]

I guess you are using Prestashop v 1.6 and you would like add borders all around without hover on product... Based on that assumptions you can achieve this by modifying css themes/default-bootstrap/css/product_list.css.

Make following edits in above mentioned css file.

/* Approx line# 4 : to show product name in upper case letter */
ul.product_list .product-name {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-transform: uppercase;
}

/* Approx line#164 */
ul.product_list.grid > li .product-container {
    background: #fff;
    padding: 0;
    position: relative;
    border: 1px solid #d6d4d4;
}

/* Approx line#170 */
ul.product_list.grid > li .product-container .product-image-container {
    border-bottom: 1px solid #d6d4d4;
    padding: 9px;
    margin-bottom: 13px;
    position: relative;
}

/* Approx line#235 ; if you want to remove shadow */
ul.product_list.grid > li.hovered .product-container {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    position: relative;
    z-index: 10;
}

/* Approx line#222 ; if you want to remove shadow*/
ul.product_list.grid > li .product-container .functional-buttons {
    background: none;
    padding: 11px 0 5px;
    border-top: 1px solid #ccc;
}

After doing css changes; you can have results like attached images. I have shown both before and after images.

[Mary Brezden]

hace 19 horas, Divyesh Prajapati dijo:

I guess you are using Prestashop v 1.6 and you would like add borders all around without hover on product... Based on that assumptions you can achieve this by modifying css themes/default-bootstrap/css/product_list.css.

Make following edits in above mentioned css file.

/* Approx line# 4 : to show product name in upper case letter */
ul.product_list .product-name {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-transform: uppercase;
}

/* Approx line#164 */
ul.product_list.grid > li .product-container {
    background: #fff;
    padding: 0;
    position: relative;
    border: 1px solid #d6d4d4;
}

/* Approx line#170 */
ul.product_list.grid > li .product-container .product-image-container {
    border-bottom: 1px solid #d6d4d4;
    padding: 9px;
    margin-bottom: 13px;
    position: relative;
}

/* Approx line#235 ; if you want to remove shadow */
ul.product_list.grid > li.hovered .product-container {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    position: relative;
    z-index: 10;
}

/* Approx line#222 ; if you want to remove shadow*/
ul.product_list.grid > li .product-container .functional-buttons {
    background: none;
    padding: 11px 0 5px;
    border-top: 1px solid #ccc;
}

After doing css changes; you can have results like attached images. I have shown both before and after images.

Hi Divyesh!  Thanks for the quickly response.... well I'm using Prestashop 1.7, I don´t see the route themes/default-bootstrap/css/product_list.css because I have another theme

Edited June 11, 2020 by Mary Brezden (see edit history)

[Divyesh Prajapati]

Oh... The changes I have suggested is for 1.6

[Mary Brezden]

hace 13 horas, Divyesh Prajapati dijo:

Oh... The changes I have suggested is for 1.6

don't worry, I appreciate your time and support, I'm sure someone will work on PS 1.6 🙂

[Divyesh Prajapati]

2 hours ago, Mary Brezden said:

don't worry, I appreciate your time and support, I'm sure someone will work on PS 1.6 🙂

You are using Prestashop 1.7 and in product listing page what are changes you want to make? One thing that I can see is product name is in uppercase... What other things you want to do?

[Mary Brezden]

En 11/6/2020 a las 10:00 AM, Divyesh Prajapati dijo:

Oh... The changes I have suggested is for 1.6

 

hope someone works on PS 1.6 😉

[Mary Brezden]

En 12/6/2020 a las 1:53 AM, Divyesh Prajapati dijo:

You are using Prestashop 1.7 and in product listing page what are changes you want to make? One thing that I can see is product name is in uppercase... What other things you want to do?

I am going to attach an image to explain a little more. On the left side is what my page currently looks like and I like the flag as the discount restalta and the box on the product .. thanks !!

[Divyesh Prajapati]

1 hour ago, Mary Brezden said:

I am going to attach an image to explain a little more. On the left side is what my page currently looks like and I like the flag as the discount restalta and the box on the product .. thanks !!

This will work I guess;  put this in file themes/classic/assets/css/custom.css

li.product-flag.new {
    position: absolute;
    right: -10px;
}
li.product-flag.new::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid #5fa9b9;
    transform: rotate(90deg);
    right: 0px;
    top: 30px;
    border-top-color: transparent;
    border-right-color: transparent;
}

li.product-flag.discount {
    position: absolute;
    left: -10px;
}
li.product-flag.discount::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid #ea9c74;
    transform: rotate(180deg);
    left: 0px;
    top: 30px;
    border-top-color: transparent;
    border-right-color: transparent;
}

 

Edited June 14, 2020 by Divyesh Prajapati (see edit history)