Configuration prduits phares (RESOLU)

gribouillon · January 7, 2010

Bonjour à tous,
Après avoir longuement parcouru le forum en long,en large en travers, etc... je n'ai pas trouvé la solution à mon problème qui est le suivant: je voudrais changer la forme de la partie produits phares pour quelle soit comme sur le template suivant http://atchworks.free.fr/testshop/ (magnifique template au passage! merci atch) et même en utilisant firebug je ne trouve pas la solution alors please help!!

donaldlloyds · January 7, 2010

tu es sur un theme a 3 ou 2 colonne ?

gribouillon · January 7, 2010

tu es sur un theme a 3 ou 2 colonne ?

sur 3 colones, en fait je voudrais le faire sur le thème d'origine.

donaldlloyds · January 7, 2010

comme sur mon theme alors
iles produits phares sont issus de celui de atch

gribouillon · January 7, 2010

comme sur mon theme alors
iles produits phares sont issus de celui de atch

exactement!!! mais je bidouille je suis pas fortiche en css!
comment t'as fait?

donaldlloyds · January 7, 2010

a tu installer fire bug ?

http://www.prestashop.com/forums/viewthread/16736/graphisme/tuto_installation_et_utilisation_de_firebug_pour_modifications_du_template_couleurs_images__dot__dot__dot_

je te donne le script ce soir quand je rentre c est dans le fichier global.css

gribouillon · January 7, 2010

a tu installer fire bug ?

http://www.prestashop.com/forums/viewthread/16736/graphisme/tuto_installation_et_utilisation_de_firebug_pour_modifications_du_template_couleurs_images__dot__dot__dot_

je te donne le script ce soir quand je rentre c est dans le fichier global.css

je te remercie d'avance et a ce soir

donaldlloyds · January 7, 2010

de rien j en profiterais aussi pour tenter de stabliser le script pour Ie6 qui affiche un bug !

donaldlloyds · January 7, 2010

ajoute ce code depuis /* Produits Phares*/ (ligne 1051) jusqua /* Block tags */(ligne 1232) dans le fichier global.css de ton template
il y a un petit souci d affichage sous Ie 6 je travail dessus, je te posterais les modif
sur celui la j ai modifier quelques lignes car celui de atch ne rentrais pas dans un 3 colonne

/*  Produits Phares*/

/* Special style for block products in center column */
#center_column .products_block {
   border-style: none;
   float: left;
   width: 555px;
}

#center_column .products_block {
   color: #595a5e;
}



#center_column .products_block .block_content {
   background-image: none;
   background-color: #fff;
   padding: 0;
}

#center_column .products_block ul li:hover {
   background-color: #EDEDDF;

}

#center_column .products_block ul li {
   background-color: #fff;
   border-top:3px solid #C99716;
   border-left:1px solid #a5a5a5;
   border-right:1px solid #a5a5a5;
   border-bottom:1px solid #a5a5a5;
   margin-top: 10px;
   clear: none;
   float: right;
   /*width: 250px; IE6 */
   width: 250px;
   padding:0 2px 5px;
   margin-left: 4px;
   margin-right: 3px;
   height: 150px;
}


#center_column .products_block li.last_item_of_line {
   margin-right: 2px;
   display: block;
   float: left;
}

#center_column .products_block li.first_item_of_line {
   display: block;
   float: left;
   clear:both;
}

#center_column .products_block li.last_line {
}

#center_column .products_block p, #center_column .products_block h5 {
}

#center_column div.products_block h5 {
   display: block;
   height: auto;
   font-weight: bold;
   font-size: 1em;
   text-align: left;
   border-left-style: solid;
   border-left-width: 0;
   padding-top: 5px;
   margin: 0 0 5px 4px;
}

#center_column div.products_block h5 a {
   color: #424243;
   font-size: 1.1em;
}

#center_column div.products_block ul li p {
   padding: 0;
   display: block;
   margin: 0;
   float: right;
}

