Placer le header et le footer sur toute la largeur du site
Je vais vous montrer ici comment placer votre header ou votre footer sur toute la largeur du site sur votre boutique Prestashop. En effet, le header et le footer prennent souvent la largeur de la page et non celle du site. La raison est que ces deux éléments sont placés à l'intérieur de la page et sont par conséquent limités à la largeur de cette dernière.
La solution consiste donc à sortir ces deux éléments de la page afin qu'ils s'adaptent non plus à la largeur de la page mais bien à celle du site.
Sortir le header de la page : déplacement de l'ouverture de la div#page
Rendez-vous dans le dossier de votre thème et ouvrez le fichier nommé header.tpl.
Déplacez la ligne :
<div id="page"> (correspond à l'ouverture de la div#page)
Juste au-dessus de l'appel des colonnes donc au-dessus de la ligne :
<div id="columns">
Sortir le footer de la page : déplacement de la div#footer
Rendez-vous dans le dossier de votre thème et ouvrez le fichier nommé footer.tpl.
Déplacez la ligne :
<div id="footer">{$HOOK_FOOTER}</div>Juste en-dessous de la dernière fermeture de div :
</div> (correspond à la fermeture de la div#page)
Modification CSS de la largeur du header et du footer
Pour finir il faut passer la largeur de votre header et de votre footer à 100% dans vos fichiers CSS.
Forcer la compilation smarty pour la prise en compte des modifications
Lorsque vous effectuez des modifications dans vos fichiers tpl, la compilation smarty doit être active sinon vos modifications ne sont pas prises en compte. Vous pouvez régler l'activation de la compilation smarty dans l'onglet Préférences de votre back-office.
Aucun commentaire