Wiki Les Simpson
S'inscrire
Advertisement

Ce modèle permet de définir des infoboxes. C'est un méta-modèle : il n'est pas destiné à être dupliqué ou modifié directement mais à être utilisé par d'autres modèles et non pas directement dans un article. Il a été conçu et est maintenu par Wyz.

Pour un modèle plus simple, voir w:c:communaute:Modèle:InfoboxSimple.

Utilisation

Ce modèle permet de décrire les différentes lignes souhaitées pour une infobox donnée, sachant que celle-ci se décompose de la façon suivante (chaque partie étant optionnelle) :

  • 3 lignes au-dessus
  • 1 bloc
    • 1 ligne d'image
    • 1 bloc en-tête
    • 16 lignes de détail
  • 3 lignes en dessous

Le bloc en-tête est constitué de 2 colonnes et 2 lignes

en-tête en-tête
detail detail

Une ligne de détail peut être :

  • Un en-tête seul
en-tête
  • Un détail seul
détail
  • Les deux
en-tête détail

Paramètres

titre
le nom qui apparaît en haut de l'infobox (obligatoire)
icone
le nom du fichier image à utiliser comme icône
couleur_texte
couleur du texte dans l'infobox — par défaut currentColor (noir pour thème clair / blanc pour thème foncé)
couleur_entete
couleur du fond des en-têtes — par défaut #3366CC (bleu foncé)
couleur_texte_entete
couleur du texte des en-tête et du titre - par défaut currentColor (noir pour thème clair / blanc pour thème foncé)
ligne_dessus1, ligne_dessus2, ligne_dessus3
les lignes au-dessus
image
le nom du fichier image à afficher
entete1, entete_2
les colonnes de la première ligne du bloc en-tête
detail_entete1, detail_entete2
les colonnes de la deuxième ligne du bloc en-tête
chapeau_lignem
une ligne d'en-tête
entete_lignem
l'en-tête à gauche de la ligne
lignem
le détail de la ligne
ligne_dessous1, ligne_dessous2
les lignes au-dessous

Note : m est compris entre 1 et 16

Champs optionnels

Une ligne sans détail renseigné n'est pas affichée. Cela facilite la création de lignes d'infobox optionnelles. Pour marquer une ligne comme étant optionnelle, utilisez un paramètre qui a par défaut une chaîne vide, de la façon suivante :

|entete_ligne2=Trouvé
|ligne2={{{trouvé|}}}

Ainsi, si un article ne définit pas le paramètre trouvé dans son infobox, la ligne ne sera pas affichée.

Pour des champs plus complexes avec du contenu pré-formaté qui doit être toujours visible, même si le paramètre n'est pas défini, vous pouvez tout englober dans une déclaration #if pour que le tout ne soit pas visible quand le paramètre n'est pas utilisé. Dans l'exemple suivant, la déclaration #if se lit de la façon suivante : « #if:le paramètre poids a été renseigné | alors l'afficher suivi de "kg" » :

|entete_ligne4=Poids
|ligne4={{#if:{{{poids|}}}|{{{poids}}} kg}}

Pour plus d'information sur #if, voir ici (en anglais).

CSS

  • Chaque conteneur d'infobox a la classe infobox
  • La barre de titre a la classe barre_haut
  • Le bloc d'en-tête a la classe bloc
  • Chaque ligne de détail (hors lignes du dessus, lignes d'image, lignes du bloc en-tête et lignes du dessous) a la classe deux ou un, en fonction du nombre d'éléments qu'elle contient

Le style a été intégré au CSS du wiki.

.portable-infobox .pi-item-spacing {
  padding:0;
}
.portable-infobox h3 {
  border-bottom-style: none;
}
.portable-infobox .pi-data-value > *,
.portable-infobox .pi-data-value li,
.portable-infobox nav a {
  text-decoration:underline;
  color: currentColor;
}
.pi-border-color {
    border-color: #d9d9d9;
}
.portable-infobox {
  width: 250px;
  background: #F2F2F2;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border: 1px solid #D9D9D9;
  margin: 1em 0 1em 1em;
  z-index: 150;
  padding:0;
}
.portable-infobox .pi-title {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  text-align: center;
  font-weight: bold;
  background: #3366CC; /* Couleur par défaut à modifier */
}
.portable-infobox .pi-title, .portable-infobox .pi-header {
  font-size: 85%;
  color:currentColor;
}
.portable-infobox .pi-image-thumbnail {
  width:250px;
  height:auto;
  padding-bottom: 5px;
}
.portable-infobox .pi-horizontal-group .pi-data-label {
  font-size: 12px;
  border-left:none;
}
.portable-infobox .pi-horizontal-group .pi-data-value {
  border-left:none;
  text-align:center !important;
}
.portable-infobox .pi-header {
  text-align:center;
  background: #3366CC; /* Couleur par défaut à modifier */
  border-bottom: 1px solid #D9D9D9;
}
.portable-infobox .pi-data {
  justify-content: space-between;
  border-bottom:1px solid #D9D9D9;
}
.portable-infobox .pi-data:not(.pi-smart-data):first-of-type {
  border-bottom: 1px solid #D9D9D9;
}
.portable-infobox .pi-smart-data-value {
  border:none;
  padding-bottom: 0;
}
.portable-infobox .pi-group .pi-data-value {
  text-align:right;
}
.portable-infobox .pi-data-label {
  font-size: 11px;
  background: #3366CC; /* Couleur par défaut à modifier */
  padding: 2px;
  hyphens:none;
  -ms-flex-preferred-size: 120px;
  -webkit-flex-basis: 120px;
  -moz-flex-basis: 120px;
  flex-basis: 120px;
}
.portable-infobox .pi-data-value {
  text-align:right;
  font-size: 11px;
  padding: 2px;
  hyphens:none;
}
.portable-infobox .pi-navigation {
  background: #F2F2F2;
  text-align:center;
  font-weight:normal;
  font-size:11px;
}
.pi-smart-group .pi-smart-data-label,.pi-smart-group .pi-smart-data-value {
  text-align: center !important;
}

Les couleurs par défaut (fond de l'infobox, texte de l'en-tête, fond de l'en-tête, couleur du texte) peuvent être modifiée directement dans le code de l'infobox.

Wikis où ce modèle est utilisé

* Once Upon A Time * Hunter x Hunter * Narnia * Assassin's Creed * Le Voleur de magie * Sorcellerie-Info * Desperate Housewives * Call of Duty * Uncharted * Golden Sun * Pottermore * Dragons of Atlantis * Professeur Layton * The Last of Us * Le 10ème Royaume * LEGO

Exemple

{{Infobox
|titre=Titre
|icone=Movie reel.png 
|ligne_dessus1=ligne dessus
|ligne_dessus2=ligne dessus
|ligne_dessus3=ligne dessus
|image=Example.jpg
|entete1=en-tête
|detail_entete1=détail
|entete2=en-tête
|detail_entete2=détail
|chapeau_ligne1=en-tête
|ligne2=détail
|ligne3=détail
|entete_ligne4=en-tête
|ligne4=détail
|ligne_dessous1=ligne dessous
|ligne_dessous2=ligne dessous
}}
Advertisement