Affichage Des Produits Par Colonnes (Non Par Lignes)

[mistertendance]

bonjour à tous,

 

Je cherche désesperemment comment changer l'affichage des produits sur prestashop_new pour qu'ils s'affichent en colonnes (comme sur la page d'accueil) et pas en lignes

 

voilà j'espere avoir ete explicite

 

merci d'avance pour vos reponses

 

mon site http://www.flashtendances.com

[Carl Favre]

Bonjour flashtendances,

 

Dans category.css tu peux modifier

 

 

.inline_list li {


border-bottom: 1px dotted #CCCCCC;
padding: 10px 0;
}

 

 

Et ajouter float:left et width:150px par exemple.

 

Après il te faudra également remettre en forme ton texte et tes images.

[mistertendance]

ok merci beaucoup carl favre je vais essayer si ça marche je mets en résolu sinon je reviens avec d'autres question...

[Carl Favre]

Ca marche . N'oublie pas de forcer la compilation et de vider le cache de PrestaShop pour que tu puisses voir les changements !

[misterpink]

Salut

 

Sinon tu as ce module qui te permet de choisir entre liste ou colonne en jquery.

listorgridswitch_1_7.zip

[maxpax05]

Bonjour tout le monde,

 

nouveau sur le forum laissez moi avant tout vous souhaiter une merveilleuse annee 2011 !

 

je suis egalement en train de monter une boutique en ligne et je rencontre egalement le probleme sur la mise des produits en colonne.

 

je ne comprend pas ( trop bete...) ou et comment ajouter "float:left et width:150px par exemple."

 

 

merci d'avance pour votre reponse

 

Bonjour flashtendances,

 

Dans category.css tu peux modifier

 

 

.inline_list li {


border-bottom: 1px dotted #CCCCCC;
padding: 10px 0;
}

 

 

Et ajouter float:left et width:150px par exemple.

 

Après il te faudra également remettre en forme ton texte et tes images.

[Carl Favre]

Bonjour maxpax05 et bonne année à toi également .

 

Et bien tu peux changer dans le fichier category.css

 

.inline_list li {
	border-bottom: 1px dotted #CCCCCC;
	padding: 10px 0;
}

 

par

 

.inline_list li {
	 border-bottom: 1px dotted #CCCCCC;
	padding: 10px 0;
float:left;
width:150px;
}

 

Est-ce plus clair ?

[maxpax05]

parfaitement clair !!!

 

reactivite, maitrise et bonne humeur.... j'aime ce forum et cette communaute !

[maxpax05]

bon soucis.... cela me fait disparaitre les articles........

[Carl Favre]

Tu pourrais indiquer le lien vers ton site pour voir ?

[maxpax05]

www.lemeilleurdelamode.fr le site est en developpement donc pas trop de critiques hein

[Carl Favre]

Pour les articles qui ont disparu, cela le fait de façon aléatoire ?

 

Ou bien parles-tu des images qui ne sont pas visibles ?

[maxpax05]

si je repasse sur un thème non modifié ( par exemple jeans hommes) , 4 articles apparaissent,

 

une fois le thème modifié, la mention " 4 articles " est bien la , mais aucune photos, ni prix ni rien.....

[Carl Favre]

Ok, le problème c'est que le bout de code donné était spécifique au thème de flashtendances.

 

Pour le tien qui est basé sur le nouveau thème avec déjà quelques modifications ce n'est pas forcément la solution.

 

Remets ton thème comme il était avant et je regarderai comment mettre en colonne.

[maxpax05]

voila , merci d'avance

[Carl Favre]

Il te faudrait donc modifier dans product_list.css la partie :

 

 

#product_list li {

 

 

border: 1px solid #EEEEEE;

border-radius: 3px 3px 3px 3px;

margin-bottom: 14px;

padding: 12px 8px;

}

 

Et ajouter float:left; et width:150px;

[maxpax05]

fait.... mais ce qui est extrêmement bizarre, c'est qu'ils apparaissent 1 fraction de seconde puis plus rien.....

 

je ne veux pas abuser de ton temps....

[Carl Favre]

Dans ton backoffice, menu preferences\performances, tu as bien vidé ton cache et forcé la compilation suite à cette modification ?

[maxpax05]

oui

[maxpax05]

voici le code de product_list.css

 

 

ul#product_list {
list-style-type: none
}
#product_list li {

border: 1px solid #EEEEEE;
border-radius: 3px 3px 3px 3px;
margin-bottom: 14px;
padding: 12px 8px;
float:left;
width:150px;
}
 #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);
  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 .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: inline-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}

[maxpax05]

en regardant ma page, ( tjs sur l'exemple jeans homme ) on voit 2 fois la ligne comparer.....

[Carl Favre]

En regardant à nouveau ton site je ne vois pas les modifications dans ton product_list li.

 

J'ai toujours :

 

 

#product_list li {


border: 1px solid #EEEEEE;
border-radius: 3px 3px 3px 3px;
margin-bottom: 14px;
padding: 12px 8px;
}

 

Tu pourrais me donner accès à ton backoffice par MP ?

[capsizone]

Bonjour et Bonne Année 2012,

 

Le problème de la disparition des produits après une fraction de

seconde d'affichage me fait penser à un soucis que j'ai déjà rencontré

avec le module "Navigation à facettes" pas ou mal configuré.

Essayez en désactivant ce module.

[maxpax05]

bonne année a toi aussi,

 

c'est possible, mais je viens de choisir la méthode : Balles neuves, donc je repars de 0, en faisant bien attention.

 

je vous donne le lien des que fini, encore merci