Ce modèle permet de définir des infoboîtes (infoboxes). C'est un méta-modèle, c'est à dire qu'il est destiné à être utilisé par d'autres modèles et non pas directement dans un article.
Son fonctionnement est inspiré du modèle d'infoboîte de wikipédia.
Utilisation
Il suffit de définir les différentes lignes souhaitées pour l'infoboîte, sachant que celle-ci se décompose de la façon suivante (chaque partie étant optionnelle) :
- 3 lignes au-dessus
- 1 bloc répétable trois fois :
- 1 ligne d'image
- 1 bloc en-tête
- 10 lignes de détail
- 2 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 :
- Une en-tête seule
| 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'infoboîte
- icone
- le nom du fichier image à utiliser comme icône (un large choix est disponible ici)
Paramètres optionnels
- couleur_fond
- couleur à utiliser pour le fond de l'infoboîte ; par défaut #F2F2F2 (gris)
- couleur_texte
- couleur du texte dans l'infoboîte ; par défaut #000 (noir)
- couleur_entete
- couleur du fond des en-têtes ; par défaut #6ED06E (rouge)
- largeur_entete
- largeur des en-têtes (en %), quand l'en-tête et le détail sont sur la même ligne ; par défaut 40
- ligne_dessus1, ligne_dessus2, ligne_dessus3
- les lignes au-dessus
- image(n)
- le nom du fichier image à afficher
- taille_image
- largeur de l'image en pixels (si l'infoboîte comprend plusieurs images, cette valeur divisée par 2), par défaut 210 - ATTENTION : il est recommandé de ne pas dépasser 250 sinon l'apparence de l'infoboite pourrait être affectée
- entete(n)_1, entete(n)_2
- les colonnes de la première ligne du bloc en-tête
- detail_entete(n)_1, detail_entete(n)_2
- les colonnes de la deuxième ligne du bloc en-tête
- chapeau_ligne(n)_(m)
- une ligne d'en-tête
- entete_ligne(n)_(m)
- l'en-tête à gauche de la ligne
- ligne(n)_(m)
- le détail de la ligne
- ligne_dessous1, ligne_dessous2
- les lignes au-dessous
Note : n désigne un bloc et est compris entre 1 et 3, m est compris entre 1 et 10
Champs optionnels
Une ligne sans détail renseigné n'est pas affichée. Cela facilite la création de lignes d'infoboîte 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_ligne3_2=Trouvé
|ligne3_2={{{trouvé|}}}
Ainsi, si un article ne définit pas le paramètre trouvé dans son infoboîte, 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_ligne2_4=Poids
|ligne2_4={{#if:{{{poids|}}}|{{{poids}}} kg}}
Pour plus d'information sur #if, voir ici (en anglais).
CSS
- Chaque conteneur d'infoboîte a la classe infoboite
- 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 maximum de styles ont été intégrés au CSS du wiki afin de ne pas trop alourdir le code inséré dans la page.
.infoboite {
float: right;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border:1px solid #D9D9D9;
margin: 1em 0 1em 1em;
width: 250px;
z-index: 150;
}
.infoboite .barre_haut {
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
text-align: center;
line-height: 23px;
height: 23px;
font-size: 93%;
}
.infoboite .contenu { padding: 5px; text-align: center; }
.infoboite table { border-collapse: collapse; font-size: 77%; width: 100%; background-color: transparent; }
.infoboite table a, .infoboite table a:visited { text-decoration: underline; color: inherit; }
.infoboite td, .infoboite th { vertical-align: top; padding: 0; }
.infoboite th { text-align: left; font-weight: bold; }
.infoboite td { text-align: right; }
.infoboite table.bloc { font-size: 100%; }
.infoboite table.bloc th, .infoboite table.bloc td { text-align: center; width: 50%; }
.infoboite tr.un th, .infoboite tr.un td { text-align: center; width: 100%; }
.infoboite tr.deux { border-top: 1px solid #B5B7CF; border-bottom: 1px solid #B5B7CF; }
.infoboite tr.deux th { text-align: left; padding-left: 2px; }
.infoboite tr.deux td { text-align: right; }
Exemple
{{Infoboite
|titre=Titre
|icone=Configure.png
|ligne_dessus1=ligne dessus
|ligne_dessus2=ligne dessus
|ligne_dessus3=ligne dessus
|image1=ABC.jpg
|entete1_1=en-tête
|detail_entete1_1=détail
|entete1_2=en-tête
|detail_entete1_2=détail
|chapeau_ligne1_1=en-tête
|ligne1_2=détail
|entete_ligne1_3=en-tête
|ligne1_3=détail
|entete2_1=en-tête
|detail_entete2_1=détail
|entete2_2=en-tête
|detail_entete2_2=détail
|entete_ligne2_1=en-tête
|ligne2_1=détail
|ligne_dessous1=ligne dessous
|ligne_dessous2=ligne dessous
}}
Syntaxe complète
{{Infoboite
|titre=
|icone=
|couleur_fond=
|couleur_texte=
|couleur_entete=
|largeur_entete=
|ligne_dessus1=
|ligne_dessus2=
|ligne_dessus3=
|taille_image=
|image1=
|entete1_1=
|detail_entete1_1=
|entete1_2=
|detail_entete1_2=
|chapeau_ligne1_1=
|entete_ligne1_1=
|ligne1_1=
|chapeau_ligne1_2=
|entete_ligne1_2=
|ligne1_2=
|chapeau_ligne1_3=
|entete_ligne1_3=
|ligne1_3=
|chapeau_ligne1_4=
|entete_ligne1_4=
|ligne1_4=
|chapeau_ligne1_5=
|entete_ligne1_5=
|ligne1_5=
|chapeau_ligne1_6=
|entete_ligne1_6=
|ligne1_6=
|chapeau_ligne1_7=
|entete_ligne1_7=
|ligne1_7=
|chapeau_ligne1_8=
|entete_ligne1_8=
|ligne1_8=
|chapeau_ligne1_9=
|entete_ligne1_9=
|ligne1_9=
|chapeau_ligne1_10=
|entete_ligne1_10=
|ligne1_10=
|image2=
|entete2_1=
|detail_entete2_1=
|entete2_2=
|detail_entete2_2=
|chapeau_ligne2_1=
|entete_ligne2_1=
|ligne2_1=
|chapeau_ligne2_2=
|entete_ligne2_2=
|ligne2_2=
|chapeau_ligne2_3=
|entete_ligne2_3=
|ligne2_3=
|chapeau_ligne2_4=
|entete_ligne2_4=
|ligne2_4=
|chapeau_ligne2_5=
|entete_ligne2_5=
|ligne2_5=
|chapeau_ligne2_6=
|entete_ligne2_6=
|ligne2_6=
|chapeau_ligne2_7=
|entete_ligne2_7=
|ligne2_7=
|chapeau_ligne2_8=
|entete_ligne2_8=
|ligne2_8=
|chapeau_ligne2_9=
|entete_ligne2_9=
|ligne2_9=
|chapeau_ligne2_10=
|entete_ligne2_10=
|ligne2_10=
|image3=
|entete3_1=
|detail_entete3_1=
|entete3_2=
|detail_entete3_2=
|chapeau_ligne3_1=
|entete_ligne3_1=
|ligne3_1=
|chapeau_ligne3_2=
|entete_ligne3_2=
|ligne3_2=
|chapeau_ligne3_3=
|entete_ligne3_3=
|ligne3_3=
|chapeau_ligne3_4=
|entete_ligne3_4=
|ligne3_4=
|chapeau_ligne3_5=
|entete_ligne3_5=
|ligne3_5=
|chapeau_ligne3_6=
|entete_ligne3_6=
|ligne3_6=
|chapeau_ligne3_7=
|entete_ligne3_7=
|ligne3_7=
|chapeau_ligne3_8=
|entete_ligne3_8=
|ligne3_8=
|chapeau_ligne3_9=
|entete_ligne3_9=
|ligne3_9=
|chapeau_ligne3_10=
|entete_ligne3_10=
|ligne3_10=
|ligne_dessous1=
|ligne_dessous2=
}}