Catégories à fermer


Aller en bas
Miettes
Miettes
Râleuse
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 : 2312

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

le Jeu 31 Oct - 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 ©Miettes                */
/* http://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.

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 : 171
https://forumfeminin.forumactif.org

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

le Jeu 14 Nov - 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 ?
Miettes
Miettes
Râleuse
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 : 2312

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

le Jeu 14 Nov - 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 : 171
https://forumfeminin.forumactif.org

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

le Jeu 14 Nov - 18:07
Hoo !! c'est super intéressant tout ça Very Happy
Merci beaucoup pour tes explications !!
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



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne à nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

Post-It des Râleuses