JVFlux:Guide des Modèles (Template)

Un modèle est élément codé qui peut être inséré dans un article.

Comment ça fonctionne : la base

Pour faire simple, une page de type Modèle:Nomdumodèle contient quelque chose (un tableau, une bannière, un simple mot, n'importe qquoi). Et dès que le nom du modèle est inséré dans un article entre deux accolades comme ceci : {{Nomdumodèle}}, alors le wiki va aller chercher ce qu'il y a sur la page du modèle et le coller dans l'article.

Sur la page Modèle:CadreBoucle se trouve un code qui donne ça : Modèle:CadreBoucle Et pour insérer cette bannière sympathique, il suffit de mettre {{CadreBoucle}} dans un article. Par exemple celui-ci.

Même chose pour insérer un smiley, nous avons créé un modèle pour chacun. Par exemple Modèle:noel donne lorsqu'on insère le code {{noel}}

Évidemment il faut respecter scrupuleusement le nom des modèles, sinon ça ne fonctionne pas. Si vous écrivez {{Noël}} voici le résultat : Modèle:Noël !

Tous les modèles

Comment créer un modèle

C'est une tâche difficile car il faut savoir coder un minimum en CSS, et connaître deux trois astuces que nous allons vous donner ici. Pour mieux comprendre il est conseillé de regarder le code de quelques modèles.

Nous allons vous montrer ce que nous utilisons sur JVFlux dans nos besoins quotidiens.

Div

Une division permet de créer des encarts, des cadres et bannières. C'est très utilisé sur JVFlux.

Pour commencer il faut écrire la balise <div>, mais souvent il est nécessaire de préciser deux choses :

• les propriétés de la div (couleur de la bordure et du fond notamment)
• et les propriétés de ce que va contenir la div, que ce soit texte ou images (taille du texte, espacement des lignes par exemple).

Alors pour préciser cela, nous allons inclure des bouts de codes dans la balise <div> grâce au code style="boutdecode: valeur; boutdecode:valeur; boutdecode:valeur"

Cela nous donne :<div style="boutdecode: valeur; boutdecode:valeur; boutdecode:valeur">

Vous remarquez qu'on a "ouvert" la balise div et que le > la referme à la fin.

C'est presque fini figurez-vous, parce qu'ensuite il suffit d'écrire ce qu'on veut que contienne la div, et ensuite on la referme avec la balise </div>

Ce qui nous donne : <div style="boutdecode: valeur; boutdecode:valeur; boutdecode:valeur">contenu de la div</div>

Table

Pour des choses un peu plus compliquées on peut faire un tableau avec la balise <table>

Même chose, on peut préciser avec style= : <table style="boutdecode: valeur; etc">

Après il faut indiquer ce qu'il y a dans les colonnes et les lignes. Pour cela on ouvre une ligne avec <tr> et ensuite on ouvre une cellule avec <td>

<table cellpadding="12" cellspacing="0" style="boutdecode: valeur; etc">
   <tr style="boutdecode: valeur; etc">
      <td style="boutdecode: valeur; etc> Contenu de la cellule </td>
      <td style="boutdecode: valeur; etc> Contenu de la cellule </td>
      <td style="boutdecode: valeur; etc> Contenu de la cellule </td>
   </tr>
</table>

Mais bon là ça devient compliqué, regardez par exemple à quoi ça ressemble ici : Exemple1

Bouts de codes

Quelques bouts de codes utiles :

• border-color | #code Hex | couleur de la bordure
• border