Kheys, Administrateurs
12 575
modifications
« JVFlux:Guide des Modèles (Template) » : différence entre les versions
→Bouts de codes
(en cours de rédaction) |
|||
| Ligne 31 : | Ligne 31 : | ||
Cela nous donne :<code><nowiki><div style="boutdecode: valeur; boutdecode:valeur; boutdecode:valeur"></nowiki></code> | Cela nous donne :<code><nowiki><div style="boutdecode: valeur; boutdecode:valeur; boutdecode:valeur"></nowiki></code> | ||
Vous remarquez qu'on a "ouvert" la balise div et que le <code>></code> la referme à la fin. | Vous remarquez qu'on a "ouvert" la balise div et que le <code>></code> 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 <code><nowiki></div></nowiki></code> | 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 <code><nowiki></div></nowiki></code> | ||
| Ligne 37 : | Ligne 37 : | ||
Ce qui nous donne : <code><nowiki><div style="boutdecode: valeur; boutdecode:valeur; boutdecode:valeur">contenu de la div</div></nowiki></code> | Ce qui nous donne : <code><nowiki><div style="boutdecode: valeur; boutdecode:valeur; boutdecode:valeur">contenu de la div</div></nowiki></code> | ||
=== Table === | ===Table === | ||
Pour des choses un peu plus compliquées on peut faire un tableau avec la balise <code><nowiki><table></nowiki></code> | Pour des choses un peu plus compliquées on peut faire un tableau avec la balise <code><nowiki><table></nowiki></code> | ||
| Ligne 52 : | Ligne 52 : | ||
</pre>Mais bon là ça devient compliqué, regardez par exemple à quoi ça ressemble ici : [https://jvflux.fr/index.php?title=Mod%C3%A8le:ArticlesImmanquables-x3&action=edit Exemple1] | </pre>Mais bon là ça devient compliqué, regardez par exemple à quoi ça ressemble ici : [https://jvflux.fr/index.php?title=Mod%C3%A8le:ArticlesImmanquables-x3&action=edit Exemple1] | ||
=== Bouts de codes === | ===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 [https://fr.wikipedia.org/wiki/Aide:Couleurs#Couleurs_douces_et_pastel 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. | |||
* border-color | '''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). | ||
* border | |||
'''Balises utiles :''' <code><nowiki><span></nowiki></code> 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 :''' | |||
*<code>width:</code> <code>heigth:</code> <code>max-width:</code> <code>max-heigth:</code> précise la largeur ou longueur de l'élément en pixel, ou en pourcentage. | |||
*<code>border-color: #[https://htmlcolorcodes.com/fr/ code Hex]</code> couleur de la bordure. | |||
*<code>border: 1px solid</code> la bordure sera de 1 pixel d'épaisseur. On peut mettre 0 pour qu'il n'y ait pas de bordure. | |||
*<code>border-top/bottom/left/right: 1px solid</code> permet de préciser que la bordure doit avoir une certaine épaisseur d'un seul côté | |||
*<code>border-radius: 5px</code> donne un côté arrondi aux coins d'une div | |||
*<code>background-color: #[https://htmlcolorcodes.com/fr/ code Hex]</code> la couleur du fond d'une div | |||
*<code>background-image: <nowiki>[[Fichier: nom.jpg]]</nowiki></code> permet de mettre une image en fond d'une div ou bien <code>background-image: linear-gradient(to bottom, #FFB092, #FFFFFF)</code> permet de mettre un fond dégradé, on peut préciser l'orientation et les couleurs qu'il comporte. | |||
*<code>text-align: center/left/right</code> pour centrer le texte ou le ferrer à droite ou à gauche dans une div. | |||
*<code>padding: 10px</code> 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 : <code>padding:10px 5px 1px 29px</code> | |||
*<code>font-size: 11px</code> taille du texte | |||
*<code>font-color: #[https://htmlcolorcodes.com/fr/ code Hex]</code> 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 : <br> | |||
<code><nowiki>{{Modèle</nowiki><br><nowiki> | |||
|Donnée1= n'importe quoi</nowiki><br><nowiki> | |||
}}</nowiki></code> | |||
Cela permet de faire un seul modèle pour renseigner diverses données. Par exemple le modèle ContactUtilisateur ressemble à ça : | |||
{{ContactUtilisateur | |||
|LienJVC= https://www.jeuxvideo.com/profil/pseudo | |||
|PseudoJVC= Pseudo}} | |||
Son code d'insertion :<br> | |||
<code><nowiki>{{ContactUtilisateur</nowiki><br><nowiki> | |||
|LienJVC= https://www.jeuxvideo.com/profil/pseudo</nowiki><br><nowiki> | |||
|PseudoJVC= Pseudo</nowiki><br><nowiki> | |||
}}</nowiki></code> | |||
On peut réutiliser ce modèle en précisant un pseudo différent à chaque fois. | |||