[SOLVED] Help with subcategory

[Henrik_F]

Hi.

I'm new with PrestaShop and have just started to try and learn how to create a web shop. I'm using version 1.5.4.1.

I have a question which perhaps someone could help me with.

Now we have a standard sub-category (See attached image "product now") with some products. We would like to change it to another (see attached image "product like this").

Is it possible and how can we do it?


Sincerely,

Henrik

Edited April 28, 2014 by Henrik_F (see edit history)

[Paulito]

Good morning

Have a look at this great tutorial

 

http://mypresta.eu/en/art/developer/prestashop-products-list-grid-view.html

 

Paul

[Henrik_F]

Hi.

Thanks. It's working.

 

I think that the black field with the cart is not very convenient and can not find anything about how to cancel it.


Anybody know how to it?

Sincerely,
Henrik

[Paulito]

Just have a look at the css

Paul

[Henrik_F]

Hi.

Thanks Again.

 

I do not quite master the codes yet.
Could you perhaps be kind and help me with which lines I should look at?

Thanks in advance

Henrik

 

 

#product_list .poverlay {
top:0px;
left:0px;
position:absolute;
display:block;
width:100%;
height:100%;
visibility:hidden;
z-index:2;
background:rgba(0,0,0,0.7);
}
 
#product_list .cartbutton {
margin-left:10px;
margin-top:90px;
display:inline-block!important;
}
 
#product_list .dropshadowclass {
border:solid 1px #EFEFEF;
}
 
#product_list .dropshadowclass:hover {
border:solid 1px #CCC;
-moz-box-shadow:0px 0px 3px #999;
-webkit-box-shadow:0px 0px 3px #999;
box-shadow:0px 0px 3px #999;
}
 
ul#product_list {
list-style-type:none
}
 
#product_list li {
text-align:center;
margin-bottom:14px;
border:1px solid #eee;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding:10px;
width:144px;
display:inline-block;
vertical-align:top;
margin:2px;
position:relative;
}
 
#product_list li a {
color:#374853;
text-decoration:none;
}
 
#product_list li .left_block {
/*float:left;
        /*padding-top:58px;*/
/*width:15px;*/
clear:both;
}
 
#product_list li p.compare {
position:absolute;
color:#FFF;
width:100%;
background:rgba(0,0,0,0.5);
display:block;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
 
#product_list li .viewbutton {
position:absolute;
display:block;
width:100%;
padding-top:10px;
padding-bottom:10px;
background:rgba(0,0,0,0.5);
bottom:0px;
left:0px;
}
 
#product_list li .left_block .compare label {
display:none;
}
 
#product_list li p.compare input {
vertical-align:text-bottom
}
 
#product_list li .center_block {
text-align:center;
}
 
#product_list li .center_block .product_desc {
display:none;
clear:both;
}
 
#product_list li .center_block h3 {
font-size:16px;
padding-top:10px;
margin-top:10px;
display:block;
width:100%;
clear:both;
text-align:center;
}
 
#product_list a.product_img_link {
overflow:hidden;
position:relative;
display:block;
border:1px solid #ccc;
text-align:center;
margin:auto;
}
 
#product_list a.product_img_link img {
vertical-align:bottom;
}
 
#product_list li span.new {
display:block;
position:absolute;
top:15px;
right:-30px;
padding:1px 4px;
width:101px;
font-size:10px;
color:#fff;
text-align:center;
text-transform:uppercase;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
background-color:#990000;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* Newer browsers */
}
 
.ie8 #product_list li span.new {
top:111px;
right:0;
width:94%
}
 
.ie7 #product_list li span.new {
top:111px;
right:0;
width:94%
}
 
#product_list li h3 {
padding:0 0 10px 0;
font-size:13px;
color:#000
}
 
#product_list li a {
color:#000;
text-decoration:none;
}
 
#product_list li p.product_desc {
overflow:hidden;
padding:0;
line-height:16px;
}
 
#product_list li p.product_desc,#product_list li p.product_desc a {
color:#666;
}
 
#product_list li .right_block {
display:block;
clear:both;
}
 
#product_list li .discount,ul#product_list li .online_only {
display:block;
font-weight:bold;
color:#990000;
text-transform:uppercase
}
 
#product_list li .discount,ul#product_list li .on_sale {
position:absolute;
bottom:0;
right:0;
display:inline-block;
font-weight:bold;
padding:1px 5px;
font-size:10px;
color:#fff;
text-transform:uppercase;
background:none repeat scroll 0 0 #9B0000
}
 
#product_list li .online_only {
margin:0 0 10px 0
}
 
#product_list li .content_price {
position:relative;
}
 
#product_list li .price {
display:block;
margin-bottom:15px;
font-weight:bold;
font-size:18px;
color:#990000
}
 
#product_list li span.availability {
color:#488C40
}
 
#product_list li .ajax_add_to_cart_button {
padding-left:20px
}
 
#product_list li .ajax_add_to_cart_button span {
display:block;
position:absolute;
top:-1px;
left:-12px;
height:26px;
width:26px;
background:url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent
}
 
#product_list li .lnk_view {
display:block;
margin-top:15px;
padding:0 10px;
border:none;
font-weight:bold;
color:#0088CC;
background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent
}
 
#product_list li .lnk_view:hover {
text-decoration:underline
}
 

[vekia]

 

 

I think that the black field with the cart

it's hard to imagine about what part of shop you're talking

can you point us about what feature you're talking? some screenshot?

[Paulito]

Good morning

 

I assume he means this

 

http://screencast.com/t/Vs8zOrpf

 

Paul

[Henrik_F]

Hi.

 

Yes that's correct Paul . Thanks.

 

 

Henrik

[vekia]

remove background param from:

#product_list .poverlay {
top:0px;
left:0px;
position:absolute;
display:block;
width:100%;
height:100%;
visibility:hidden;
z-index:2;
background:rgba(0,0,0,0.7);
}

[Henrik_F]

Thanks