Jump to content

Edit History

Mary Brezden

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.

Women_Prestashop_1_6_before.png

Women_Prestashop_1_6_after.png

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

Mary Brezden

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.

Women_Prestashop_1_6_before.png

Women_Prestashop_1_6_after.png

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 a have another theme

×
×
  • Create New...