Modèle:Boîte colorée alternative/doc

Utilisation et paramètres

Le modèle boîte colorée alternative est conçu pour les pages portail et projet. Il s'inspire de la page d'accueil de Wikipédia.
Il est proposé sur le Projet Charte graphique et utilisé sur le projet Arts. Il peut aussi être utilisé sur des pages utilisateurs.

Des icônes à utiliser peuvent être trouvées dans Commons:OOUI icons et les couleurs utilisées 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.

Avec le wikicode	Avec l’éditeur visuel
Cliquez sur « Modifier le code » et insérez la syntaxe suivante syntaxe réduite = {{Boîte colorée alternative | titre = | contenu = | lien = | classe = }} syntaxe complète = {{Boîte colorée alternative | titre = | contenu = | lien = | classe = | icone = | classe icone = }} D'anciens paramètres de style et de couleurs sont à remplacer par un usage du paramètre classe.	Modèle:Insérer un modèle

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 Wikipédia.

Paramètres du modèle

Ce modèle possède une mise en forme personnalisée.

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 {{Portail:Afrique/Présentation}}	Contenu	obligatoire
Lien	lien editonly	Titre de la page Wikipédia pour en éditer le contenu (derrière le bouton modifier) Exemple Portail:Afrique/Présentation	Nom de page	suggéré
Classes CSS	classe	Classes CSS personnalisées à gérer par des feuilles de style TemplateStyle pour la gestion des couleurs. Exemple portailXXX-style1 portailXXX-style2	Chaîne	suggéré
Icône	icone	Icône s'affichant avant le titre Exemple Circle-icons-bar-chart.svg	Fichier	suggéré
Classe de l'icône	classe icone	Éventuelle classe CSS pour l'icône, en particulier skin-invert pour que les couleurs de l'image s'inversent en mode sombre. Valeurs suggérées skin-invert	Chaîne	facultatif
arrondi de la boite	arrondi-boite	nombre de pixel d'arrondi de la boite Par défaut 4px Exemple 4px	Inconnu	facultatif
arrondi de la bordure	arrondi-bordure	nombre de pixel d'arrondi de la bordure Par défaut 4px Exemple 4px	Inconnu	facultatif
épaisseur de la bordure	taille-bordure	nombre de pixel d'épaisseur de la bordure Par défaut 2px Exemple 1px	Inconnu	facultatif
marge à l'intérieur (padding)	marge-interieure	taille de la marge a appliquer dans le cadre (padding) Par défaut 20px Exemple 20px	Inconnu	facultatif
Style CSS	style	Style CSS supplémentaire pour le conteneur.	Chaîne	facultatif
Taille adaptative (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. Exemple 1 1 20em	Contenu	facultatif
Couleur du titre	couleur-titre	Code couleur hexadécimal du texte du titre. Exemple #DD3333	Chaîne	obsolète
Couleur de la bordure	couleur-bordure	Code couleur hexadécimal de la couleur de la bordure Exemple #DD3333	Chaîne	obsolète
Couleur de l'ombre	couleur-ombre	Code couleur hexadécimal de la couleur de l'ombre Exemple #DD3333	Chaîne	obsolète
Couleur de la barre sous le titre	couleur-barre-du-titre	Code couleur hexadécimal de la couleur de la barre sous le titre Exemple #DD3333	Chaîne	obsolète
Couleur du fond	couleur-fond	Code couleur hexadécimal de la couleur du fond Exemple #DD3333	Chaîne	obsolète
Couleur du lien	couleur-lien	Code couleur hexadécimal de la couleur du lien	Chaîne	obsolète

Exemples

Les couleurs sont définies en utilisant une feuille de style TemplateStyles, c'est-à-dire une sous-page se terminant par /styles.css et codée en langage CSS. Pour les exemples qui suivent, les classes ont été définies dans la feuille de style Modèle:Boîte colorée alternative/doc/styles.css.

Exemple n°1 : Apparence par défaut

{{Boîte colorée alternative
| titre   = Exemple n°1 (aspect par défaut)
| contenu = Lorem ipsum
| lien    = lien modifier
}}

Exemple n°1 (aspect par défaut)

Lorem ipsum

Exemple n°2 : Utilisation de couleurs de fond et de bordure

{{Boîte colorée alternative
| titre   = Exemple n°2
| contenu = Lorem ipsum
| lien    = lien modifier
| classe  = boite-coloree-alternative-exemple-2
}}

/* Exemple 2 */
.boite-coloree-alternative.boite-coloree-alternative-exemple-2 {
	background-color: #fef6e7;
	border-color: #fef6e7;
}

.boite-coloree-alternative.boite-coloree-alternative-exemple-2 > h2 {
	border-bottom-color: #fc3;
}

/* Mode sombre (exemple 2) */
@media screen {
	html.skin-theme-clientpref-night .boite-coloree-alternative.boite-coloree-alternative-exemple-2 {
		background-color: #2a1b00;
		border-color: #2a1b00;
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .boite-coloree-alternative.boite-coloree-alternative-exemple-2 {
		background-color: #2a1b00;
		border-color: #2a1b00;
	}
}

Exemple n°2

Lorem ipsum

Exemple n°3 : Utilisation de couleur d'ombre

{{Boîte colorée alternative
|titre=Exemple n°3
|contenu=Lorem ipsum
|lien=lien modifier
|classe=boite-coloree-alternative-exemple-3
}}

/* Exemple 3 */
.boite-coloree-alternative.boite-coloree-alternative-exemple-3 {
	background-color: #fee7e6;
	border-color: #fee7e6;
	box-shadow: 0 0 0.3rem #fee7e6;
}

.boite-coloree-alternative.boite-coloree-alternative-exemple-3 > h2 {
	border-bottom-color: #d33;
}

/* Mode sombre (exemple 3) */
@media screen {
	html.skin-theme-clientpref-night .boite-coloree-alternative.boite-coloree-alternative-exemple-3 {
		background-color: #202122;
		border-color: #d33;
		box-shadow: 0 0 0.3rem #d33;
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .boite-coloree-alternative.boite-coloree-alternative-exemple-3 {
		background-color: #202122;
		border-color: #d33;
		box-shadow: 0 0 0.3rem #d33;
	}
}

Exemple n°3

Lorem ipsum

Exemple n°4 : Utilisation d'une icône et de couleur de lien

{{Boîte colorée alternative
|titre=Exemple n°4
|contenu=Lorem ipsum
|lien=lien modifier
|classe=boite-coloree-alternative-exemple-4
|icone=OOjs UI icon advanced.svg
|classe icone=skin-invert
}}

/* Exemple 4 */
.boite-coloree-alternative.boite-coloree-alternative-exemple-4 {
	background-color: #eaf3ff;
	border-color: #eaf3ff;
}

.boite-coloree-alternative.boite-coloree-alternative-exemple-4 > h2 {
	border-bottom-color: #36c;
}

.boite-coloree-alternative.boite-coloree-alternative-exemple-4 .boite-coloree-alternative-lienmodifier > a {
	color: #340044;
}

/* Mode sombre (exemple 2) */
@media screen {
	html.skin-theme-clientpref-night .boite-coloree-alternative.boite-coloree-alternative-exemple-4 {
		background-color: #00224e;
		border-color: #00224e;
	}
	html.skin-theme-clientpref-night .boite-coloree-alternative.boite-coloree-alternative-exemple-4 .boite-coloree-alternative-lienmodifier > a {
		color: #f2c8ff;
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .boite-coloree-alternative.boite-coloree-alternative-exemple-4 {
		background-color: #00224e;
		border-color: #00224e;
	}
	html.skin-theme-clientpref-os .boite-coloree-alternative.boite-coloree-alternative-exemple-4 .boite-coloree-alternative-lienmodifier > a {
		color: #f2c8ff;
	}
}

Exemple n°4

Lorem ipsum

Voir aussi

• {{Boîte colorée}}
• {{Boîte colorée alternative}}
• {{Boîte colorée alternative wikidata}}
• {{Boîte alternative}}
• {{Barre colorée}}
• {{Accueil/Cadre}}