#center_column div.products_block p.product_desc {
   color: #595a5e;
   width: 140px;
   display: block;
   height: 50px;
   overflow: hidden;
   margin-bottom: 4px;
   padding-bottom: 0;
   z-index: 1;
}

#center_column div.products_block a.product_image {
   display: inline;
   background-color: transparent;
   width: 110px;
   height: 110px;
   margin: 0;
   float: left;
}

#center_column div.products_block a.product_image img {
   margin: 0;
   display: inline;
   margin-top: -60px;
}

#center_column div.products_block p.product_desc, #center_column div.products_block h5 {
   margin-right:0.6em;
   text-align: right;
}

#center_column div.products_block ul li p.product_desc a {
   font-weight: normal;
   font-style: normal;
   display: block;
   margin-left: 30px;
   width: 110px;
}

#center_column .products_block span.price {
   text-align: center;
   color: #C99716;
   display: block;
   font-size: 12px;
   direction: ltr;
   line-height: 17px;
   border-width: 1px;
   border-style: none;
   margin: 2px 1px 2px 0;
   margin-top: -20px;
}

#center_column .products_block a.button {
   margin: 0.1em 1px 0.2em 0;
   margin-left: 130px;
   margin-top : 90px;
}

#center_column .products_block a.exclusive {
   display: block;
   margin-right: 0;
   margin-left: 130px;
}

#center_column .products_block span.exclusive {
   margin: 0.5em auto 0.5em 0;
   display: none;
}

/* Special style for block accessories in center column (product page) */

#center_column .products_block.accessories_block .block_content {
   background-image: none;
   font-size: 1em;
   border-bottom: 1px solid #85949d;
   display: inline-block;
   height: auto;
   vertical-align: top;
}

#center_column div.products_block.accessories_block p.product_desc {
   color: gray;
   font-size: 1em;
   display: inline-block;
   height: auto;
   margin: 0;
}

/* Special style for block accessories in center column (product page) */
#center_column .products_block.accessories_block .block_content{ background:none; }
#center_column div.products_block.accessories_block p.product_desc { height:6.5em; }
#center_column .products_block.accessories_block .block_content li{ background:none;  }
#center_column .products_block.accessories_block .block_content li a.product_image, #center_column .products_block.accessories_block .block_content li a.product_description { border-right:1px solid #d0d3d8; font-weight:bolder; }
#center_column .products_block.accessories_block .block_content li.last_item a.product_image{ border:none; }

gribouillon · January 7, 2010

ajoute ce code depuis /* Produits Phares*/ (ligne 1051) jusqua /* Block tags */(ligne 1232) dans le fichier global.css de ton template

il y a un petit souci d affichage sous Ie 6 je travail dessus, je te posterais les modif

sur celui la j ai modifier quelques lignes car celui de atch ne rentrais pas dans un 3 colonne

/*  Produits Phares*/

/* Special style for block products in center column */
#center_column .products_block {
   border-style: none;
   float: left;
   width: 555px;
}

#center_column .products_block {
   color: #595a5e;
}




#center_column .products_block .block_content {
   background-image: none;
   background-color: #fff;
   padding: 0;
}

#center_column .products_block ul li:hover {
   background-color: #EDEDDF;

}

#center_column .products_block ul li {
   background-color: #fff;
   border-top:3px solid #C99716;
   border-left:1px solid #a5a5a5;
   border-right:1px solid #a5a5a5;
   border-bottom:1px solid #a5a5a5;
   margin-top: 10px;
   clear: none;
   float: right;
   /*width: 250px; IE6 */
   width: 250px;
   padding:0 2px 5px;
   margin-left: 4px;
   margin-right: 3px;
   height: 150px;
}


#center_column .products_block li.last_item_of_line {
   margin-right: 2px;
   display: block;
   float: left;
}

#center_column .products_block li.first_item_of_line {
   display: block;
   float: left;
   clear:both;
}

#center_column .products_block li.last_line {
}

#center_column .products_block p, #center_column .products_block h5 {
}

