Ce billet de blog est une traduction d'un billet de Trollocool. (Voir la version en allemand, la version en anglais)
Grâce aux outils et aux pages d'aide de Wikia, de nombreux utilisateurs peuvent déjà utiliser les Infoboxes Portables. Avec un peu d'expérience, construire la structure des champs de données et de sous-titres n'est pas un soucis, seulement ce n'est que la première étape de la création d'une infobox. Dans la plupart des cas, il faudra utiliser du CSS.
CSS
Le CSS constitue une part importante du processus de création d'une infobox portable (l'autre part étant la création de la structure de l'infobox). Cette structure sera créée en utilisant un langage spécifique qui servira à disposer les éléments les uns par rapport aux autres. Le CSS, quant à lui, est utilisé pour définir le style des infoboxes, c'est-à-dire manipuler l'apparence de l'infobox, en changeant par exemple la couleur du fond, la taille de police, et une quantité d'autres éléments.
La plupart des infoboxes non portables utilisent l'attribut "style
" pour définir le style directement au cœur de l'infobox. Cependant, ceux-ci ne permettent pas la portabilité. Dans le cas des infoboxes portables, ce style passe par les feuilles de style MediaWiki.
Le CSS étant donc une partie importante de la création d'infoboxes, Wikia a décidé de fournir du CSS prédéfini, par le biais du thème Europa. Cependant, chaque wiki est unique, et il pourra être nécessaire de procéder à quelques petites (et parfois grandes, également) modifications.
Le thème Europa

L'apparence typique d'Europa
Les principales caractéristiques du thème Europa sont ses gros titres et sous-titres centrés. Les wikis qui sont satisfaits de ce thème n'auront pas besoin de CSS supplémentaire. Si vous ne voulez changer que quelques aspects mineurs, la meilleure option sera certainement de laisser Europa actif et de régler les quelques soucis directement. Dans le cas où Europa ne satisfait pas du tout vos besoins, et où vous souhaitez faire des changements plus importants, désactiver Europa et créer un nouveau style sera préférable.
Ajuster les infoboxes
Les infoboxes portables ont leurs classes unifiées sur tous les wikis. Cela signifie que vous pouvez copier la classe d'un autre wiki sur le vôtre, et l'apparence sera totalement conservée, dans la limite où les deux wikis ont la même base vis à vis d'Europa (soit les deux ont Europa actif, soit les deux l'ont désactivé). Cela signifie que les sélecteurs à utiliser pour modifier les différentes parties de l'infobox sont différents selon l'activation (ou non) d'Europa.
Les sélecteurs sans Europa
Un sélecteur CSS pour les infoboxes n'utilisant pas Europa doit commencer par la classe .portable-infobox
.
Il suffit ensuite de rajouter la classe spécifique de l'élément que vous souhaitez modifier, par exemple .pi-title
pour le titre. Cet exemple résulterait donc en .portable-infobox .pi-title
.
Les sélecteurs avec Europa
Les sélecteurs CSS pour Europa commencent généralement par .pi-europa
. Si nous souhaitons encore modifier le titre, mais pour une infobox utilisant Europa, il faudra encore une fois utiliser .pi-title
, donnant au final .pi-europa .pi-title
.
Sélecteurs de thème

Les thèmes personnalisés fonctionnent indépendamment d'Europa
.pi-theme-nomdutheme
plutôt que par .portable-infobox
ou .pi-europa
. Pour affecter ce thème précis, il suffira de remplacer nomdutheme
par le nom du thème personnalisé.
Pour selectionner le titre, il suffit encore une fois d'ajouter .pi-title
. on obtient alors .pi-theme-nomdutheme .pi-title
Vos propres thèmes

