Le thème des infoboxes portables peut être très simplement modifié par les administrateurs locaux en utilisant le CSS.

Sans personnalisation, le thème de l'infobox portable s'inspire des paramètres du Concepteur de thème de votre communauté, en particulier la couleur de fond des articles et la couleur des liens.

Thèmes et types d'infobox[modifier le wikicode]

Le thème par défaut de l'infobox peut être surchargé en utilisant du CSS local de la communauté et les attributs type, theme ou theme-source de la balise infobox, permettant facilement de cibler spécifiquement un modèle d'infobox à partir de ses classes.

  • L'attribut type est utilisé pour spécifier un type logique (ce que décrit une infobox), mais peut également être utilisé comme classe CSS.
  • L'attribut theme est utilisé pour indiquer une classe CSS personnalisée pour l'infobox.
  • L'attribut theme-source vous permet de changer la classe CSS via un paramètre de modèle.
  • Les communautés qui utilisent le thème Europa ont un ensemble différent de règles CSS par défaut. Celles-ci peuvent être identifiées en utilisant le sélecteur .pi-europa. Les communautés ayant des styles classiques existants qu'elles essaient de recréer pour les Infoboxes portables sont encouragées à désactiver Europa avant de migrer leur CSS.

Utilisation de « type »[modifier le wikicode]

Par exemple, type="personnage" ajoutera une classe appelée type-personnage au code HTML de l'infobox, qui peut ensuite être personnalisé en utilisant le CSS :

Code du modèle
<infobox type="personnage"></infobox>
CSS à utiliser
.portable-infobox.type-personnage {
   
}

À titre d'exemple, le code ci-dessous pourrait alors être utilisé pour changer la couleur de fond secondaire en rouge :

.portable-infobox.type-personnage .pi-secondary-background {
    background-color: #CF3D0C;
}

Utilisation de « theme »[modifier le wikicode]

Par exemple, theme=delta ajoutera une classe nommée pi-theme-delta au code HTML de l'infobox, qui peut alors être personnalisé en utilisant le CSS :

Code du modèle
<infobox theme="delta"></infobox>
CSS à utiliser
.portable-infobox.pi-theme-delta {
   
}

À titre d'exemple, le code ci-dessous pourrait alors être utilisé pour changer la couleur d'arrière-plan en rouge :

.portable-infobox.pi-theme-delta .pi-secondary-background {
    background-color: #CF3D0C;
}

Utilisation de « theme-source »[modifier le wikicode]

Par exemple, theme-source="lieu" signifie que, quand lieu est indiqué dans l'infobox d'un article, elle utilisera la valeur de celle-ci comme classe.

Par exemple :

Code du modèle
<infobox theme-source="lieu"></infobox>
Code dans l'article
{{Exemple Infobox
|lieu = afrique
}}
CSS à utiliser
.portable-infobox.pi-theme-afrique {
   
}

Si vous souhaitez cibler des éléments spécifiques de cette infobox, vous feriez alors quelque chose comme ceci :

.portable-infobox.pi-theme-afrique .pi-secondary-background {
   //styles personnalisés
}

Notes de thème avancés[modifier le wikicode]

  • Si on utilise à la fois theme et theme-source, tous deux fourniront des propriétés CSS.
  • Les espaces dans les valeurs de theme et theme-source sont convertis en tirets (-), ce qui signifie qu'une seule classe peut être ajoutée.
  • Si aucun thème n'est spécifié, .pi-theme-wikia sera utilisé à la place.

Classes principales[modifier le wikicode]

Ces classes vous aident à mettre à jour le style de certaines balises :

Titre
.pi-title
En-tête
.pi-header
Navigation
.pi-navigation
Groupes
.pi-group
Balise de donnée
.pi-data
Valeur de donnée
.pi-data-value
Libellé de donnée
.pi-data-label
Image
.pi-image
Oblets d'image
.pi-image-collection-tabs

Classes helper[modifier le wikicode]

Les infoboxes portables contiennent diverses classes helper propres pour vous aider à mettre à jour le style global facilement :

.pi-background
arrière-plan global de l'infobox
.pi-secondary-background
arrière-plans de l'en-tête et de la navigation
.pi-font
style de police des valeurs de données
.pi-secondary-font
styles de police des en-têtes, libellés et de la navigation
.pi-item-spacing
espacement (padding) entre chaque élément de l'infobox
.pi-border-color
couleurs de bordure des éléments de l'infobox

Note : ce n'est pas une liste exhaustive des classes disponibles, plus sont listées sur Aide:Infoboxes/Balises.

Exemples d'extraits de code[modifier le wikicode]

Modification de la largeur de l'infobox :

.portable-infobox {
   width: 300px;
}

Modification de la couleur d'arrière-plan de l'infobox :

.portable-infobox.pi-background {
   background-color: #ff0000;
}

Modification de la couleur d'arrière-plan des en-têtes et de la navigation :

.portable-infobox .pi-secondary-background {
   background-color: #00ff00;
}

Modification de la couleur de bordure des éléments de l'infobox :

.portable-infobox .pi-border-color {
   border-color: #00ff00;
}

Modification de l'espacement des éléments de l'infobox :

.portable-infobox .pi-item-spacing {
   padding: 10px 20px;
}

Modification de la taille de police des valeurs de donnée :

.portable-infobox .pi-font {
   font-size: 16px;
}

Modification de la taille de police des en-têtes, libellés et navigation :

.portable-infobox .pi-secondary-font {
   font-size: 18px;
}

Modification de la taille de police des titres de l'infobox :

.portable-infobox .pi-title {
   font-size: 24px;
}

Modification de la largeur de la colonne du libellé :

.portable-infobox .pi-data-label {
   flex-basis: 165px;
}

Sélection du thème personnalisé « oblivion » puis adaptation de la taille de police des libellés :

.portable-infobox.pi-theme-oblivion .pi-caption {
   font-size: 16px;
}

Changer la couleur de fond des onglets pour les images :

.pi-image-collection-tabs li {
  background-color: green;
}

Avancé[modifier le wikicode]

En règle générale, si vous avez besoin de modifier le style d'un thème en particulier, vous écrieriez quelque chose comme ceci :

.portable-infobox.pi-theme-name .pi-secondary-background {
   background-color:#334;
}

Toutefois, quand une classe CSS est sur le même élément qu'un autre et vous avez besoin de choisir les deux, ne laissez aucun espace entre les classes. Par exemple, .pi-background est sur le même élément <aside> que le thème (.pi-theme-name) et la classe générale de l'infobox portable (.portable-infobox), aussi le CSS qui modifie l'arrière-plan pour ce thème serait :

.portable-infobox.pi-theme-name.pi-background {
   background-color:#334;
}

Les éléments individuels peuvent être stylisés indépendamment en utilisant des attributs de données comme sélecteurs. Par exemple, tous les éléments de des infoboxes portables qui ont une donnée source seront désormais restitués en HTML avec le nom de ce paramètre dans un attribut de données, tel que data-source="ATQ". Cela vous permettra d'écrire des sélecteurs CSS ou jQuery tels que .pi-item[data-source=ATQ] pour styliser et identifier les éléments individuels. Utilisé en combinaison avec type, cela devrait éliminer la nécessité de sélectionner le style nth-of-type et ouvrir d'autres possibilités de conception et d'interactivité.

L'attribut name d'un élément permet la sélection explicite des éléments, qu'ils acceptent ou non une donnée source, y compris l'identification de <title>, <group>, <data>, <header>, <image> et <navigation>. Tout comme pour l'attribut de donnée data-source, <data name="bar"> peut être sélectionné comme .pi-item[data-item-name=bar].

Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA.