Ajustement du logo Prestashop

Prestashop 1.7 – Ajuster la taille du logo (ép.21)

Vous avez peut-être remarqué vous aussi que votre logo sous Prestashop 1.7 était tout petit et que si vous mettiez en place un plus gros… ça décalait l’affichage. Il fallait que je survole cette problématique avec vous.

Episode 21

Après avoir vu quelques remarques de clients… « Regardez comme mon header est décalé ! »… j’étais obligé de proposer une alternative pour un affichage plus clean. Rassurez-vous moi aussi, mon oeil est choqué lorsque les éléments ne suivent pas un positionnement / alignement sur une règle.

Mon premier conseil est normalement de « toujours » utiliser la taille des images fournies en standard pour éviter les bugs d’affichage. Par contre, il faut être honnête, celle de Prestashop est minuscule (on parle du logo ahah) et dès qu’on sort du format classique le menu et la recherche sont décalés à l’affichage (j’avais aussi remarqué le problème).

Pour y remédier, je propose deux alternatives assez simples, la première consiste à régler les marges de certains éléments sur les différents supports via CSS et la seconde d’injecter le logo directement avant le menu et de manière « centrée ».

Je suis pas certain que c’est une bonne idée comme ils ont fait les règles responsives, peut-être que ce n’était pas forcément « le bon choix », de faire côtoyer le menu et le logo sur la même ligne. Quoi qu’il en soit, si vous suivez les instructions, ci-dessous… vous devriez pouvoir améliorer l’affichage. Bon code à tous !

Ressources

Pour ce tutoriel vous avez à disposition :

  • Les exemples de règles CSS pour ajuster le logo.
  • Le fichier header.tpl avec les retouches pour un logo « centré ».

Télécharger

Au programme

  • Découvrez la problématique de l’affichage du logo.
  • Le but ? Positionner le logo correctement sur les différents supports (desktop / tablette / smartphone).
  • Intégration V1 avec la retouche uniquement du fichier « theme.css ».
  • Pensez à toujours tester les différentes résolutions.
  • Intégration V2, avec l’intégration d’un logo centré au-dessus du menu.
  • Soignez la présentation de l’affichage, les détails comptent en e-commerce.

BOUM !

1 seul mail par semaine - pas de publicité

