Catégories à fermer


Aller en bas
Mäven
Mäven
Informations : Présence aléatoire

Idea Viens papoter avec nous sur le discord

Messages : 1296
http://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 - 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



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