Le style des Infoboxes

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

Europa est une fonctionnalité qui ajoute un style prédéfini à vos infoboxes, qui peut être activé ou désactivé à n'importe quel moment dans les composants de wiki. Ces feuilles de style sont globalement identiques, la seule différence d'un wiki à l'autre sera l'adaptation des couleurs des infoboxes aux couleurs du wiki, définies depuis le Concepteur de thème.

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 sélecteurs spécifiques à un thème personnalisé commencent par .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

Il est donc possible de créer des thèmes personnalisés, qui sont des "thèmes", non pas au sens d'Europa, des thèmes prédéfinis, mais un thème dans le sens où il permettra d'ajouter une classe spécifique à l'infobox que vous créez, afin qu'uniquement cette infobox puisse être affectée par le selecteur CSS correspondant. Le thème est ajouté dans le code de l'infobox sur la page de Modèle. Ainsi, il faut ajouter l'attribut "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

Ce sélecteur est celui qui modifie l'image elle-même. Si la largeur de l'infobox à été changée, il sera probablement nécessaire d'ajouter ce code : 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.