Aller en bas
Deco sapin
Deco renne
Mäven
Mäven
Informations : Idea Viens papoter avec nous sur le discord

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

[FA] Créer une "boite" de navigation sur le coté du forum Empty [FA] Créer une "boite" de navigation sur le coté du forum

le Ven 19 Avr 2019 - 9:40

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:
[FA] Créer une "boite" de navigation sur le coté du forum Boite10

Exclamation Tu as besoin d'accéder aux templates pour pouvoir prendre ce Libre Service
Idea 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 Smile )
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.


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



A visiter

Post-It des Râleuses