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 * LEGOExemple
{{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 }}