Créer une "boite" de navigation sur le coté du forum

[MävenAdmin]

Créer une "boite" de navigation sur le coté du forum

Et bonjour à toi !

Aujourd'hui, je vous propose une "boite" de navigation sur le coté du forum, comme ceci :

Spoiler:

Tu as besoin d'accéder aux templates pour pouvoir prendre ce Libre Service
Pour bien comprendre le fonctionnement, tu peux t'appuyer sur [ ce tutoriel]

1/ Partie "Page HTML"

Tu vas avoir besoin de créer une page HTML qui contiendra le contenu de ta page (comme expliqué dans le tutoriel fournit plus haut, ça facilitera la modification).
Pour cela, tu vas dans PA > Modules > Gestion des pages HTML > Création en mode avancé (c'est très important )
Et tu y colles ceci en ajoutant les liens. Tu peux bien entendu en ajouter ou en supprimer :

Code:

<nav id="navigation-rapide">
  <a href=""> Règlement
  </a>
  <a href=""> Présentation
  </a>
  <a href=""> Lien
  </a>
  <a href=""> Lien
  </a>
  <a href=""> Lien
  </a>
</nav>

2/ Partie Template

Il va falloir placer notre boite. On reprend le même procédé que dans le tutoriel fournit, en étape 2. Mais reprenons ici pour que ça soit plus simple :
Tu vas donc aller modifier le template “overall_header” (PA > Affichage > Templates > Général)
Juste après ceci :

Code:

<!-- END switch_login_popup -->

Tu vas placer ceci :

Code:

<aside id="side_nav">
    <div id="liens_rapides"> </div>
</aside>

Ensuite, tu enregistres et tu publies le template. C'est fini pour cette partie.

3/ Partie CSS

A ce stade, ce n'est pas terrible visuellement. On va mettre un peu de CSS dans la feuille de style CSS du forum : PA > Affichage > Couleurs > Feuille de style CSS.
Et on va y mettre ceci (les commentaire sont dans le code)

Code:

body{
  display:flex; 
}
#navigation-rapide{
  display:flex;
  position:fixed;
  flex-direction:column;
  text-align:center; /*Personnalisable : peut être left, right, center ou justify*/
  width:200px; /*Personnalisable : il s'agit de la largeur de la boîte*/
  background:#296f88; /*Personnalisable : il s'agit de la couleur de fond de la boite */
  border:solid black 1px; /*Personnalisable : il s'agit du type, de la couleur et de la taille de la bordure de la boite*/
  top:15%; /*Personnalisable : c'est le placement en hauteur de la boite */
  left:2%; /*Personnalisable : c'est le placement en largeur de la boite. Pour la placer sur la droite : right:2% */
}
#navigation-rapide a{
  color:white; /*Personnalisable : couleur du lien */
  text-decoration:none; /*Personnalisable : ici on retire le soulignement des liens. A retirer pour que les liens soient souligné */
}

---

Et voilà, maintenant tu as un bloc avec ta navigation rapide sur le coté du forum, avec les liens que tu souhaites.