Bouton pour aller haut - bas forum.



Pré-requis : accès au panneau d'administration & aux templates.
Version forum : tous.
Difficulté : facile.
Où : Onglet Affichage >> rubrique TEMPLATES >> Général >> Editer le template overall_header (haut de page).


Instruction.

  • Choisir 2 images, une qui sert pour aller en haut,une pour aller en bas. Cela étant dit, ça fonctionne très bien avec du texte également.
  • Ajouter le code n°1 juste après l'ouverture de la balise body (ligne 205 - template non modifié). Avant le  :
  • Remplacer les src des images par vos images. Ou remplacer les images par du texte.
  • Enregistrer le template et le valider.
  • Copier le code n°2 dans le CSS, cela va permettre de placer les deux éléments où vous le désirez sur la page, enregistrez.
  • Voilà.


code n°1 (dans le template) :

Code:

<div class="goTopBottom"><a href="#top"><img src="http://image.noelshack.com/fichiers/2018/20/4/1526574119-top.png" /></a><a href="#bottom"><img src="http://image.noelshack.com/fichiers/2018/20/4/1526574119-bottom.png" /></a></div>


code n°2 (dans le CSS) :

Code:

.goTopBottom {
    position: fixed;
    bottom: 53px; /* nombre de pixel depuis le bas de page */
    right: 38px; /* nombre de pixel depuis la droite, vous pourriez mettre la boite en haut à gauche (top left) */
    text-align: center; /* centre les images */
}

.goTopBottom img{
  height: 35px; /* taille des images */
}




une question ? Une instruction pas claire ? N'hésitez pas à répondre à ce sujet pour demander des éclaircissements.

fiche réalisée par laxy