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

De Wiki des ADN
Aller à la navigation Aller à la recherche

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.

Couleur du titre et OOUI icons #000000 (noir)

a à associer avec la Couleur de fond du titre la gamme 90 de la Charte graphique officielle

Couleur du titre Par défaut et OOUI icons #FFFFFF (blanc)

a à associer avec la Couleur de fond du contenu la gamme 10-30 de la Charte graphique officielle

Utilisation et paramètres[modifier | modifier le wikicode]

Description du rôle de ce modèle à compléter. Insérer le code Templatedata dans cette section

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 = 
 | couleur-fond = 
 | couleur-bordure = 
 | couleur-barre-du-titre = 
 | couleur-titre = 
}}
  • autre syntaxe réduite =
{{Boîte colorée alternative
 | titre           = 
 | contenu         = 
 | lien            = 
 | couleur-fond    = 
 | couleur-bordure = 
 | couleur-barre-du-titre = 
 | couleur-titre   = 
}}
  • syntaxe complète =
{{Boîte colorée alternative
 | titre = 
 | contenu = 
 | lien = 
 | icone = 
 | couleur-fond = 
 | couleur-bordure = 
 | couleur-ombre = 
 | couleur-barre-du-titre = 
 | couleur-titre = 
 | arrondi-boite = 
 | arrondi-bordure = 
 | taille-bordure = 
 | marge-interieure = 
 | flex = 
}}
  1. Cliquez sur modifier. L'éditeur visuel s'ouvre.
  2. Insérer VisualEditor - Icon - Expand.svg
  3. VisualEditor - Icon - Template.svg Modèle
  4. Renseignez le modèle Boîte colorée alternative dans le champ de recherche.
  5. Renseignez les champs concernés.
  6. Enregistrez.

Autre solution, quand vous modifiez une page ou discutez avec Discussions structurées :

  1. Tapez {{
  2. Renseignez le modèle Boîte colorée alternative dans le champ de recherche.
  3. Renseignez les champs concernés.
  4. Enregistrez.

VisualEditor - Icon - Help.svg La plupart des modèles sont documentés directement dans l’éditeur visuel.
Aide générale de l’éditeur visuel à propos des modèles.

<templatedata> { "params": { "titre": { "label": "Titre", "description": "Titre de la boîte.", "example": "Sélection", "type": "string", "required": true }, "contenu": { "label": "Contenu", "description": "Contenu de la boîte.", "example": "Modèle:Portail:Afrique/Présentation", "type": "content", "required": true }, "lien": { "label": "Lien", "description": "Titre de la page Wikipédia pour en éditer le contenu (derrière le bouton modifier)", "example": "Portail:Afrique/Présentation", "type": "wiki-page-name", "suggested": true }, "icone": { "label": "Icône", "description": "Icône s'affichant avant le titre", "example": "Circle-icons-bar-chart.svg", "type": "wiki-file-name", "suggested": true }, "couleur-fond": { "label": "Couleur du fond", "description": "Code couleur hexadécimal de la couleur du fond", "example": "#DD3333", "type": "string", "default": "#FFFFFF", "suggested": true }, "couleur-bordure": { "label": "Couleur de la bordure", "description": "Code couleur hexadécimal de la couleur de la bordure", "example": "#DD3333", "type": "string", "default": "#FFFFFF", "suggested": true }, "couleur-ombre": { "label": "Couleur de l'ombre", "description": "Code couleur hexadécimal de la couleur de l'ombre", "example": "#DD3333", "type": "string", "default": "#999" }, "couleur-barre-du-titre": { "label": "Couleur de la barre sous le titre", "description": "Code couleur hexadécimal de la couleur de la barre sous le titre", "example": "#DD3333", "type": "string", "default": "#FFFFFF", "suggested": true }, "couleur-titre": { "label": "Couleur du titre", "description": "Code couleur hexadécimal du texte du titre.", "example": "#DD3333", "type": "string", "default": "#FFFFFF", "suggested": true }, "arrondi-boite": { "label": "arrondi de la boite", "description": "nombre de pixel d'arrondi de la boite", "example": "4px", "type": "unknown", "default": "4px" }, "arrondi-bordure": { "label": "arrondi de la bordure", "description": "nombre de pixel d'arrondi de la bordure", "example": "4px", "type": "unknown", "default": "4px" }, "taille-bordure": { "label": "épaisseur de la bordure", "description": "nombre de pixel d'épaisseur de la bordure", "example": "1px", "type": "unknown", "default": "2px" }, "marge-interieure": { "label": "marge à l'intérieur (padding)", "description": "taille de la marge a appliquer dans le cadre (padding)", "example": "20px", "type": "unknown", "default": "20px" }, "flex": { "label": "Style CSS", "description": "Style CSS supplémentaire pour le conteneur.", "example": "flex: 1 1 20em;", "type": "string" } }, "description": "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.", "paramOrder": [ "titre", "contenu", "lien", "icone", "couleur-fond", "couleur-bordure", "couleur-ombre", "couleur-barre-du-titre", "couleur-titre", "arrondi-boite", "arrondi-bordure", "taille-bordure", "marge-interieure", "flex" ], "format": "Modèle:\n\n" } </templatedata>

Exemples[modifier | modifier le wikicode]

  • {{Boîte colorée alternative |titre=Exemple n°1 (aspect par défaut) |contenu=Lorem ipsum |lien=lien modifier |couleur-fond= |couleur-bordure= |couleur-ombre= |couleur-barre-du-titre= }}

Exemple n°1 (aspect par défaut)

Lorem ipsum
  • {{Boîte colorée alternative |titre=Exemple n°2 |contenu=Lorem ipsum |lien=lien modifier |couleur-fond=#fef6e7 |couleur-bordure=#fef6e7 |couleur-ombre= |couleur-barre-du-titre=#fc3 }}

Exemple n°2

Lorem ipsum
  • {{Boîte colorée alternative |titre=Exemple n°3 |contenu=Lorem ipsum |lien=lien modifier |couleur-fond=#fee7e6 |couleur-bordure=#fee7e6 |couleur-ombre= |couleur-barre-du-titre=#d33 }}

Exemple n°3

Lorem ipsum
  • {{Boîte colorée alternative |titre=Exemple n°4 |contenu=Lorem ipsum |lien=lien modifier |couleur-fond=#eaf3ff |couleur-bordure=#eaf3ff |couleur-ombre= |couleur-barre-du-titre=#36c }}

Exemple n°4

Lorem ipsum

Voir aussi[modifier | modifier le wikicode]