Recherche module | Plusieurs colonnes pour produits

[fabhardcore]

Bonjour,

 

Je recherche un module me permettant d afficher mes produits en plusieurs colonnes.

 

Actuellement, ils sont affichés sur une ligne droite vertical.

 

Je suis sous prestashop 1.5.1 avec le thème par défaut.

 

Merci.

[jeckyl]

Bonjour,

 

Pourquoi donc un module alors que cela n'est rien d'autre que du CSS et du design ?

[devprestacom]

Bonjour,

 

Il faut modifier le css

 

Cordialement,

[fabhardcore]

N'ayant pas énormément de connaissances en langage... Je ne savais pas vers quoi me diriger.

 

Si j'ai bien compris, je dois modifier des valeurs dans les fichiers product-list.tpl et product_list.css?

 

J'ai lu ce topic mais les changements que j'effectue sur le fichier ne me donne pas de résultat.

 

Je dois vider le cache smarty apparement pour voir le résultat mais je ne trouve pas comment faire cela sur la version 1.5.1.0 de prestashop.

 

Voici le product_list.css

 

ul#product_list {
list-style-type: none
}
#product_list li {
 margin-bottom: 14px;
 padding: 12px 8px;
 border: 1px solid #eee;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px
}
 #product_list li a {
  color: #374853;
  text-decoration: none
 }
#product_list li .left_block {
float:left;
padding-top:58px;
width:15px
}
#product_list li .left_block  .compare label {display:none;}
 #product_list li p.compare input {
  vertical-align: text-bottom
 }
#product_list li .center_block {
  float: left;
padding:0 7px;
  width: 342px;/* 356 */
border-right:1px dotted #ccc
}
#product_list a.product_img_link {
 overflow:hidden;
 position:relative;
 float: left;
 display:block;
 margin-right: 14px;
 border: 1px solid #ccc
}
 #product_list a.product_img_link img {
  display: block;
  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);
  -ms-transform: rotate(45deg);
  background-color: #990000
 }
#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 {
position:relative;
  float: left;
  width: 145px;
  text-align: right
}
#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {
 display: block;
 font-weight: bold;
 color: #990000;
 text-transform: uppercase
}
#product_list li .discount {
 position:absolute;
 top: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 {
 margin:26px 0 15px 0;
}
 #product_list li .price {
  display: block;
  margin-bottom: 15px;
  font-weight:bold;
  font-size: 18px;
  color:#990000
 }
 #product_list li span.availability {
  display:none;
  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}

[Olivier CLEMENCE]

Dans paramètres avancés > Performances vous pouvez forcer la recompilation smarty et désactiver le cache.