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. Des guillemets ouvrent et ferment la liste de bouts de codes.

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

Couleurs : En général il faut rentrer un code Hex après un hashtag. Mais il existe aussi des couleurs internes à wikimedia listées ici. Il suffit de rentrer le nom de la couleur à la place du #codehex comme GreenYellow ou bien SaddleBrown. Sachez que la couleur "transparent'" peut être utile pour du texte invisible.

Valeurs : La plupart du temps on peut préciser une valeur en pixel, en pourcentage, ou en em (une unité qui s'adapte en fonction de l'affichage, peut être utile).

Balises utiles : <span> permet d'insérer un texte ou un fichier en précisant un style pour cet élément (comme pour la div)

Bouts de codes utiles :

width: heigth: max-width: max-heigth: précise la largeur ou longueur de l'élément en pixel, ou en pourcentage.
border-color: #code Hex couleur de la bordure.
border: 1px solid la bordure sera de 1 pixel d'épaisseur. On peut mettre 0 pour qu'il n'y ait pas de bordure.
border-top/bottom/left/right: 1px solid permet de préciser que la bordure doit avoir une certaine épaisseur d'un seul côté
border-radius: 5px donne un côté arrondi aux coins d'une div
background-color: #code Hex la couleur du fond d'une div
background-image: [[Fichier: nom.jpg]] permet de mettre une image en fond d'une div ou bien background-image: linear-gradient(to bottom, #FFB092, #FFFFFF) permet de mettre un fond dégradé, on peut préciser l'orientation et les couleurs qu'il comporte.
text-align: center/left/right pour centrer le texte ou le ferrer à droite ou à gauche dans une div.
padding: 10px il s'agit de l'espacement entre les éléments, vous pouvez préciser la valeur pour l'espacement du haut/droite/bas/gauche (dans cet ordre) comme ceci : padding:10px 5px 1px 29px
font-size: 11px taille du texte
font-color: #code Hex couleur du texte

Modèle avec options

Souvent un modèle a besoin d'être modifié en insérant des informations individuelles. Par exemple un tableau à remplir avec des données différentes. Dans ce cas là on utilise la triple accolade.

Par exemple le code {{{Donnée1}}} dans un modèle permet de remplacer ce code par la valeur précisée dans le champs Donnée1. Un exemple assez simple :
{{Modèle |Donnée1= n'importe quoi }}

Cela permet de faire un seul modèle pour renseigner diverses données. Par exemple le modèle ContactUtilisateur ressemble à ça :

Me contacter

Profil JVC : Pseudo

Mes contributions | Mes stats

Son code d'insertion :
{{ContactUtilisateur |LienJVC= https://www.jeuxvideo.com/profil/pseudo |PseudoJVC= Pseudo }}

On peut réutiliser ce modèle en précisant un pseudo différent à chaque fois.