#center_column div.products_block h5 {
   display: block;
   height: auto;
   font-weight: bold;
   font-size: 1em;
   text-align: left;
   border-left-style: solid;
   border-left-width: 0;
   padding-top: 5px;
   margin: 0 0 5px 4px;
}

#center_column div.products_block h5 a {
   color: #424243;
   font-size: 1.1em;
}

#center_column div.products_block ul li p {
   padding: 0;
   display: block;
   margin: 0;
   float: right;
}

#center_column div.products_block p.product_desc {
   color: #595a5e;
   width: 140px;
   display: block;
   height: 50px;
   overflow: hidden;
   margin-bottom: 4px;
   padding-bottom: 0;
   z-index: 1;
}

#center_column div.products_block a.product_image {
   display: inline;
   background-color: transparent;
   width: 110px;
   height: 110px;
   margin: 0;
   float: left;
}

#center_column div.products_block a.product_image img {
   margin: 0;
   display: inline;
   margin-top: -60px;
}

#center_column div.products_block p.product_desc, #center_column div.products_block h5 {
   margin-right:0.6em;
   text-align: right;
}

#center_column div.products_block ul li p.product_desc a {
   font-weight: normal;
   font-style: normal;
   display: block;
   margin-left: 30px;
   width: 110px;
}

#center_column .products_block span.price {
   text-align: center;
   color: #C99716;
   display: block;
   font-size: 12px;
   direction: ltr;
   line-height: 17px;
   border-width: 1px;
   border-style: none;
   margin: 2px 1px 2px 0;
   margin-top: -20px;
}

#center_column .products_block a.button {
   margin: 0.1em 1px 0.2em 0;
   margin-left: 130px;
   margin-top : 90px;
}

#center_column .products_block a.exclusive {
   display: block;
   margin-right: 0;
   margin-left: 130px;
}

#center_column .products_block span.exclusive {
   margin: 0.5em auto 0.5em 0;
   display: none;
}

/* Special style for block accessories in center column (product page) */

#center_column .products_block.accessories_block .block_content {
   background-image: none;
   font-size: 1em;
   border-bottom: 1px solid #85949d;
   display: inline-block;
   height: auto;
   vertical-align: top;
}

#center_column div.products_block.accessories_block p.product_desc {
   color: gray;
   font-size: 1em;
   display: inline-block;
   height: auto;
   margin: 0;
}

/* Special style for block accessories in center column (product page) */
#center_column .products_block.accessories_block .block_content{ background:none; }
#center_column div.products_block.accessories_block p.product_desc { height:6.5em; }
#center_column .products_block.accessories_block .block_content li{ background:none;  }
#center_column .products_block.accessories_block .block_content li a.product_image, #center_column .products_block.accessories_block .block_content li a.product_description { border-right:1px solid #d0d3d8; font-weight:bolder; }
#center_column .products_block.accessories_block .block_content li.last_item a.product_image{ border:none; }

un grand merci a toi et ta générosité
je te tiens au jus dès demain

gribouillon · January 8, 2010

ajoute ce code depuis /* Produits Phares*/ (ligne 1051) jusqua /* Block tags */(ligne 1232) dans le fichier global.css de ton template

il y a un petit souci d affichage sous Ie 6 je travail dessus, je te posterais les modif

sur celui la j ai modifier quelques lignes car celui de atch ne rentrais pas dans un 3 colonne

/*  Produits Phares*/

/* Special style for block products in center column */
#center_column .products_block {
   border-style: none;
   float: left;
   width: 555px;
}

#center_column .products_block {
   color: #595a5e;
}




#center_column .products_block .block_content {
   background-image: none;
   background-color: #fff;
   padding: 0;
}

#center_column .products_block ul li:hover {
   background-color: #EDEDDF;

}

#center_column .products_block ul li {
   background-color: #fff;
   border-top:3px solid #C99716;
   border-left:1px solid #a5a5a5;
   border-right:1px solid #a5a5a5;
   border-bottom:1px solid #a5a5a5;
   margin-top: 10px;
   clear: none;
   float: right;
   /*width: 250px; IE6 */
   width: 250px;
   padding:0 2px 5px;
   margin-left: 4px;
   margin-right: 3px;
   height: 150px;
}


