Aide:CSS
Cette page d'aide a été rédigée de manière à contenir le plus petit nombre de liens bleus possible, afin de faciliter sa lecture.
| CSS — |
| Pages spéciales d'action — |
| Données sémantiques — |
| API — |
| JavaScript |
Le CSS est un langage informatique primordial pour les sites web, puisque son rôle est d'assurer la totalité du design et une partie de la mise en forme. Cette page d'aide permet de découvrir les principales classes CSS utilisées sur Poképédia, c'est-à-dire les principaux styles pour mettre en forme tableaux, bandeaux…
Les tableaux
Les tableaux, sur Poképédia, partent tous d'une base solide et omniprésente, la classe « tableaustandard ». Cependant, il existe bien d'autres classes utilisables sur certains types particuliers de tableaux (infobox, navigation…) qui sont également expliquées ici.
tableaustandard
Comme son nom l'indique, la classe « tableaustandard » (tableau standard) est à la base de tout tableau sur Poképédia. Depuis 2013, cette classe permet une uniformisation de tous les tableaux en appliquant notamment une légère couleur de fond, une fine bordure, ou la gestion de l'espace entre le contenu des cellules et la bordure, entre autres. Elle s'utilise exclusivement lors de l'ouverture d'un tableau :
{| class="tableaustandard"
// le reste du code du tableau
|}
Mais, au vu de sa popularité, vous l'avez sûrement déjà rencontrée de très nombreuses fois et êtes familier à son utilisation.
centre
Autre classe utilisée couramment, très simple mais très pratique, « centre » permet de centrer le texte de toutes les cellules du tableau sans exception, ce qui n'est pas le cas par défaut avec seulement « tableaustandard ». Son utilisation donne donc :
{| class="tableaustandard centre"
// le reste du code du tableau
|}
Les classes pour infobox
Du fait de leur structure particulière et toujours similaire, les infobox ont le droit à plusieurs classes CSS. La structure du code d'une infobox, schématiquement, est celle-ci :
{| class="tableaustandard ficheinfo"
! class="entêtesection" | Entête du tableau
// Une partie du code du tableau
| class="illustration" | [[Fichier:Nom de l'image.png]]
|-
| class="précision" | Légende de l'image
// Une partie du code du tableau
| class="précision" | Une autre précision
// Une partie du code du tableau
|}
Des explications sur les différentes classes sont données ci-dessous.
ficheinfo
« ficheinfo » est donc la classe qui donne à l'infobox dans son ensemble ses caractéristiques, et non à certaines cellules comme les autres classes. C'est notamment elle qui fait que toute infobox est alignée sur la droite de la page et ne peut dépasser 30% de la largeur (excepté sur version mobile).
entêtesection
Comme son nom l'indique, « entêtesection » est à utiliser sur la cellule marquant l'entête du tableau. Elle ne fonctionnera que pour une ligne commençant par un point d'exclamation (ce qui correspond à une balise TH en HTML).
illustration
« illustration » est donc à utiliser pour une cellule contenant uniquement une image. Elle permet notamment de changer la couleur de fond de la cellule d'un gris léger vers un blanc pur.
précision
Enfin, « précision » peut servir pour toute cellule contenant une information secondaire. Elle réduit légèrement la taille du texte et change la couleur de fond. Typiquement, cette classe est utilisée pour les cellules contenant les légendes des images, même si ce n'est pas son unique rôle.
badge
Moins évident visuellement, il est bon de savoir que ce qui est usuellement appelé badge, ces petites boîtes d'information utilisées sur les pages utilisateur, comme par exemple celle ci-dessous, sont en réalité des tableaux !
|
Je joue à Pokémon Version Rubis. |
|---|
Ces tableaux ont tous comme bien commun d'adopter la classe « badge » qui leur donne leur aspect particulier par rapport aux autres tableaux. Cette classe s'utilise aussi à l'ouverture du tableau :
{| class="tableaustandard badge"
// le reste du code du tableau"
|}
Cependant, cette classe reste très rarement utilisée en dehors des modèles, surtout qu'il est bien souvent préférable d'utiliser le Modèle:Badge Utilisateur qui permet de créer des badges de toute sorte sans se soucier d'une quelconque manière du code brut qui se trouve en-dessous.
Moins connue, la classe « navigation » est présente sur tous les tableaux de navigation visibles en fin de page, donnant quelques caractéristiques au titre et réduisant légèrement le texte des cellules. Elle s'utilise aussi sur l'ensemble du tableau :
{| class="tableaustandard navigation"
// le reste du code du tableau
|}
Les classes de coloration
Savoir construire un tableau, c'est bien, mais reste-t-il encore, très souvent, à le colorer pour l'accorder à la page dans laquelle il se retrouve. Pour cela, il y a deux types majeurs de coloration : par type, et par jeu.
Par type
À chaque type est, sur Poképédia, associé une couleur. Ainsi, les articles sur les Pokémon Plante arborent tous une teinte verte identique qui découle de l'utilisation de la classe « plante ». Pour colorer un tableau, la méthode est la même qu'avec les autres classes présentées jusque-là :
{| class="tableaustandard centre plante"
// le reste du code du tableau
|}
Ou tout autre type à la place de « plante ». Voici la liste des types disponibles avec un aperçu du résultat par la même occasion :
|
|
|
|
| ||||||||||
|
|
|
|
| ||||||||||
|
|
|
|
| ||||||||||
|
|
|
|
|
Par jeu
S'il est possible de colorer l'ensemble d'un tableau selon les couleurs d'un jeu, comme pour les types, cette situation ne se présente qu'exceptionnellement et nous ne parlerons donc ici que de la coloration, bien plus fréquente, des bordures de cellule. Un exemple parlant est celui des tableaux de localisation :
| Version | Rareté | Obtention | Niveau |
|---|---|---|---|
| Noir et Blanc | Inexistant | Faire évoluer Gringolem Évènement. |
— 70 |
| Noir et Blanc 2 | Commun Peu commun |
Tour Dragospire Route Victoire |
55 - 58 48 - 50 |
On remarque bien ici des bandes colorées entourant les cellules « Noir et Blanc » et « Noir et Blanc 2 ». Cela correspond bien à des classes CSS, ici « noir-blanc » et « noir2-blanc2 ». Ces classes s'utilisant sur les cellules elles-mêmes, le code devient donc quelque chose du type :
{| class="tableaustandard centre"
// le reste du code du tableau
| class="noir-blanc" | Contenu de la cellule
// le reste du code du tableau
|}
Liste des classes de coloration par jeu disponibles :
| Jeux principaux | ||||||
|---|---|---|---|---|---|---|
| vert | rouge | bleu | rouge-bleu | jaune | ||
| or | argent | or-argent | cristal | |||
| rubis | saphir | rubis-saphir | émeraude | rougefeu | vertfeuille | rougefeu-vertfeuille |
| diamant | perle | diamant-perle | platine | orheartgold | argentsoulsilver | orheartgold-argentsoulsilver |
| noir | blanc | noir-blanc | noir2 | blanc2 | noir2-blanc2 | |
| x | y | x-y | rubisoméga | saphiralpha | rubisoméga-saphiralpha | |
| soleil | lune | soleil-lune | ultrasoleil | ultralune | ultrasoleil-ultralune | |
| letsgopikachu | letsgoévoli | letsgopikachu-letsgoévoli | épée | bouclier | épée-bouclier | |
| diamantétincelant | perlescintillante | diamantétincelant-perlescintillante | légendesarceus | |||
| Jeux secondaires | ||||||
| colosseum | xd | pokéwalker | parcdesamis | dreamworld | donjonmystèrebleu | donjonmystèrerouge |
| donjonmystère | donjonmystèreombre | donjonmystèretemps | donjonmystère2 | donjonmystèreciel | donjonmystère3 | donjonmystère4 |
Autres classes notables
bandeau
Relativement récente et ainsi encore assez peu implémentée dans les modèles, tous les bandeaux devraient pourtant reposer sur cette classe CSS qui permet, à elle seule, de styliser de A à Z un bandeau, de façon très simple.
Une exemple valant mieux qu'un beau discours :
<ul class="bandeau"><li>Un bandeau tout vide.</li></ul>
pour le résultat suivant :
- Un bandeau tout vide.
Cette classe facilite aussi largement l'insertion d'image au début du bandeau, en ajoutant une balise SPAN. Nouvel exemple :
<ul class="bandeau"> <li>[[Fichier:Pikachu.png|50px]] <span>Tous les Pokéfans adorent Pikachu ! <small>(ou presque...)</small></span></li> </ul>
Tous les Pokéfans adorent Pikachu ! (ou presque...)
La classe devant s'appliquer sur un élément HTML qui « disparaît » dans le wikitexte, il est obligatoire d'utiliser directement le code HTML (comme montré ci-dessus) pour l'utiliser. Cependant, l'utilisation de cette classe peut, depuis 2015, se faire plus simplement grâce au modèle Bandeau. Le code suivant, {{Bandeau|<li>Un bandeau tout vide</li>}}, pour le même résultat qu'au début de la section.
Mais l'intérêt de ce système et de ce modèle est aussi de ne rendre le tout qu'avec une seule bordure lorsque plusieurs bandeaux sont présents. Normalement, en mettant les deux codes à la suite, les deux bandeaux restent séparés :
<ul class="bandeau"><li>Un bandeau tout vide.</li></ul> <ul class="bandeau"> <li>[[Fichier:Pikachu.png|50px]] <span>Tous les Pokéfans adorent Pikachu ! <small>(ou presque...)</small></span></li> </ul>
- Un bandeau tout vide.
-
Tous les Pokéfans adorent Pikachu ! (ou presque...)
Le modèle Bandeau montré au-dessus permet la « fusion » des éléments UL avec la classe « bandeau ». Exemple en entourant le code précédent avec le modèle :
{{Bandeau|
<ul class="bandeau"><li>Un bandeau tout vide.</li></ul>
<ul class="bandeau">
<li>[[Fichier:Pikachu.png|50px]]
<span>Tous les Pokéfans adorent Pikachu ! <small>(ou presque...)</small></span></li>
</ul>
}}
- Un bandeau tout vide.
-
Tous les Pokéfans adorent Pikachu ! (ou presque...)
Ce qui est, nous en conviendrons, un rendu bien plus clair et agréable à lire.
blockquote
« blokquote » est une balise stylisée de façon à être utilisée pour citer un paragraphe entier, à la fois sur un article par rapport au texte d'un personnage, ou sur une page de discussion pour citer un autre utilisateur. Exemple :
<blockquote>« Bien le bonjour! Bienvenue dans le monde magique des Pokémon! Mon nom est Chen! Les gens souvent m'appellent le Prof Pokémon! Ce monde est peuplé de créatures du nom de Pokémon! Pour certains, les Pokémon sont des animaux domestiques, pour d'autres, ils sont un moyen de combattre. Pour ma part... L'étude des Pokémon est ma profession. Tout d'abord, quel est ton nom? OK! Ton nom est donc Joueur! Voici mon petit-fils. Il est ton rival depuis sa toute jeunesse. ... Heu... C'est quoi donc son nom déjà? Ah oui! Je me souviens! Son nom est Blue! Joueur! Ta quête des Pokémon est sur le point de commencer! Un tout nouveau monde de rêves, d'aventures et de Pokémon t'attend! Dingue! »</blockquote>
« Bien le bonjour! Bienvenue dans le monde magique des Pokémon! Mon nom est Chen! Les gens souvent m'appellent le Prof Pokémon! Ce monde est peuplé de créatures du nom de Pokémon! Pour certains, les Pokémon sont des animaux domestiques, pour d'autres, ils sont un moyen de combattre. Pour ma part... L'étude des Pokémon est ma profession. Tout d'abord, quel est ton nom? OK! Ton nom est donc Joueur! Voici mon petit-fils. Il est ton rival depuis sa toute jeunesse. ... Heu... C'est quoi donc son nom déjà? Ah oui! Je me souviens! Son nom est Blue! Joueur! Ta quête des Pokémon est sur le point de commencer! Un tout nouveau monde de rêves, d'aventures et de Pokémon t'attend! Dingue! »
plainlinks
« plainlinks » est une classe particulière, non pas exclusive à Poképédia mais commune à tous les wikis utilisant le même logiciel pour fonctionner (ce qui explique le nom en anglais). Son rôle est de faire disparaître le petit symbole qui apparaît à côté d'un lien externe. Par exemple, voici un lien
Alors qu'en l'entourant d'un élément auquel nous donnons la classe « plainlinks » :
<span class="plainlinks">https://www.pokepedia.fr</span>
Le symbole disparaît bien :
Cette classe est parfois utilisée pour des considérations esthétiques.
Les classes de Portails
Les portails, comme le Portail:Jeux vidéo, reposent sur une impressionnante série de classes CSS. Comme celles-ci ne sont pas utilisées en dehors de ces portails et de la page d'accueil, elles ne seront pas expliquées ici. Vous pouvez lire Aide:Portail pour savoir comment créer facilement un portail si besoin est.