Idea Les Râleuses sont absentes.. Idea
Le forum est en vacances mais toutes nos ressources restent disponibles. (En savoir +)

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4860

Flèches de navigation Haut / Bas Empty Flèches de navigation Haut / Bas

le Jeu 31 Oct 2019 - 15:38

Toutes versions

Flèches de navigation Haut / Bas

Coucou Smile

Dans ce LS, je te propose d'ajouter 2 petites flèches où tu le désires sur toutes les pages du forum.

Flèches de navigation Haut / Bas Rendu14

Celles-ci te permettront d'accéder tout en haut du forum ou tout en bas du forum avec, si tu le souhaites, un effet de défilement.

Idea Ce LS est utilisable sur toutes les versions de forum.

Exclamation Il faut que tu puisses accéder aux templates du forum.

Les codes

De la CSS

Commençons par le plus simple : la feuille de style à déposer dans Panneau d'administration > Affichage > Images & couleurs > Couleurs > feuille de style CSS.

Code:
/*********************************************/
/*       Flèches de navigation haut/bas      */
/*            CODAGE :copyright:Miettes                */
/* https://tambouille-raleuses.forumactif.com */
/*********************************************/

#arrow-nav{
  align-items: center;
  bottom: 150px; /* Position par rapport au bas de la page */
  left: 4px; /* Position par rapport à la droite de la page */
  display: flex;
  flex-direction: column;
  font-size: 20px; /* Taille des flèches */
  position: fixed;
  width: 20px;
}

#arrow-nav,
#arrow-nav a{
  color: #e26e26; /* Couleur des flèches et du point */
}

#arrow-nav a:hover{
  color: #854924; /* Couleur des flèches au survol */
}

#arrow-nav a,
#arrow-nav a:hover{
  text-decoration: none !important;
}

Idea Celle-ci est commentée. Mais en cas de souci, n'hésite pas à venir nous poser des questions ^^

Le template

Ensuite, quelle que soit la version de ton forum, la manipulation est la même. Nous avons 2 templates à modifier (Panneau d'administration > Affichage > Templates > Général).

Idea A chaque fois, je pars des templates par défaut.

overall_header

Juste avant
Code:
</head>
on va ajouter :
Code:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Idea On sauvegarde et on publie.

Exclamation Pour la version AwesomeBB, tu as une petite modifications en plus à faire sur ce template.  Il faut que tu ajoutes :
Code:
<a name="top"></a>
Juste après :
Code:
<body id="top">

overall_footer_end

Juste avant
Code:
</body>
on va ajouter :
Code:
<div id="arrow-nav">
  <a href="#top" class="fa fa-arrow-up" aria-hidden="true"></a>
  <span>•</span>
  <a href="#bottom" class="fa fa-arrow-down" aria-hidden="true"></a>
</div>

<a id="bottom" name="bottom"></a>

Idea On sauvegarde et on publie.

(Facultatif) Envie de défilement ?

Si tu veux ajouter un effet de défilement au clic sur l'une des flèches, il va falloir ajouter un peu de javascript. Pour cela, on va aller dans  Panneau d'administration > Modules > HTML & Javascript > Gestion des codes Javascript et on va mettre ce code dans un nouveau javascript qu'on va afficher sur toutes les pages.

Code:
$(function(){

    $('body')
      // Au clic sur une des flèches
        .on('click', '#arrow-nav a', function(evt){
          evt.preventDefault();
          // On récupére la direction
            var cible = $(this).attr('href');
            cible = cible.split('#')[1];

            // On défile en 2sec (2000ms) jusqu'à l'endroit voulu
             $('html, body').animate({
        scrollTop: $('a[name='+ cible +']').offset().top
      }, 2000);
        });

});

Dans ce code, la seule chose que tu peux changer c'est la vitesse du défilement. Ici, je l'ai mise à 2 secondes (= 2000 millisecondes).




   
Si tu te sers de ce code, merci de mettre un petit lien vers La Tambouille quelque part sur ton forum, pas trop caché, pour que tes membres puissent venir chercher de l'aide ou des codes par ici aussi : )

       

   

_________________
MmeFeuillage
MmeFeuillage
Informations : - Absente le week end du vendredi midi au Dimanche soir Wink
Messages : 180
https://forumfeminin.forumactif.org

Flèches de navigation Haut / Bas Empty Re: Flèches de navigation Haut / Bas

le Jeu 14 Nov 2019 - 12:24
Coucou !
J'ai une petite question !
Bon ce n'est pas directement sur la mise en place des flèches sur mon forum dsl...(même si je vais quand même probablement les installer Smile Merci pour le tuto d'ailleurs !) , j’espère que ça ne te dérangeras pas trop que je pose la question ici, mais je ne sais pas ou la poser ailleurs ^^' (La relou! encore dsl ^^' )

