La huitième génération est là, et tout le monde est invité à contribuer !
Une nouvelle génération qui apporte de nombreuses nouveautés, donc beaucoup de travail sur Poképédia !
N'hésitez pas à consulter les pages d'aide en cas de doute sur la rédaction, et n'oubliez pas de prévisualiser vos modifications avant de les publier.

Aide:CSS

De Poképédia
Sauter à la navigation Sauter à la recherche

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.


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 explication 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 autre 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égerement 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 !

Sprite 383 Sh.png 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 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.

navigation

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égerement 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 :

acier
-
combat
-
dragon
-
eau
-
électrik
-
feu
-
fée
-
glace
-
inconnu
-
insecte
-
normal
-
obscur
-
plante
-
poison
-
psy
-
roche
-
sol
-
spectre
-
ténèbres
-
vol
-

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 ne parleront donc ici 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
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, à celle 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>
  • Pikachu-RFVF.png 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.
  • Pikachu-RFVF.png 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.
  • Pikachu-RFVF.png 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

https://www.pokepedia.fr

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 :

https://www.pokepedia.fr

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.

Cas du CSS sur la version mobile

nomobile

Personnaliser le CSS