Template:User:Wyz/Infobox/doc

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

Une ligne de détail peut être :
 * Un en-tête seul
 * Un détail seul
 * Les deux

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=

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=

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