Bouton UP sur le Portail pour remonter en haut de la page.

par Chezoit Jeu 5 Mai 2022 - 19:32

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Safari
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : ...
Lien du forum : http://www.revopowaaa.com

Description du problème

Bonjour,

J'ai essayé de récupérer ce code, pour insérer, sur le portail, un bouton pour remonter tout en haut rapidement (comme celui de la version Mobile).

Ça fonctionne très bien pour la page d'accueil du forum, mais pas pour le portail.

Merci à tous ceux qui pourraient m'aider.

par **Oka.mi** Jeu 5 Mai 2022 - 19:45

Bonjour,

Où avez-vous mis ce code exactement ?
Si c'est dans le message d'accueil, c'est normal que cela ne s'affiche pas sur le portail puisque le message d'accueil n'est pas présent sur toutes les pages. Il faudrait le mettre dans le overall_header (après <body id="modernbb">) ou le overall_footer_begin (avant <div class="statistics">). Si vous souhaitez installer ces boutons uniquement sur le portail, ajoutez alors le code dans le template portal_body (tout en haut par exemple).

par Chezoit Jeu 5 Mai 2022 - 20:43

Bonjour Oka.mi,

Ce qui est sûr, c'est que je ne l'ai pas collé où vous venez de me l'indiquer...
Ça fonctionne, merci !

Y a-t-il un moyen d'agrandir ces flèches ?
Sur Ordi, ça passe, mais sur Mobile en mode web, c'est tout petit (oui oui, j'ai un petit groupe de membres irréductible qui navigue sur leur mobile de cette marnière...)

Merci de votre aide.

par **Oka.mi** Jeu 5 Mai 2022 - 21:17

Chezoit a écrit:Y a-t-il un moyen d'agrandir ces flèches ?

Techniquement, oui, mais ce serait inutilement complexe...
En gros, le code que vous avez trouvé dans l'autre sujet passe par un JavaScript externe (hébergé par un autre site) pour écrire du HTML et du CSS sur votre forum. Jusque là, pourquoi pas, en espérant que le site en question ne cesse pas un jour d'héberger ce script... sauf que les flèches en question sont une image en background https://services.supportduweb.com/navigation_up_down/styles/images/s4.png (là aussi hébergé en externe). Bref, pour modifier ce code, il faudrait réécrire du CSS par-dessus, changer d'image... Je pense que le plus simple serait de remplacer le code installé par quelque chose comme ceci :

Code:: <div id="topbottom"><a href="#top"><i class="ion-arrow-up-a"></i></a><a href="#bottom"><i class="ion-arrow-down-a"></i></a></div>

On crée un élément avec un id "topbottom". Ici les deux flèches ne sont plus des images mais des icônes, gérables comme du texte.
Ensuite dans le CSS, il suffira d'ajouter :

Code:: #topbottom { position: fixed; z-index: 999; right: 5px; bottom: 5px; } #topbottom a { color: #333; background: #eee; border-radius: 100%; font-size: 6em; }

Vous pouvez paramétrer right et bottom pour modifier l'emplacement des boutons par rapport au bord droit et bas de la fenêtre.
Enfin, pour augmenter ou diminuer la taille des flèches, passez par le font-size. Au besoin, vous pouvez toujours ajouter un media screen pour déterminer une taille particulière dans le cas où la largeur de la fenêtre est trop petite

Code:: @media screen and (max-width: 1100px) { #topbottom a { font-size: 10em; } }

Si vous voulez changer l'apparence des flèches, vous n'aurez qu'à modifier la class du <i> correspondant : https://themeon.net/nifty/v2.9.1/icons-ionicons.html

par Chezoit Ven 6 Mai 2022 - 10:37

Tout simplement parfait ! I love you

Merci...

Bouton UP sur le Portail pour remonter en haut de la page.