Comment modifier la position d'un menu, bouton, etc...

[Noxulen]

Bonsoir tout le monde !

 

Comme je débute avec Prestashop, j'ai quelques questions sur la conception de thème. En fait je dois réaliser un site pour un client (je suis en stage) et je bloque totalement sur la modification du thème par défaut.

 

J'ai créé une copie du thème et je travaille sur la copie. Je comprends comment modifier le code CSS mais je n'arrive pas à changer la position de plusieurs éléments de ma page.

 

J'ai communiqué en pièce jointe une image montrant ce que je dois réaliser. J'ai cherché sur le web et lu la documentation pour mieux comprendre le positionnement des blocs et éléments mais je n'ai pas vraiment compris le principe.

 

Pouvez-vous m'expliquer comment je dois faire pour changer la position du menu (le mettre à coté du menu, etc...) ? Comment puis-je savoir où se trouve tel ou tel élément de la page ? Quel fichier dois-je éditer ?

 

Je vous remercie d'avance de votre aide.

[Ariane Web et Plus]

Sur prestashop il y a plusieurs façon de modifier la position des blocs ou plutôt des modules, car globalement chaque fonction est un module.

Tout d'abord il y a un système de hook, ou chaques module est installé. Vous pouvez choisir la position du module dans une zone et la zone.

Tous les bloc ne s'installent pas sur toutes les zones donc le système a ses limites.

 

La dans ce que vous montrez, le log est correctement positionné, le connexion doit changer de hook et le menu doit être modifié en css.

[Noxulen]

C'est justement le système de hook qui me pose problème. Je ne comprends pas comment je peux trouver sur quelle hook est positionné le logo par exemple et comment le changer de position.

 

Est-ce dans "Modules > Positions " ?

[Julien64]

Bonjour,

Pour les hook oui vous trouverez dans "modules > positions" quels modules sont gréffés sur quels hook. Par contre le logo est codé "en dur" directement dans le fichier "header.tpl" de votre thème.

Pour mettre en forme comme votre exemple il va surtout falloir toucher au CSS et un peu au HTML en modifiant certainement les classes bootstrap (par défaut le menu fait toute la largeur de la page avec ".col-lg-12" alors que pour vous il sera plutôt du style "col-lg-8" pour être positionné à côté du logo...

 

Voila les pistes à creuser

[Noxulen]

Merci de vos réponses.

 

J'ai réussi à modifier la position de mes modules et à dégreffer ceux dont je ne me sert pas. Maintenant je dois modifier le CSS pour adapter l'interface à ma maquette.

 

Merci encore.