Je vois qu'on fait un lien vers
Code:
href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
et comme je suis curieuse ^^', je suis allé voir https://www.bootstrapcdn.com/, mais je ne comprend pas ce que c'est ??
Je vois qu'il y a des liens vers des css ou des js etc... c'est tout en anglais et je ne comprend rien ^^
Est ce que tu peux m'expliquer ce que c'est comment fonctionne ces liens, qui s’intègrent à nos templates forumactifs ?
Pêpêche
Pêpêche
Mascotte
Messages : 4860

Flèches de navigation Haut / Bas Empty Re: Flèches de navigation Haut / Bas

le Jeu 14 Nov 2019 - 14:51

Coucou Smile

alors, en réalité, c'est ceci que ça appelle
https://fontawesome.com/v4.7.0/icons/

en gros, ça permet d'utiliser toutes les icons disponibles sur ce site. Par exemple :

Code:
<i class="fa fa-coffee" aria-hidden="true"></i>


Code:
<i class="fa fa-diamond" aria-hidden="true"></i>

Donc ça :
Code:
href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
c'est pour les icons

---

ensuite, boostrap, c'est différent Smile
https://getbootstrap.com/docs/4.3/getting-started/introduction/

en gros, ça permet à n'importe qui te faire un site web avec un structure qui s'apdate quelque soit ta résolution d'écran (pc, mobile, tablette). En gros, c'est une grosse bibliothèque de style prédéfinis.

Tu as des exemples ici :
https://getbootstrap.com/docs/4.3/examples/

Imaginons que je veuilles faire un site avec un bloc contenant 3 colonnes, j'ai juste la CSS à appeler :
Code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

et ce code à écrire :
Code:

<div class="container"><!--
  --><div class="row"><!--
     --><div class="col-sm">
      One of three columns
     </div><!--
     --><div class="col-sm">
      One of three columns
      </div><!--
     --><div class="col-sm">
      One of three columns
     </div><!--
   --></div><!--
 --></div>

Cette bibliothèque contient même ce qu'on appelle des "spinner" déjà stylisé

Code:
<div class="spinner-border text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>

Voici les exemples :
https://miettes.lebonforum.com/h45-nps-explication-tuto