44 commentaires sur “Prestashop 1.7 – Ajuster la taille du logo (ép.21)”

  1. Bonjour, j’ai essayé de suivre pas à pas ton tuto, mais je n’arrive pas à positionner le logo en centrer sur la page d’accueil.
    Dans les pages internes, tout va bien il est centrer et plus grand, mais sur la page d’accueil il continu petit et à gauche.
    Que faire?
    Merci

    Répondre

    1. Hello,

      Sincèrement il est difficile de répondre précisément à cette question, il faudrait tester avec la taille du logo que je propose dans le tutoriel pour voir si cela fonctionne. Si oui, alors avec une taille de logo différente, il est possible qu’il faille ajouter des règles supplémentaires.

      A bienôt !

      Répondre

  2. Bonjour
    Je ne connais « rien » à prestashop je connais d’avantage Symfony
    Mais je ne comprends pas pourquoi vous modifiez theme.css
    au lieu de custom.css sont but est la pour ça non?
    Surcharge ou modif

    Répondre

    1. Bonjour,

      Bonne remarque, je me souviens plus exactement pourquoi… est-ce que ce fichier était présent dans la première version de Prestashop 1.7… il faudra que je vérifie… mais je testerai la prochaine fois via ce fichier.

      Par contre, il est plus facile d’intégrer des règles custom une fois que le fichier CSS a été décompressé… de manière à localiser facilement la ligne à reprendre la portion de code en question (etc…).

      Mais sinon vous avez tout à fait raison, je ferai un test sur ce fichier une prochaine fois.

      A bientôt !

      Répondre

  3. Bonjour, une barre de recherche et le logo avec le menu, cela ne laisse pas beaucoup de place pour les catégories. Comment revenir à une même présentation comme sur la version 1.6.
    Comment faire ? Merci et bravo pour les toutes ces videos qui sont très intéressantes.

    Répondre

  4. Bonjour
    merci pour cette vidéo tuto sur l’ajustement du logo.
    alors pour intégrer le code du centrage du logo, dans « template »> partials> les fichiers header.tpl sont au format photoshop ? Je ne peux pas les ouvrir ?
    dernière version ; 1.7.1.2
    Si quelqu’un a une idée, une autre solution, je suis preneur
    par avance merci beaucoup !!

    Répondre

    1. Bonjour,

      Les fichiers « .tpl » contiennent du code comme un fichier « .html », si vous avez besoin d’un éditeur de code simple, prenez Notepad++ (https://notepad-plus-plus.org/fr/) qui est gratuit et vous pourrez ouvrir le fichier correctement. Quand vous éditez le fichier avec le Notepad++ prenez dans menu « Language » l’option « HTML ».

      A bientôt !

      Répondre

  5. Bonjour
    j’ai suivi avec attention votre tuto qui est vraiment trés bien expliqué.
    lorsque je centre mon logo, celui ci disparait a partir de 767 px lorque je redimentionne la page.
    je précise que le logo utilisé a exactement les mêmes dimensions que celui que vous fournissez dans cotre exemple.
    Si vous avez une idée de ce qui ne va pas, je suis preneur.
    Merci

    Guy

    Répondre

    1. Bonjour,

      Pour cela il faudra procéder à un débugage du CSS et des différentes règles… je ne peux pas répondre précisément sur ce point, car à travers ce tutoriel il s’agit d’une première ébauche expérimentale (tous les cas de figure n’ont pas été testés).

      A bientôt !

      Répondre

  6. Bonjour, j’ai prestashop 1.7.2 et j’ai suivi le tuto mais rien ne ce passe… 🙁 je voudrais mettre mon logo en gros au centre mais impossible

    Répondre

    1. Bonjour,

      Sous « Paramètres avancés -> Performances » dans le back-office de Prestashop, désactivez bien tous les caches et sous la compilation des templates utilisez l’option « Recompiler les fichiers de templates s’ils ont été mis à jour ». Pensez aussi à vider le cache du navigateur et faire un CTRL+R ou F5 sur votre page.

      A bientôt !

      Répondre

      1. Important de rappeler souvent aux newbies de désactiver les caches. J’en suis un, et je ne l’avais pas fait, d’où je m’escrimais à comprendre pourquoi mes changements de codes n’avaient aucun effet… 😉 #merci

        Répondre

  7. Bonjour,
    J’ai l’impression que votre tuto n’est pas compatible avec la dernière version 1.7.2.4 de Prestashop.
    J’aurai aimé agrandir le logo et le positionner au dessus du menu et qu’il soit adapté aux différentes tailles d’écran.
    Merci de votre aide, si vous avez quelques minutes à y consacrer…

    Répondre

  8. Bonjour,

    merci pour vos infos précieuses ! Comme pour la première personne de ces commentaires, la modification a lieu de partout sauf sur la page d’accueil ! Une idée de comment résoudre ce problème ? Merci

    Répondre

    1. Bonjour,

      Peut-être qu’il y a eu un changement entre temps sur cette nouvelle version de Prestashop… à voir aussi mon commentaire juste au-dessus pour l’actualisation.

      A bientôt !

      Répondre

    1. Bonjour,

      En standard cela n’est pas possible, il faudrait ajouter un préfixe « iso_lang » sur la fin du nom du logo dans le header du thème, mais je n’ai pas abordé le tutoriel dans ce sens.

      A bientôt !

      Répondre

    1. Bonjour,

      Il faut environ 100 visiteurs par jour pour espérer une vente par jour… il faudrait analyser votre trafic avec Google Analytics (pour faire un point de situation). Le site est récent il faudra plusieurs mois avant de pouvoir mesurer des résultats concrets.

      A bientôt !

      Répondre

  11. Salut, merci pour le tuto.
    Je viens d’essayer la première méthode qui me convient plus, mais c’est seulement l’alignement qui a été fait. Le logo a gardé sa même dimension « rikiki », pourtant celui que j’ai télécharger sur Prestashop est énorme. comment faire? Aussi si tu as des astuces pour agrandir la taille des favicones se serait top!
    merci d’avance

    Répondre

  12. Bonjour,

    Comment faire si je veux tout simplement supprimer le logo. Je souhaiterais qu’il n’y ai aucun logo car je l’ai incrusté dans ma bannière. J’ai supprimé l’image du logo, mais j’ai le nom du site qui apparait à la place et mon menu qui a bouger, il est plus haut.

    Merci.

    Répondre

    1. Bonjour,

      Dans un premier temps pour ne pas avoir besoin de modifier la structure du site, vous pouvez essayer de créer une image blanche de 1 pixel par 1 pixel et définir cette image comme logo du site (via le back-office).

      A bientôt !

      Répondre

  13. Bonjour,

    Merci pour tous ces tuto, ça m’aide vraiment bien, c’est top !
    Mais j’ai un petit soucis avec celui-ci :
    Quand je remplace le fichier header.tpl, après avoir vidé le cache, j’ai un affichage parfait avec le logo au dessus et centré en version ordinateur, mais sur mobile tout est décalé sur 3 lignes, je n’arrive pas à trouver pourquoi ?
    http://173.nenupharsdumonde.fr/fr/
    Merci d’avance,
    Yannick

    Répondre

    1. Bonjour,

      En fait de ce que j’ai regardé, il faudrait comparer le code du header avec le code original. Chez-vous il y’a dans le header les 3 classes suivantes . 

      .pull-xs-left, .pull-xs-right, .pull-xs-right

      Et dans le thème original :

      .float-xs-left, .float-xs-right, .float-xs-left

      C’est une piste concernant l’origine de ce problème.

      A bientôt !

      Répondre

  14. Bonjour Webbax,

    Merci pour ces excellents tutos.

    Mon seul but est de pouvoir avoir mon logo en retina et je pensais arriver à faire quelque chose en prenant quelques éléments de votre tuto… mais en vain.

    Quelle serai la solution la plus simple pour faire de même ?

    Merci beaucoup!
    Théo.

    Répondre

    1. Bonjour,

      Difficile de répondre à cette question, car normalement si le menu est trop large il doit déborder et faire un retour à la ligne automatiquement… il ne doit pas y avoir cette mention « more » qui s’affiche.

      A bientôt !

      Répondre

  16. Bonjour Webbax,

    Tout d’abord, vos tutos sont super.
    J’ai suivi ce tuto à la lettre mais j’ai un souci avec le menu principal. Lorsque je passe la souris sur une des catégorie, les sous catégorie ne s’affiche plus du tout.
    A quoi cela peut être dû ?
    Merci

    G6k

    Répondre

  17. Bonjour Germain,
    J’espère que vous allez bien. Je suis très intéressé par ce tuto 21. Je sais que vous n’etes absolument pas fan pour acheter un thème, mais il s’avère que je vous ai découvert après…..
    Mon problème est que j’ai copié vos formules mais rien ne se passe. J’ai vidé cache, mon histo mais rien n’y fait. Auriez vous un tuyau pour que j’ai mon logo centré avec le reste svp?
    Merci pour votre aide.
    Olivier.

    Répondre

    1. Bonjour,

      Rassurez-vous j’utilise aussi beaucoup de thèmes « achetés » pour des clients, le problème c’est qu’avec le thème « non-standard » les règles peuvent être totalement différentes de celles du tutoriel. Vous pouvez demander un peu d’aide éventuellement à l’auteur du template.

      A bientôt !

      Répondre

  18. Bonjour et merci pour ses tutos.

    J’ai suivie la démarche pour centrer la logo, cela marche à merveille! au top!
    Mais maintenant j’aurai bien aimé également centrer le « top menu », j’ai essayé de suivre le même principe en rajoutant « .header-top #top-menu{text-align:center;} » dans le fichier theme.css , juste sous la ligne de centrage du logo. Mais visiblement cela c’est pas aussi simple que ca et ne marche pas…
    Un petit tuyau pour arriver à ce centrage ?

    Merci d’avance

    Répondre

      1. Ok, je vais étudier le sujet.
        Cependant je précise que le code que j’ai laissé précédemment fonction fonctionne bien quand je réduit ma fenêtre ou suis en affichage tablette ou Smartphone. Mais pas en plein écran ordinateur…
        Merci pour votre réponce rapide.

        Répondre

  19. Bonjour, je suis en version 1.7.5.1 de prestashop et votre tuto fonctionne très bien. Le seul hic, c’est avec un iphone 6 et 11 pro uniquement en vertical, j’ai les 2 logos un sur l’autre qui s’affichent. J’ai bien essayé de modifier le hidden down mais rien n’y fait; On dirait qu’il y a un ration dans lequel aucun des 2 ne se cache. Merci de votre retour.

    Répondre

  20. Bonjour,
    j’ai suivi toutes vos instructions, cependant depuis que j’ai fait ça est apparu un gros problème. Depuis mon BO, les onglets « produits », « apparence » ou encore « module manager » ne me sont plus accessibles et je n’arrive donc pas à sortir mon site du mode maintenance. J’ai le message suivant qui s’affiche :
    « Oops! An Error Occurred. The server returned a « 500 Internal Server Error ». Something is broken. Please let us know what you were doing when this error occurred. We will fix it as soon as possible. Sorry for any inconvenience caused. « .
    Qu’est-ce qu’il s’est passé et que dois-je faire pour le remettre en état ? Merci beaucoup !

    Répondre

  21. OUi…. mais nooooon 🙁
    lol
    je m’explique, je bosse sur un site presta, c ma première… je veus justement faire cette manip, mettre mon logo au centre et le menu en dessous. c’est comme ça que je suis arrivé sur votre site.
    Cependant je suis sur presta 1.7.6.8 et du coup j’ai pas le même fichier header.tpl
    auriez vous la mise à jour de cette manip ? merci d’avance pour l’eventuel coup de main et bravo pour vos tuto, c ultra utile

    Répondre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *