[RÉSOLU] Centrer le logo d'un site

[RonanS]

Bonjour,

Je fais ce topic car en ce moment, je fais un stage dans une entreprise dont leur site a été conçu avec l'outil Prestashop. Je me suis occupé de beaucoup de changements par rapport au site mais il y a certain changements qui me pose encore des difficultés à appliquer. L'un de ces problèmes est de centrer le logo du site. J'ai réussi à agrandir le logo afin qu'il soit plus visible mais les différentes solutions que j'ai pu rencontrer sur le forum ne fonctionnent pas pour moi car elles correspondent, le plus souvent, à des anciennes versions de Prestashop. Par conséquent, je propose mon propre topic ici. Si vous avez une quelconque solution pour mon problème, je suis toute ouïe.

La version de mon Prestashop est le: 1.7.6.8

Lien vers le site: https://lesvignoblesboissier.com

Une image du logo que je souhaite centrer:

Edited June 21, 2023 by RonanS (see edit history)

[Ariane Web et Plus]

Bonjour dans custom.css 

#_desktop_logo {width: 100%;}

#_desktop_logo h1{margin : 0 auto;width: 33%;}

[RonanS]

13 minutes ago, Ariane Web et Plus said:

Bonjour dans custom.css 

#_desktop_logo {width: 100%;}

#_desktop_logo h1{margin : 0 auto;width: 33%;}

Bonjour,

J'ai testé votre code et ça marche! Merci beaucoup pour votre réponse.

[Ariane Web et Plus]

Avec plaisir

Un petit cœur sur la réponse qui fonctionne et je vois que vous avez déjà mis en résolu c'est impeccable.  😄

[RonanS]

13 hours ago, Ariane Web et Plus said:

Avec plaisir

Un petit cœur sur la réponse qui fonctionne et je vois que vous avez déjà mis en résolu c'est impeccable.  😄

J'ai peut-être crié victoire un peu trop vite. 😅

Parce que je viens de remarquer un autre problème avec le logo du site.

Mon logo sur ma page d'accueil est à la taille que je voudrais qu'il soit, sauf que si je vais sur les autres pages, le logo est deux fois plus grand. Vous pouvez le voir avec ces captures d'écran:

Après avoir un peu testé votre code,  j'ai remarqué que le problème venait par rapport à l'attribut "H1", car le logo de la page d'accueil possède un attribut "h1" mais le logo des autres pages ne le possède pas.

Donc, il faut bien vérifié que sur le fichier header.tpl, on retrouve bien ce code là:

<div class="col-md-3 hidden-sm-down" id="_desktop_logo" style="float:none;margin:0 auto">
            {if $page.page_name == 'index'}
              <h1>
                <a href="{$urls.base_url}">
                  <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
                </a>
              </h1>
            {else}
                <a href="{$urls.base_url}">
                  <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
                </a>
            {/if}
        </div>

J'ai aussi dû un peu modifié le code que vous avez envoyé, en gardant seulement "#_desktop_logo":

 #_desktop_logo{

    width: 33%;

    margin-bottom: 15px;

    margin : 0 auto;

}

En espérant que cette petite modification pourra sauver certains d'une petite panique.😄