Wiki Schtroumpfs
34 Publications
Hypsoline
Johnatan H
Koogers17
Franky003
Phenix18
Tous les contributeurs
Johnatan H
Franky003

[Tuto] Barre de navigation

Bonjour !

Voici un tutoriel explicatif sur la barre de navigation de wikia et ce qu'elle contient.

Déjà, c'est quoi la barre de navigation ?


Capture d’écran (6)

C'est ça, donc la petite barre bleue en haut de chaque page lorsqu'on navigue sur wikia.

Que contient-elle ?

Eh bien regardez l'image plus haut : vous voyez "Sur le Wiki", "Communauté", "Personnages", "Bande Dessinée", "Film" etc... Ce sont les onglets de la barre de navigation. Si on met sa souris dessus, le menu de la barre change et on accède à des liens différents.

Par défaut, une barre contient l'onglet "Sur le Wiki" avec "Activité du Wiki", "Page au hasard", "Vidéos", "Images", "Tchat" et "Forum.

Ensuite il y a l'onglet "Pages populaires" avec "Pages les plus visitées", et l'onglet "Communauté" avec "Billets de blogs" et "Centre des communautés.

Oui, je précise que c'est par défaut car le reste des personnalisation se fait soit-même, mais je vais y venir plus tard.

A quoi sert-elle ?

Eh bien la barre de navigation sert à s'orienter sur le wiki vers les pages les plus importantes ! Car en effet, maintenant vous savez comment aller sur le tchat, sur le forum, au centre des communautés, à l'activité du wiki, consulter les nouvelles images etc... En cliquant sur le lien d'un simple menu ! C'est très utile !

Personnalisation locale

Comme vous pouvez vous en douter, la barre de navigation qui est ici est personnalisée. On peut personnaliser deux chose : le contenu de cette barre, et l'esthétique.

Cette section se consacre à la personnalisation du contenu de la barre. Déjà, il faut être au minimum administrateur pour pouvoir la personnaliser.

Ensuite, il faut modifier cette page (ceux/celles qui ne sont pas admins peuvent tout de même voir la source de la page). En la modifiant on peut rajouter des onglets, rajouter des liens au menu etc...

Pour plus de précision je vous conseille de voir ce tutoriel.

Personnalisation de l'estéthique

Sur ce wikia, vous pouvez constatez qu'il y a une image de fond au niveau de la personnalisation, des coins arrondis, une police d'écriture différente etc... Tout ça c'est de la personnalisation de l'estéthique.

Là aussi, il faut être au moins administrateur pour pouvoir "customiser" sa barre de navigation, car il faut accéder a une page de type "MediaWiki" qui n'est autre que "MediaWiki:Wikia.css".

Je vais vous donner quelques personnalisations à faire pour customiser votre barre de navi sup, mais il faut savoir que c'est un menu complexe qui nécéssite beaucoup de base en CSS pour pouvoir tout customiser... C'est pour ç que je vais restreindre le nombre de personnalisation que je vais vous donner.

Alors :

Personnaliser la couleur de la barre

/* Personnalisation de la barre de navigation */

.WikiHeader .navbackground,
.WikiHeader > nav .subnav-2 {
	background-color:red;
}

"red" peut être remplacé par la couleur de votre choix. Si vous voulez mettre plusieurs couleur sous forme de dégradés, vous pouvez (à condition que vous sachiez faire des dégradés, autrement voir ceci )

C'est aussi dans ce code que vous pouvez rajouter d'autres propriétés concernant la police, la taille des caractères, si ils sont en gras, ou en italique, ainsi que les borders/border-radius :)

Personnaliser la couleur des onglets séléctionnés

Qu'est-ce qu'un onglet sélectionné? Eh bien, c'est l'onglet sur lequel vous mettez votre souris. Par défaut c'est l"onglet "Sur le Wiki".

Insérez donc ce code :

/* Personnalisation de la barre de navigation */

.WikiHeader > nav li.marked{
	background-color:red;
}

Vous pouvez faire la même chose mais avec les onglets non séléctionnés.

Insérez alors ce code :


/* Personnalisation de la barre de navigation */

.WikiHeader li {
background-color:red;
}

Menu déroulant

Il existe aussi une façon d'afficher un second menu (subnav) allant vers le bas, en cliquant sur le lien d'un menu.

Et on peut encore afficher un troisième menu, puis un quatrième... Mais pour le troisième et quatrième menu il faut ajouter ce script.

Cela pourrez vous donner une concaténation de menu tel que :


Extended navigation exemple

Voilà, c'est terminé pour ce tutoriel sur la barre de navigation, si vous avez des questions ou des remarques, n'hésitez pas à écrire un commentaire ^^

.

Tutos
Modèles
Scripts
0 3
  • Voter
  • Répondre
Johnatan H
Franky003
0

Très intéressant franchement !

Tu peux en faire un avec les Usertags ? :)

0

euh, si tu veux mais je m'y connais pas trop en usertags perso sa attendra :/

Écrire une réponse…