Mettre plusieurs blocks en Footer

Bienvenue, Invité

(1 visualisation(s)) (1) Invité

Répondre au sujet

Nouveau sujet

Page:
1

SUJET: Mettre plusieurs blocks en Footer

Mettre plusieurs blocks en Footer il y a 1 an, 4 mois #3

admin
( Admin )
Hors ligne
Administrateur
Message: 13
Karma: 0

Par défaut, il n'est pas possible de mettre des blocs dans le footer de votre site Prestashop. Pourtant, la manip' a effectuée est très simple.

D'abord faites un backup de footer.tpl et de global.css

Rendez-vous dans le répertoire de votre thème et éditez le fichier footer.tpl comme ci-dessous (supprimez tout le reste) :

 
{if !$content_only}
</div>
<!-- Footer -->
<div id="footer">{$HOOK_FOOTER}{$HOOK_RIGHT_COLUMN}{$HOOK_LEFT_COLUMN}</div>
</div>
{/if}
</body>
</html>

Essayez maintenant de placer des blocs dans ce footer (en prenant soin de ne pas faire de doublon avec la colonne de droite et gauche).

Par exemple, placez-y les blocs logo paiement, tags et informations via l'admin prestashop.

Normalement, si tout c'est bien passé, vous devriez avoir vos 3 blocs dans le footer, mais les uns au dessus des autres. . Nous avons donc besoin ici de quelques modifications css.

la première est de rajouter un "float:left;" à tous ces blocs. Pour cela, vous devez rechercher la "class" ou l'"ID" de vos div et modifier le global.css en fonction.

Par exemple pour le bloc de logo paiement, vous devez avoir

 
div#paiement_logo_block_left{
float:left;
}

Ensuite, toujours dans le css, je vous conseille de mettre une hauteur et largeur fixe à votre footer de manière à pouvoir adapter en fonction du nombre de blocs que vous voulez mettre. 100px de hauteur me parait bien...
Ainsi, vous devez également rajouter cette hauteur à tous vos blocs :

 
height:100px;

Comme vous avez pu le constater, je ne vous propose pas ici un tuto étape par étape, mais justes les grandes lignes...à vous d'adapter en fonction de vos besoins.

Création de site internet Prestashop, Joomla! et Virtuemart

Dernière édition: il y a 1 an, 4 mois par admin.

Répondre Citer