#center_column .products_block li.last_item_of_line {
   margin-right: 2px;
   display: block;
   float: left;
}

#center_column .products_block li.first_item_of_line {
   display: block;
   float: left;
   clear:both;
}

#center_column .products_block li.last_line {
}

#center_column .products_block p, #center_column .products_block h5 {
}

#center_column div.products_block h5 {
   display: block;
   height: auto;
   font-weight: bold;
   font-size: 1em;
   text-align: left;
   border-left-style: solid;
   border-left-width: 0;
   padding-top: 5px;
   margin: 0 0 5px 4px;
}

#center_column div.products_block h5 a {
   color: #424243;
   font-size: 1.1em;
}

#center_column div.products_block ul li p {
   padding: 0;
   display: block;
   margin: 0;
   float: right;
}

#center_column div.products_block p.product_desc {
   color: #595a5e;
   width: 140px;
   display: block;
   height: 50px;
   overflow: hidden;
   margin-bottom: 4px;
   padding-bottom: 0;
   z-index: 1;
}

#center_column div.products_block a.product_image {
   display: inline;
   background-color: transparent;
   width: 110px;
   height: 110px;
   margin: 0;
   float: left;
}

#center_column div.products_block a.product_image img {
   margin: 0;
   display: inline;
   margin-top: -60px;
}

#center_column div.products_block p.product_desc, #center_column div.products_block h5 {
   margin-right:0.6em;
   text-align: right;
}

#center_column div.products_block ul li p.product_desc a {
   font-weight: normal;
   font-style: normal;
   display: block;
   margin-left: 30px;
   width: 110px;
}

#center_column .products_block span.price {
   text-align: center;
   color: #C99716;
   display: block;
   font-size: 12px;
   direction: ltr;
   line-height: 17px;
   border-width: 1px;
   border-style: none;
   margin: 2px 1px 2px 0;
   margin-top: -20px;
}

#center_column .products_block a.button {
   margin: 0.1em 1px 0.2em 0;
   margin-left: 130px;
   margin-top : 90px;
}

#center_column .products_block a.exclusive {
   display: block;
   margin-right: 0;
   margin-left: 130px;
}

#center_column .products_block span.exclusive {
   margin: 0.5em auto 0.5em 0;
   display: none;
}

/* Special style for block accessories in center column (product page) */

#center_column .products_block.accessories_block .block_content {
   background-image: none;
   font-size: 1em;
   border-bottom: 1px solid #85949d;
   display: inline-block;
   height: auto;
   vertical-align: top;
}

#center_column div.products_block.accessories_block p.product_desc {
   color: gray;
   font-size: 1em;
   display: inline-block;
   height: auto;
   margin: 0;
}

/* Special style for block accessories in center column (product page) */
#center_column .products_block.accessories_block .block_content{ background:none; }
#center_column div.products_block.accessories_block p.product_desc { height:6.5em; }
#center_column .products_block.accessories_block .block_content li{ background:none;  }
#center_column .products_block.accessories_block .block_content li a.product_image, #center_column .products_block.accessories_block .block_content li a.product_description { border-right:1px solid #d0d3d8; font-weight:bolder; }
#center_column .products_block.accessories_block .block_content li.last_item a.product_image{ border:none; }

un grand merci a toi et ta générosité
je te tiens au jus dès demain

Bonjour,
aie, aie aie!!!! j'ai bon chercher dans le global.css du template je ne trouve ni le début ni la fin d'ou je dois insérer le code faut dire que je suis pas bien doué!! ;-)

donaldlloyds · January 8, 2010

