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 " " 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.

Il suffit ensuite de rajouter la classe spécifique de l'élément que vous souhaitez modifier, par exemple  pour le titre. Cet exemple résulterait donc en.

Les sélecteurs avec Europa
Les sélecteurs CSS pour Europa commencent généralement par. Si nous souhaitons encore modifier le titre, mais pour une infobox utilisant Europa, il faudra encore une fois utiliser, donnant au final.

Sélecteurs de thème
 Les sélecteurs spécifiques à un thème personnalisé commencent par  plutôt que par   ou. Pour affecter ce thème précis, il suffira de remplacer  par le nom du thème personnalisé.

Pour selectionner le titre, il suffit encore une fois d'ajouter. on obtient alors

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 " " à la balise d'ouverture de l'infobox, pour un résultat comme celui-ci : , avec   remplacé par le nom du thème en question, de préférence en lien avec le sujet de l'infobox, par exemple   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  ou , mais aussi des sélecteurs plus spécifiques comme. À 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 ) 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ù,   ou   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, sa largeur ou l'espace entre la bordure et le contenu.

.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é , 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  est à utiliser pour sélectionner les champs de titre. Il est possible de changer son fond, la taille de police ( et  ), le type de police , la graisse des caractères , la couleur de texte  et l'espacement interne.

.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,  n'affecte que le conteneur de l'image. Le fond ou la bordure  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 :. Également, il peut arriver que certaines images soient trop longues, il est donc possible d'ajouter une hauteur maximale aux images :

.pi-header
La classe  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 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,. La couleur et l'épaisseur de bordure  peuvent être modifiés. Si vous souhaitez effacer ces bordures, il faudra utiliser :.

.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 ou externe.

.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 ( and  ), la graisse, la couleur , les bordures , l'espacement  et la largeur  sont souvent modifiés.

.pi-data-value
Enfin,  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.

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 !