French
DeutschModèle:Boîte colorée alternative — Wikipédia
Ce modèle utilise la feuille de style Boîte colorée alternative/styles.css en CSS. Voir l'aide de l'extension TemplateStyles si vous voulez en savoir plus.
Utilisation et paramètres
[modifier le code]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 portail Afrique. 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
{{Boîte colorée alternative | titre = | contenu = | lien = | classe = }}
{{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 |
Autre solution, quand vous modifiez une page ou discutez avec Discussions structurées :
La plupart des modèles sont documentés directement dans l’éditeur visuel.  |
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ètre | Description | Type | État | |
|---|---|---|---|---|
| Titre | titre | Titre de la boîte.
| Chaîne | obligatoire |
| Contenu | contenu | Contenu de la boîte.
| Contenu | obligatoire |
| Lien | lien editonly | Titre de la page Wikipédia pour en éditer le contenu (derrière le bouton modifier)
| 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.
| Chaîne | suggéré |
| Icône | icone | Icône s'affichant avant le titre
| 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.
| Chaîne | facultatif |
| arrondi de la boite | arrondi-boite | nombre de pixel d'arrondi de la boite
| Inconnu | facultatif |
| arrondi de la bordure | arrondi-bordure | nombre de pixel d'arrondi de la bordure
| Inconnu | facultatif |
| épaisseur de la bordure | taille-bordure | nombre de pixel d'épaisseur de la bordure
| Inconnu | facultatif |
| marge à l'intérieur (padding) | marge-interieure | taille de la marge a appliquer dans le cadre (padding)
| Inconnu | facultatif |
| Style CSS | style | Style CSS supplémentaire pour le conteneur. | Chaîne | facultatif |
| Taille adaptative (flex) | flex | aucune description
| Contenu | facultatif |
| Couleur du titre | couleur-titre | Code couleur hexadécimal du texte du titre.
| Chaîne | obsolète |
| Couleur de la bordure | couleur-bordure | Code couleur hexadécimal de la couleur de la bordure
| Chaîne | obsolète |
| Couleur de l'ombre | couleur-ombre | Code couleur hexadécimal de la couleur de l'ombre
| 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
| Chaîne | obsolète |
| Couleur du fond | couleur-fond | Code couleur hexadécimal de la couleur du fond
| Chaîne | obsolète |
| Couleur du lien | couleur-lien | Code couleur hexadécimal de la couleur du lien | Chaîne | obsolète |
Exemples
[modifier le code]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/Documentation/styles.css.
Exemple n°1 : Apparence par défaut
[modifier le code]{{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)
Exemple n°2 : Utilisation de couleurs de fond et de bordure
[modifier le code]<templatestyles src="Boîte colorée alternative/Documentation/styles.css"/> {{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
Exemple n°3 : Utilisation de couleur d'ombre
[modifier le code]<templatestyles src="Boîte colorée alternative/Documentation/styles.css"/> {{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
Exemple n°4 : Utilisation d'une icône et de couleur de lien
[modifier le code]<templatestyles src="Boîte colorée alternative/Documentation/styles.css"/> {{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; } } 
Voir aussi
[modifier le code]- {{Boîte colorée}}
- {{Boîte colorée alternative}}
- {{Boîte colorée alternative wikidata}}
- {{Boîte alternative}}
- {{Barre colorée}}
- {{Accueil/Cadre}}
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 (créer) et la page de test (modifier).
Voir les statistiques d'utilisation du modèle sur l'outil wstat.