Cette infobox possède un style personnalisé
theme
" à la balise d'ouverture de l'infobox (<infobox>
), pour un résultat comme celui-ci : <infobox theme="nomdutheme">
, avec nomdutheme
remplacé par le nom du thème en question, de préférence en lien avec le sujet de l'infobox, par exemple personnage
pour une infobox sur des personnages.
Une infobox ayant le thème "nomdutheme" sera affectée à la fois par des sélecteurs peu spécifiques, tels que .portable-infobox
ou .pi-europa
, mais aussi des sélecteurs plus spécifiques comme .pi-theme-nomdutheme
. À noter : les sélecteurs les plus précis prennent le dessus sur les sélecteurs les plus généraux. Les sélecteurs ayant un autre thème (par exemple .pi-theme-autretheme
) n'affecteront pas du tout l'infobox.
L'avantage des thèmes est qu'ils permettent de définir un style unique à chaque infobox, mais souvenez-vous que les infoboxes de votre wiki doivent garder une certaine cohérence. Il est préférable de ne changer que des éléments mineurs, comme les couleurs, et pas les éléments majeurs tels que la taille des infoboxes. Il est également préférable pour la lecture de votre CSS de placer le code qui doit affecter toutes les infoboxes sous un sélecteur global, et le code spécifique sous un sélecteur plus spécifique.
Classes CSS
Bien évidemment, il n'y a pas que le titre qui peut être affecté, ainsi il existe une variété assez importante de classes pour sélectionner les autres éléments. Il est ainsi possible de modifier les images, titres, sous-titres, champs et en-tête de données... Les classes les plus importantes seront donc listées ici, accompagnées d'une explication de leur utilité, ainsi que d'un exemple d'utilisation.
Aucun élement
Dans le cas où .portable-infobox
, .pi-europa
ou .pi-theme-nomdutheme
est utilisé seul, l'infobox elle-même (donc le conteneur) sera sélectionnée. Les modifications les plus fréquentes sont de modifier la bordure de l'infobox (border:1px solid red;
), sa largeur (width:300px;
) ou l'espace entre la bordure et le contenu (padding:5px;
).
.pi-background
.pi-background
est le sélecteur utilisé pour modifier le fond de l'infobox portable. Ce fond est visible tant qu'aucun élément ayant son propre fond est situé au dessus. Ce fond est défini par la propriété background
(background:transparent;
), et prend en charge les noms de couleurs, les valeurs (que ce soit en hexadécimal, en RGB voire même en TSL), mais aussi les images.
.pi-secondary-background
À l'instar de .pi-background, .pi-secondary-background permet de modifier la couleur de fond d'un entête (c'est-à-dire, les champs qui ne sont pas remplis par l'utilisateur, avec un nom de section). Il s'utilise de la même manière que .pi-background.
.pi-title
Comme indiqué dans l'exemple avant, la classe .pi-title
est à utiliser pour sélectionner les champs de titre. Il est possible de changer son fond (background:black;
), la taille de police (font-size:18px;
et line-height:22px
), le type de police (font-family:Comic Sans MS;
), la graisse des caractères (font-weight:bolder;
), la couleur de texte (color:green;
) et l'espacement interne (padding:5px;
).
.pi-image
Bien que le nom puisse laisser penser que ce sélecteur modifie l'image de l'infobox, ce n'est pas tout à fait le cas. En effet, .pi-image
n'affecte que le conteneur de l'image. Le fond (background:blue;
) ou la bordure (border:2px dashed orange;
) peuvent être ajustés.
.pi-image-thumbnail

L'image a été réduite pour ne pas prendre trop de place.
width:auto;height:auto;max-width:100%;
. Également, il peut arriver que certaines images soient trop longues, il est donc possible d'ajouter une hauteur maximale aux images : max-height:600px;
.pi-header
La classe .pi-header
affecte les sous-titres. Dans la majorité des cas, le style sera le même que celui du titre, avec quelques ajustements mineurs tels que l'alignement (text-align:left;
) ou la taille de police (font-size:18px; et line-height:22px;). Dans la majorité des cas, le style des titres pourra simplement être copié et ajusté légèrement.
.pi-border-color
Même les bordures entre les champs de données ont leur propre classe, .pi-border-color
. La couleur (border-color:gray;
) et l'épaisseur de bordure (border-width:2px;
) peuvent être modifiés. Si vous souhaitez effacer ces bordures, il faudra utiliser : border-style:none
.
.pi-data
.pi-data
est la classe attribuée aux lignes de données. Cette classe est en général utilisée uniquement pour ajuster l'espacement interne (padding:1px 0;
) ou externe (margin-bottom:2px;
).
.pi-data-label
.pi-data-label
est la classe utilisée pour les en-têtes de données, soit en général la colonne de gauche. La taille de police (font-size:14px;
and line-height:16px;
), la graisse (font-weight:700;
), la couleur (color:pink;
), les bordures (border-right:2px solid cyan;
), l'espacement (padding:3px;
) et la largeur (flex-basis:80%;
) sont souvent modifiés.
.pi-data-value
Enfin, .pi-data-value
change les champs de donnée eux-mêmes, donc en soi la colonne de droite de l'infobox. Les styles utilisés sont en général les mêmes que pour .pi-data-label
.
Pour finir
Voici déjà la fin de ce billet. J'espère que ce billet aura pu vous apprendre quelque chose, merci d'avoir lu, et amusez vous bien avec les infoboxes portables !
Merci encore à Trollocool pour avoir écrit le billet d'origine.