[Résolu] Mettre en colonnes et élargir

[chatpelote]

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 August 17, 2013 by chatpelote (see edit history)

[Szed]

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 July 16, 2013 by Szed (see edit history)

[chatpelote]

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

[Szed]

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

[chatpelote]

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

[Szed]

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

[chatpelote]

Super, merci Seb !

[chatpelote]

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

[juju027]

Bonjour,

 

Petite question

 

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

 

Merci par avance.

 

@+ju

[Szed]

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