Jump to content

Mettre les catégories produits à l'horizontal


Recommended Posts

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 :)

post-617233-0-38500800-1381170556_thumb.jpg

Link to comment
Share on other sites

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

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

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

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

  • 1 year later...

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