FANDOM


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

Thèmes d'infoboxModifier

Le thème par défaut de l'infobox peut être surchargé en utilisant l'attribut theme ou theme-source de la balise infobox, permettant aux infoboxes d'utiliser le style local du CSS de la communauté.

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

Si les deux attributs sont utilisés dans la balise de l'infobox, l'attribut theme est considéré comme celui par défaut.

Veuillez noter que les espaces dans les valeurs de theme et theme-source sont convertis en moins (-), on ne peut donc ajouter qu'une classe en les utilisant.

 

themeModifier

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 :

<infobox theme="delta">
  //le contenu de l'infobox va ici
</infobox>
.pi-theme-delta {
   //styles personnalisés
}

Le code ci-dessous pourrait alors être utilisé pour changer la couleur d'arrière-plan des éléments en rouge :

.pi-theme-delta .pi-item {
    background-color: #CF3D0C;  //change la couleur d'arrière-plan des éléments l'infobox en rouge
}

Si theme n'est pas indiqué, .pi-theme-wikia sera alors utilisé.

theme-sourceModifier

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 :

<infobox theme-source="lieu">
   ...
</infobox>


{{une infobox
|lieu = Afrique
}}

Le CSS pour le thème du modèle sera alors :

.pi-theme-afrique {
   //styles personnalisés
}

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

.pi-theme-afrique .pi-title {
   //styles personnalisés
}

Classes helperModifier

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 portables/wikitexte.

ExemplesModifier

Choix du thème personnalisé « oblivion » puis adaptation de la taille de police des légendes :

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

Modification de la largeur de l'infobox :

.portable-infobox {
   width: 300px;
}

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

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

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

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

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

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

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

.pi-item-spacing {
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
}

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

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

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

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

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

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

AvancéModifier

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 :

.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), aussi le CSS qui modifie l'arrière-plan pour ce thème serait :

.pi-theme-name.pi-background {
   background-color:#334;
}
Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA  .