Bonjour les gens, je me lance dans les tuto :3 (mon tout premier x_x) ici, je vous montre comment faire des indexs :3 alors, si vous comprenez pas quelque chose, dîtes le moi hein >.> Si vous ne comprenez pas n'hésitez pas à me demander des détails, ceux qui s'y connaissent à me corriger ;-;
Déjà, un index, c'est quoi ?[]
Eh bien, un index est un petit modèle de navigation que l'on trouve en bas des pages, et qui regroupe plusieurs pages ayant un point commun. Par exemple,
| Sorts de la Magie des Fleurs |
|---|
| Utilisateur |
| Laora ~ Madoka |
| Sorts |
| ♣ Iris ♣ Orchidée ♣ Cerisier ♣ Coquelicot ♣ Lavande ♣ Lotus ♣ Lys ♣ Marguerite ♣ Pissenlit ♣ Rose ♣ Safran ♣ Tournesol ♣ Tulipe ♣ Violette ♣ |
regroupe tous les sorts de la Magie des Fleurs.
Construction[]
Bon, déjà, faut connaître les bases du codage, sinon on aura un peu de mal à s'en sortir >.>
Le code complet pour un index ressemble à ça :
{| class="mw-collapsible mw-collapsed" width=100% style="border-radius:5px;background:#C47CB1;border:3px solid black"
! align="center" style="border-radius:10px;background:white;border:2px solid lightpink;color:hotpink;font-size:15px;"| Sorts de la [[Magie des Fleurs|<font color=hotpink>Magie des Fleurs</font>]]
|-
| align="center" style="border-radius: 1em 1em 3em 3em;background:white;color:lightpink;font-size:16px"|Utilisateur
|-
| align="center" style="font-size:14px;"|[[Laora|<font color=white>Laora</font>]]
|-
| align="center" style="border-radius:3em 3em 0em 0em;background:white;color:lightpink;"|Sorts
|-
| align="center" style="font-size:14px;color:black"|♣ [[Fleur d'Iris|<font color=white>Iris</font>]] ♣ [[Fleur d'Orchidée|<font color=white>Orchidée</font>]] ♣ [[Fleur de Cerisier|<font color=white>Cerisier</font>]] ♣ [[Fleur de Coquelicot|<font color=white>Coquelicot</font>]] ♣ [[Fleur de Lavande|<font color=white>Lavande</font>]] ♣ [[Fleur de Lotus|<font color=white>Lotus</font>]] ♣ [[Fleur de Lys|<font color=white>Lys</font>]] ♣ [[Fleur de Marguerite|<font color=white>Marguerite</font>]] ♣ [[Fleur de Pissenlit|<font color=white>Pissenlit</font>]] ♣ [[Fleur de Rose|<font color=white>Rose</font>]] ♣ [[Fleur de Safran|<font color=white>Safran</font>]] ♣ [[Fleur de Tournesol|<font color=white>Tournesol</font>]] ♣ [[Fleur de Tulipe|<font color=white>Tulipe</font>]] ♣ [[Fleur de Violette|<font color=white>Violette</font>]] ♣
|}
Celui-ci par exemple est le code pour l'index des fleurs que je vous ai montré au dessus. Alors, la première chose a faire, est de mettre :
{| class="mw-collapsible mw-collapsed" width=100% style="border-radius:5px;background:#C47CB1;border:3px solid black"
Le class="mw-collapsible mw-collapsed" va vous donner le truc "afficher/masquer", width=100% va déterminer la largeur de votre modèle (la par exemple il prend tout l'espace, si vous mettez 50% il prendra la moitié de l'espace de la page). Ensuite, le border-radius:5px va décider des angles de votre index (vous pouvez le remplacer par un "4em 4em 4em 4em" par exemple, dans ce cas chaque "4em" décidera d'un de vos angles). Le background va décider du fond de votre infobox, et pour finir le border:3px solid black de la couleur et l'épaisseur des contours de votre index.
Ensuite, vous avez
! align="center" style="border-radius:10px;background:white;border:2px solid lightpink;color:hotpink;font-size:14px;"| Sorts de la [[Magie des Fleurs|<font color=hotpink>Magie des Fleurs</font>]]
Ici, vous retrouvez le border-radius qui décide des angles du dessus de votre index, le background qui décide de la couleur de fond, le border pour le contour, bref, que de la répétition. Ensuite, vous avez color:hotpink pour la couleur de votre texte et font-size:14px qui décide de la taille de votre texte. Puis vient le texte justement. J'ai mis un lien vers la Magie des Fleurs, c'est à dire
[[mon lien]]
et pour éviter que ça se mette dans la couleur des liens, j'ai changé la couleur grâce à la balise
<font color=hotpink>Blabla</font>
et de fermer mon lien.
|- | align="center" style="border-radius: 1em 1em 3em 3em;background:white;color:lightpink; font-size:15px"|Utilisateur
Bon alors, déjà n'oubliez pas le |-. Ensuite, on retrouve le border-radius, mais cette fois ci avec 1em 1em 3em 3em, ici chaque Xem correspond à un angle. Ensuite, la background, le color, et le font-size. Rien de nouveau ici.
|- | align="center" style="font-size:14px;"|[[Laora|<font color=white>Laora</font>]] |- | align="center" style="border-radius:3em 3em 0em 0em;background:white;color:lightpink;"|Sorts |- | align="center" style="font-size:14px;color:black"|♣ [[Fleur d'Iris|<font color=white>Iris</font>]] ♣ [[Fleur d'Orchidée|<font color=white>Orchidée</font>]] ♣ [[Fleur de Cerisier|<font color=white>Cerisier</font>]] ♣ [[Fleur de Coquelicot|<font color=white>Coquelicot</font>]] ♣ [[Fleur de Lavande|<font color=white>Lavande</font>]] ♣ [[Fleur de Lotus|<font color=white>Lotus</font>]] ♣ [[Fleur de Lys|<font color=white>Lys</font>]] ♣ [[Fleur de Marguerite|<font color=white>Marguerite</font>]] ♣ [[Fleur de Pissenlit|<font color=white>Pissenlit</font>]] ♣ [[Fleur de Rose|<font color=white>Rose</font>]] ♣ [[Fleur de Safran|<font color=white>Safran</font>]] ♣ [[Fleur de Tournesol|<font color=white>Tournesol</font>]] ♣ [[Fleur de Tulipe|<font color=white>Tulipe</font>]] ♣ [[Fleur de Violette|<font color=white>Violette</font>]] ♣ |}
Voici la fin du code. Il n'y a rien de nouveau, c'est pour cela que je n'ai rien détaillée.
Notez bien que...[]
- Ceci est un index simple, il existe une tonne de variantes différentes, je vous ai montré en gros ce qu'il fallait retenir.
- N'oubliez pas les |- entre chaque partie (sauf au début où il n'y en a pas)
- Vous avez juste à recommencer l'opération plusieurs fois (parce que si vous regardez bien c'est presque tout le temps la même chose qui se répète) pour optenir un index plus long.
- Je vous autorise à reprendre ce code à la condition que je ne retrouve pas des choses vraiment semblables.