Documentation de modèle (pour le modèle ci-dessus, parfois caché ou invisible)

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=
}}

Visitez Modèle:Infoboite/doc pour modifier ce texte ! (Comment ça fonctionne ?)
Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-NC-ND.