Centre des communautés
S'inscrire
Advertisement
Centre des communautés

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, la couleur d'accentuation et la couleur des liens des articles.

Thèmes et types d'infobox[]

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.

Utilisation de « type »[]

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 (la couleur de fond du titre et des en-têtes de l'infobox) de toutes les infoboxes de personnages en marron :

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

Utilisation de « theme »[]

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 secondaire de toutes les infoboxes du thème delta en bleu marine :

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

Si theme=' n'est pas spécifié, la valeur par défaut sera theme="wikia" et la classe pi-theme-wikia sera ajoutée à l'infobox.

Utilisation de « theme-source »[]

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 modifier l'arrière-plan secondaire des infoboxes pour tous les lieux d'Afrique, vous devez procéder comme suit :

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

Veuillez noter que les noms de classe sont sensibles à la casse, aussi faites attention à ce que vous autorisez les utilisateurs à saisir comme valeur du paramètre theme-source. Dans le cas illustré ci-dessus, une valeur telle que « afrique » ne déclencherait pas les changements de style souhaités.

Notes de thème avancés[]

  • 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 ajouté à la place.

Classes principales[]

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

Titre
.pi-title
En-tête
.pi-header
Navigation
.pi-navigation
Groupe
.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
Légende d'image
.pi-caption
Galerie d'image
.pi-image-collection
Élément d'onglet de panneau
wds-tabs__wrapper
Group d'onglet de panneau
wds-tabs
Onglet de panneau
wds-tabs__tab
Contenu d'onglet de panneau
wds-tab__content

Classes helper[]

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

Arrière-plan global de l'infobox
.pi-background
Arrière-plans de l'en-tête et de la navigation
.pi-secondary-background
Style de police des valeurs de données
.pi-font
Styles de police des en-têtes, libellés de données et de la navigation
.pi-secondary-font
Espacement (padding) autour de chaque élément de l'infobox (titre, en-tête et chaque paire de libellé/donnée)
.pi-item-spacing
Couleurs de bordure des éléments de l'infobox (infobox entière, légendes, groupes, paires de libellé/donnée et groupes d'onglets de contenu)
.pi-border-color

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

Exemples d'extraits de code[]

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 :

.portable-infobox .wds-tabs__tab {
  background-color: green;
}

Avancé[]

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 la classe du 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].

Advertisement