Jump to content
mistertendance

Affichage Des Produits Par Colonnes (Non Par Lignes)

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

parfaitement clair !!!

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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.....

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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;

Share this post


Link to post
Share on other sites

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....

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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}








Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More