Painternadege Posted October 7, 2013 Share Posted October 7, 2013 Bonsoir, Je suis sous prestashop 1.5, les produits images catégories sont à la verticale (ci-joint image), je souhaiterais les mettre à l'horizontal sur toute la longueur de la page (une colonne à gauche et une colonne centrale). Pourriez-vous me dire quel fichier sur le serveur dois-je modifier dans les détails. Merci par avance de votre réponse, Nadège Link to comment Share on other sites More sharing options...
Szed Posted October 8, 2013 Share Posted October 8, 2013 Il nous faudrait un lien pour te dire exactement les propriété à modifier. Cependant, tu parle de catégorie et nous montre des produits ? Mais dans l'idée, cela se passe surement dans le product-list.css de ton thème. Tes "blocs produits" (li.bloc-ajax en général) doivent avoir une largeur fixe et un float:left, qui provoque ce colonage. Link to comment Share on other sites More sharing options...
Painternadege Posted October 8, 2013 Author Share Posted October 8, 2013 Bonsoir, Je me suis mal exprimée, je souhaiterais modifier la mis en page des produits (à l'horizontal et sur toute la page centrale). Voici le lien si ça peux t'aider :http://www.votretableaupersonnalise.fr Je te donne le contenu du product-list.css de mon thème si cela peux t'aider à me donner un coup de main. Merci par avance de ton aide /* product-list.tpl */ ul#product_list { margin-top: 1.5em; border-top: 1px solid #ebebeb; list-style-type: none; display: inline-table;} ul#product_list li { border-bottom: 1px solid #ebebeb; border-right: 1px solid #ebebeb; padding: 6px; min-height: 325px; height: 335px; float: left; width: 246px; } ul#product_list li.alternate_item { border-right: none; } * html ul#product_list li { height: auto !important; height: 130px } ul#product_list li a { text-decoration: none; color: #333 } ul#product_list li p.product_desc a { line-height: 1.3em } ul#product_list a.product_img_link { display: block; width: 129px; margin: 0 auto; } ul#product_list a.product_img_link img { vertical-align: bottom; display: block } ul#product_list li h3 { margin: 0; font-size: 1.3em; height: 35px; } ul#product_list li .new { background: #7a7a7a; border: 1px solid #444444; color: white; font-size: 0.7em; font-weight: bold; margin: 0 5px 0 0; padding: 0 0.4em; text-transform: uppercase; vertical-align: 0.2em } ul#product_list li p.product_desc { margin-bottom: 0; height: 65px; font-size: 1em } ul#product_list li div.center_block { float: none; width: 100%; } ul#product_list li div.right_block { text-align: center; margin-top: 5px; } ul#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only { color: #99030F; text-transform: uppercase; font-weight: bold; display: block } ul#product_list li .reduction { display: block; margin-bottom: 0.3em } ul#product_list li .price { display: block; font-size: 1.5em; margin-bottom: 0.2em } ul#product_list li span.availability { color: #7a7a7a; font-size: 0.9em } ul#product_list li a.button { margin-top: 0.5em; } ul#product_list li p.compare { margin-top: 10px} ul#product_list li p.compare input { vertical-align: text-bottom } Link to comment Share on other sites More sharing options...
Painternadege Posted October 8, 2013 Author Share Posted October 8, 2013 oups erreur sur le lien, pardon : http://votretableaupersonnalise.fr Link to comment Share on other sites More sharing options...
Szed Posted October 9, 2013 Share Posted October 9, 2013 J'avais bien compris. Dans ton CSS, c'est le float: left; et le width: 246px; qui sont à l'origine du colonnage. Remplacer le 246px par 732px et vos block feront la largeur de la colonne centrale. Par contre, après il vous faudra modifier un peu le template de product-list pour par exemple, mettre l'image à gauche, la description à droite, etc. Link to comment Share on other sites More sharing options...
Painternadege Posted October 13, 2013 Author Share Posted October 13, 2013 Bonsoir, Merci pour ta réponse. J'ai en fait récupérer le CSS du thème par défaut car les produits étaient à l'horizontal : 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: 555px;/* 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} MAIS, je me retrouve avec l'image "panier" de l'ancien thème que je veux supprimer et je souhaiterais également mettre la ligne "voir le produit" en dessous le bouton ajouter au panier, comment faire? Voici le lien pour voir la mis en page : http://votretableaupersonnalise.fr Merci pour votre aide, Nadège Link to comment Share on other sites More sharing options...
Painternadege Posted October 13, 2013 Author Share Posted October 13, 2013 mince, j'ai envoyé le lien sur le thème par défault, voici le bon : http://votretableaupersonnalise.fr Link to comment Share on other sites More sharing options...
terroirsmarket.com Posted November 14, 2014 Share Posted November 14, 2014 bonjour J'aile meme problème, mais comment je rentre ds le module css Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now