Modèle:Boîte colorée

{{{titre}}}

{{{contenu}}}

Documentation[voir] [modifier] [historique] [purger]

Le modèle boîte colorée est conçu pour les pages portail et projet. Il s'inspire de la page d'accueil de Wikidata.
Il est actuellement utilisé sur le Projet Charte graphique ou sur le portail économie Portail Économie. Il peut aussi être utilisé sur des pages utilisateurs (par exemple Utilisateur:PAC2).

Des icônes à utiliser peuvent être trouvées dans Commons:OOUI icons et les couleurs doivent respecter les contraintes d'accessibilité, c'est-à-dire un contraste d'au moins 4,5 entre la couleur du texte et la couleur du fond.

Utilisation et paramètres

Ce modèle est à utiliser en association avec une feuille de styles TemplateStyles qui fournit les styles CSS permettant des couleurs différentes entre mode sombre et mode clair.

Les exemples CSS suivants indiquent les personnalisations les plus courantes, appliquées au cas d'un portail XXX. Le nom du paramètre classe utilisé pour l'exemple est xxx-portail, pour éviter tout problème il faut utiliser un nom de classe différent pour chaque utilisation du modèle. Un nom de classe correct est une suite de lettre et de tirets n'incluant pas d'espaces.

Pour modifier la couleur de fond de la barre de titre (anciennement le paramètre titre-couleur-fond) :

.xxx-portail .boite-coloree-titre-fond {
	background-color: #36C;
}

Le couleur du titre doit impérativement être fixée si la couleur est fixée (anciennement le paramètre titre-couleur) :

.xxx-portail .boite-coloree-titre {
	color: #202122;
}

Pour modifier la couleur de fond du contenu (anciennement le paramètre contenu-couleur-fond) :

.boite-coloree.xxx-portail  {
	background-color: #f8f9fa;
}

Pour que la boite continue jusqu'en bas il faut utiliser le style « flex: 1 1 auto; » appliqué à la classe xxx-portail.

Syntaxe

{{Boîte colorée
 | classe = 
 | titre = 
 | icone = 
 | classe icone = 
 | contenu = 
 | lien = 
}}

TemplateData

Le modèle boîte colorée est conçu pour les pages portail et projet. Il s'inspire de la page d'accueil de Wikidata.

Paramètres du modèle[Modifier les données du modèle]
La mise en forme multiligne est préférée pour ce modèle.
Paramètre		Description	Type	État
Titre	`titre`	Titre de la boîte. Exemple Sélection	Chaîne	obligatoire
Contenu	`contenu`	Contenu de la boîte. Exemple {{clr}}{{Portail:Sciences humaines/Lumière sur...}}	Contenu	obligatoire
Lien	`lien`	Titre de la page Wikipédia pour éditer le contenu. Exemple Portail:Économie/Actualités	Nom de page	suggéré
Classe CSS	`classe`	Classes utilisées pour la stylisation du contenu par une feuille de styles TemplateStyles. Pour utiliser plusieurs classes, séparer d'une espace.	Chaîne	suggéré
Icône	`icone`	Nom d'un fichier d'icône. Exemple Circle-icons-chat.svg	Fichier	facultatif
Classe de l'icone	`classe icone`	Classe CSS à appliquer à l'icône, en particulier skin-invert-image pour une inversion des couleurs en mode sombre. Valeurs suggérées `skin-invert-image` `notpageimage`	Chaîne	facultatif
Texte du bouton modifier	`titre-lien`	aucune description Par défaut modifier	Ligne de texte	facultatif
Style	`style`	Style CSS supplémentaire pour le conteneur.	Chaîne	facultatif
Couleur du titre	`titre-couleur` `couleurtitre` `couleur-titre`	Code couleur hexadécimal du texte du titre. Par défaut #FFFFFF Exemple #339966	Chaîne	obsolète
Couleur de fond du titre	`titre-couleur-fond` `couleurfond` `couleur-fond`	Code couleur hexadécimal du fond de la barre de titre. Par défaut #339966 Exemple #447FF5	Chaîne	obsolète
Couleur du lien	`lien-couleur`	Code couleur hexadécimal du lien « Modifier ». Par défaut #999999 Exemple #339966	Chaîne	obsolète
Couleur de fond du contenu	`contenu-couleur-fond`	Code couleur hexadécimal du fond du contenu de la boîte. Par défaut #F8F9FA Exemple #339966	Chaîne	obsolète
Flex	`flex`	Intégration dans la grille de la colonne/ligne dynamique. Le premier chiffre indique la proportion à laquelle la boîte peut s'étendre, le second à laquelle elle peut se réduire, le troisième la largeur en px/em minimale de la boîte Par défaut 0 1 auto	Chaîne	obsolète
Centrer le titre	`centrer`	Si renseigné permet de centrer le titre.	Inconnu	obsolète

Exemple

Les styles CSS pour cet exemple sont présents dans la page Modèle:Boîte colorée/Documentation/styles.css

<templatestyles src="Boîte colorée/Documentation/styles.css"/>
{{Boîte colorée
 | titre = Sélection
 | icone = Circle-icons-star.svg
 | lien = Portail:Économie/Sélection
 | contenu = Contenu
 | classe = boite-coloree-exemple
}}

Sélection

modifier

Contenu

Voir aussi

La documentation de ce modèle est générée par le modèle {{Documentation}}.
Elle est incluse depuis sa sous-page de documentation. Veuillez placer les catégories sur cette page-là.
Les éditeurs peuvent travailler dans le bac à sable (modifier) et la page de test (modifier).
Voir les statistiques d'utilisation du modèle sur l'outil wstat.