Jump to content
chatpelote

[Résolu] Mettre en colonnes et élargir

Recommended Posts

Bonjour,

Je commence juste à comprendre le fonctionnement pour adapter Prestashop à mes besoins.

J'utilise la fonction recherche, mais je ne trouve pas de réponses claires à mes questions.

mon site est celui-ci :

www.chatpelote.com

J'ai besoin de mettre mes articles en trois colonnes et d'élargir la colonne centrale puisque j'ai supprimé tout ce qui était à droite.

Version 1.5.4.0

thème standard de prestashop

Si vous pouvez m'aider, merci de m'indiquer quelles modifications je dois apporter à mon fichier CSS.

Merci d'avance ;-)

Edited by chatpelote (see edit history)

Share this post


Link to post
Share on other sites

Pour élargir la colonne centrale, vous pouvez simplement modifier la classe de #center_column dans votre header.tpl de votre thème : remplacer "grid_5" par "grid_7 omega". Sur le thème par défault, c'est tout en bas de votre header.tpl, ligne 94.

<!-- Center -->
   <div id="center_column" class=" grid_5">

devient

<!-- Center -->
   <div id="center_column" class=" grid_7 omega">

 

Pour les articles en "trois colonnes", je ne suis pas sur d'avoir compris si vous souhaitez avoir 3 colonne pour le listing des produits, ou si une page produit doit elle, rester sur 2 barre latéral plus la colonne centrale.

 

Pour passer le listing de vos article en 3 colonnes, cela va demander un petit peu plus de travail.

Dans #product_list.css, ligne 4 vous pouvez rajouter pour #product_list li:

width: 30%;
float: left;

Et ligne 32, dans #product_list li .center_block rajoutez :

width: auto;

 

Evidemment, ca va être vilain. Il faudra travailler les largeurs, margin et padding :)

 

Seb.

Edited by Szed (see edit history)

Share this post


Link to post
Share on other sites

MERCI c'est super ça marche bien pour la largeur de la colonne centrale.

Par contre, tu avais bien compris, je voulais que mes articles soient listés sur 3 colonnes.

Si tu veux bien regarder mon site, les articles se sont mis sur 2 colonnes, comment est ce que je peux mettre le descriptif et le prix en dessous de l'image ?

Par la même occasion, j'abuse de ta gentillesse et te demande le truc pour agrandir les photos des articles

Merci

Share this post


Link to post
Share on other sites

Pour passer en 3 colonnes, il faut mettre une largeur width sur vos élément li.

Pour passer des éléments à la ligne, vous pouvez leur ajouter un display:block; sur l'élément que vous souhaitez forcer à la ligne.

 

Pour l'agrandissement des images, cela se gère dans le back office : Préférences > Images. Vous pouvez modifier les différentes tailles utilisé par le thème. N'oubliez pas de régénérer les images ensuite :)

 

Seb

Share this post


Link to post
Share on other sites

Excuse moi pour le retard de la réponse.

Donc, merci pour ton aide, j'ai modifiée la taille des mes images et j'ai réussi à mettre mes articles sur deux colonnes en modifiant #product_list.css

 

Le résultat est visible ici :

http://www.chatpelote.com/index.php?id_category=51&controller=category

 

Par contre, je ne sais pas trop ce qui c'est passé, mais j'ai un gros décalage sur la ligne du menu du haut.

Je n'arrive pas a trouver où le régler, une idée ??

 

Merci par avance

Share this post


Link to post
Share on other sites

Pour le menu,

 

dans ton header.tpl, tu as #header_right, qui a une classe grid_6. Remplace la par grid_9 et ca reviendra à la normal !

 

Seb

Share this post


Link to post
Share on other sites

Et enfin, la dernière question qui tue ... J'ai pas trouvé comment éditer le titre du topic pour le mettre en résolu :P

Share this post


Link to post
Share on other sites

Bonjour,

 

Petite question ;)

 

Je souhiate mettre la colonne de gauche prestashop au format horizontale. Est-ce possible ?

 

Merci par avance.

 

@+ju

Share this post


Link to post
Share on other sites

Ouaip

#left_column{
    width:100%;
    float:none;
}

Apres, si vous voulez les modules côté à côté, soit vous faîte par id# soit par classe si ils en ont une en commun. Exemple :

#left_column .block{
    width:25%;
    float:left;
}

Et un clear:both sur la colonne centrale pour ne pas qu'elle vienne s'aligner à gauche.

 

Bien sur, il faudra jouer avec les largeur, margin et padding :)

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