(je l'ai mis sur une page html sinon la CSS fait des ravages avec celle du forum :p)

En gros, ça te permet d'utiliser plein de choses déjà créé sans avoir à te casser la tête à le faire Smile


EDIT :
Si vous voulez les dernières versions des icons, il faut appeler cette CSS :
Code:
<script src="https://kit.fontawesome.com/c7ee274ba4.js" crossorigin="anonymous"></script>

à la place de ça
Code:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

et il faut aller chercher vos icons là :
https://fontawesome.com/icons?d=gallery&m=free

_________________
MmeFeuillage
MmeFeuillage
Informations : - Absente le week end du vendredi midi au Dimanche soir Wink
Messages : 180
https://forumfeminin.forumactif.org

Flèches de navigation Haut / Bas Empty Re: Flèches de navigation Haut / Bas

le Jeu 14 Nov 2019 - 18:07
Hoo !! c'est super intéressant tout ça Very Happy
Merci beaucoup pour tes explications !!
Yue
Yue
Messages : 114

Flèches de navigation Haut / Bas Empty Re: Flèches de navigation Haut / Bas

le Lun 20 Jan 2020 - 18:19
Top ce LS ! Je cherchais justement à ajouter ça avec le fameux défilement fluide !
Merciii love
Yue
Yue
Messages : 114

Flèches de navigation Haut / Bas Empty Re: Flèches de navigation Haut / Bas

le Lun 20 Jan 2020 - 20:15
Re ! Je me permets un DP pour que vous voyez ma réponse o/

J'ai du ajouter ceci :

Code:
    <a id="top" name="top"></a>

dans Overall Header pour que la flèche du haut fonctionne bien, sinon la commande demeurait dans le vide PQ
(Je ne sais pas si c'est un oubli ou alors une spécificité de AwesomeBB ?)
Mäven
Mäven
Râleuse (Admin)
Informations : Absente / peu présente le soir à partir de 18h30
----
Idea Viens papoter avec nous sur le discord

Messages : 4323
https://tambouille-raleuses.forumactif.com/

Flèches de navigation Haut / Bas Empty Re: Flèches de navigation Haut / Bas

le Mar 21 Jan 2020 - 11:18
Hello !

Ton template était modifié ? Normalement, même sur AwesomeBB ça fonctionne correctement en suivant le tutoriel (je viens de le refaire en partant de templates "de base" et je n'ai rien eu à ajouter de plus que ce qu'il y a dans le tuto Wink ) .
L'ID est ici en fait :
Code:
<body id="top">

_________________
Yue
Yue
Messages : 114

Flèches de navigation Haut / Bas Empty Re: Flèches de navigation Haut / Bas

le Mar 21 Jan 2020 - 15:27
C'est trop bizarre alors, mon template est modifié oui mais l'ID en "top" de base est toujours présente, mais c'est comme si ça ne voulait pas répondre °°
Alors que celui du bas était nickel !
Mäven
Mäven
Râleuse (Admin)
Informations : Absente / peu présente le soir à partir de 18h30
----
Idea Viens papoter avec nous sur le discord

Messages : 4323
https://tambouille-raleuses.forumactif.com/

Flèches de navigation Haut / Bas Empty Re: Flèches de navigation Haut / Bas

le Mer 22 Jan 2020 - 13:36
Ah oui j'ai vu d'où venait le souci, c'est quand on utilise le JS. On va revoir ça pour modifier le tuto en conséquence Wink

EDIT : Seul AwesomeBB posait souci Smile Le LS est modifié en conséquence.
@Yue, attention dans ce que tu as ajouté il y a une erreur, il faut retire l'id parce qu'il est en double du coup (et on ne peut pas avoir 2 fois le même id Wink )

_________________
Yue
Yue
Messages : 114

Flèches de navigation Haut / Bas Empty Re: Flèches de navigation Haut / Bas

le Jeu 23 Jan 2020 - 13:38
Ah super merci @Mäven ! Je vais aller faire les modifs en conséquence dans ce cas o/

EDIT.
Bon alors je comprends pas, maintenant ça marche carrément plus du tout xD


Dernière édition par Yue le Jeu 23 Jan 2020 - 13:42, édité 1 fois
Mäven
Mäven
Râleuse (Admin)
Informations : Absente / peu présente le soir à partir de 18h30
----
Idea Viens papoter avec nous sur le discord

Messages : 4323
https://tambouille-raleuses.forumactif.com/

Flèches de navigation Haut / Bas Empty Re: Flèches de navigation Haut / Bas

le Jeu 23 Jan 2020 - 13:40
Pas de souci et merci de nous avoir signalé l'erreur Very Happy

_________________
Miettes
Miettes
Râleuse (Admin)
Informations :
► En ligne de 9h à 18h en semaine
Peu présente le reste du temps
----
Idea Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2159

Flèches de navigation Haut / Bas Empty Re: Flèches de navigation Haut / Bas

le Jeu 23 Jan 2020 - 14:13
Ah mais là c'est àc ause d'un autre de tes js.... On va essayer de corriger tout ça dans ton aide... C'est à cause de ça
Code:
$(document).ready(function() {
    var speedy = 400;
    function scrollTo(element) {
        $(element).click(function() {
            var goscroll = false;
            var the_hash = $(this).attr("href");
            var regex = new RegExp("(.*)\#(.*)","gi");
            if (the_hash.match("\#")) {
                the_hash = the_hash.replace(regex, "$2");
                if ($("#" + the_hash).size() > 0) {
                    the_element = "#" + the_hash;
                    goscroll = true
                } else if ($("a[name=" + hash + "]").size() > 0) {
                    the_element = "a[name=" + the_hash + "]";
                    goscroll = true
                }
                if (goscroll) {
                    var container = 'html';
                    if ($.browser.webkit)
                        container = 'body';
                    $(container).animate({
                        scrollTop: $(the_element).offset().top
                    }, speedy);
                    return false
                }
            }
        })
    }
    scrollTo('a')
});

_________________
Yue
Yue
Messages : 114

Flèches de navigation Haut / Bas Empty Re: Flèches de navigation Haut / Bas

le Jeu 23 Jan 2020 - 14:52
JPP c'est le bordel quoi je fasse xDD
Heureusement que vous êtes là pour comprendre les bugs toutes les deux °^°
Contenu sponsorisé

Flèches de navigation Haut / Bas Empty Re: Flèches de navigation Haut / Bas

Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Post-It des Râleuses