recherche la ligne de fin est de début que je t ai donné avec Ctrl+f dans ton éditeur pour les localiser ensuite tu remplace la partie qui se trouve entre les 2 lignes par ce que je ta donné
utilise notepad sinon pour les localiser avec les lignes que je t ai donné (tu dois avoir un petit écart quand même avec l original car j ai ajouter du code sur d autre category.

gribouillon · January 8, 2010

recherche la ligne de fin est de début que je t ai donné avec Ctrl+f dans ton éditeur pour les localiser ensuite tu remplace la partie qui se trouve entre les 2 lignes par ce que je ta donné
utilise notepad sinon pour les localiser avec les lignes que je t ai donné (tu dois avoir un petit écart quand même avec l original car j ai ajouter du code sur d autre category.

yes! yes! yeeeeeeeesssssssssss!!!!
global css ouvert avec word pad et ligne trouvé facilement.

un enorme merci pour ton coup de main

donaldlloyds · January 8, 2010

de rien c est la premiere foie que je rend heureux quelqu un ici a mon tour
je te fait suivre mes fichier pour IE6 dés que c fait

gribouillon · January 8, 2010

de rien c est la premiere foie que je rend heureux quelqu un ici a mon tour
je te fait suivre mes fichier pour IE6 dés que c fait

Ok!!

vestax · February 16, 2010

Je voulez juste dire un grand merci pour ce code, je galère depuis pas mâle de mois pour pouvoir aboutir a voir mes produits phares sur 2 colonnes, a ce jours c'est chose faite.

encore merci c'est vraiment cool

vestax · February 16, 2010

Bonjour a tous,

Je voulez juste un renseignement car je viens de voir que en bas des produits phares, il y avez une grande marge, c'est possible de la mettre moins large ?

Cordialement

donaldlloyds · February 16, 2010

un lien vers ton site ?

jazz009 · February 20, 2010

Merci pour le code donaldlloyds
As tu reussi a resoudre le probleme avec IE6 ?
Les boutons d'achats sont decales.
Faut il creer une feuilles de style speciale IE6 ?
merci

vestax · February 24, 2010

Bonjour,

A tu été voir sur ma boutique le petit soucis au quel javez fait allusion en bas des produits phares la marge qui ne sert a rien est prend de la place ?

Cordialement

BREGOR · February 24, 2010

Bonjour, j'aimerai faire exactement la même chose avec mes produits phares.
C'est à dire pouvoir les disposer en carré comme sur le template de atch.

Est ce possible avec mon template ? www.iventes.fr.

Je ne vois pas ou je dois rajouter le code.

Merci à vous!

vestax · February 24, 2010

bon,

on a avancer avec
BREGOR ceci dit on rencontre un petit problème avec les boutons info est ajouter au panier qui son décaler.

jais tester le global.css sur ma boutique est moi rien est décaler je pense donc que le soucis vienne du template mais dans tous les cas sans même changer de template on devrez pouvoir régler le problème.

Si sous avez une petite idée sa serez super cool

McGuyver · March 29, 2010

bonjour.
tout d'abord merci pour le partage et l'aide que vous proposez.
je suis tres interessé par ce genre d'affichage également mais je ne comprends pas comment le mettre en place.
je ne connais absolument RIEN à la programation, aux css ou autre html etc

j'ai ouvter mon fichier "global.css" et regarde la ligne 1051 mais je n'ai pas /* Produits Phares*/
je ne sais donc pas comment je dois integrer ce code que vous nous partegez gentillement.

je vous ai ajouté ce que j'ai en pièce jointe.

merci a vous

vestax · June 5, 2011

Bonjour a tous,

Je reviens vers vous car comme je viens de passer a la version de prestashop 1.4.2 puis laisser le thème par défaut, jais voulu tenter de remettre ce code afin d'avoir comme avant les produits phares sur 2 colonnes, mais apparaments comment le thème d'origine prestas hop a du avoir pas mal de modification, les blocks sont bien sur 2 colonnes mais rien est a sa place comme le bouton ajouter au panier etc...
avez vous une idée svp ?

Cordialement

vestax · June 5, 2011

Bonjour,

je viens de trouvez la solution, ceci dit je cherche a savoir comment agrandir le titre des produits des produits phares ?

cordialement

Configuration prduits phares (RESOLU)

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in