Projet:Aide et accueil/Styles
Le projet aide et accueille travaille à la refonte des espaces d'aide ou les espaces concernés par des actions effectuées par de nouveaux contributeurs. A cet effet, un style particulier a été mis en place pour unifier la présentation des pages d'aide. Il est lié au projet Agora mis en place par la Fondation, concernant l'évolution de l'apparence de l'interface de Wikipédia.
Attention à n'utiliser ce type de structure et les styles associés sur des pages d'aide ou de l’Espace Wikipédia: uniquement ! Les utiliser sur une page utilisateur ou un portail brouillerait le message.
Construction des éléments
Structure d'une page
Les pages sont structurées par trois zones distinctes : l'en-tête, le corps et le pied de page.
En-tête
L'en-tête d'une page est constituée d'un ensemble de blocs construits en HTML + CSS pouvant prendre deux dispositions détaillées ci-dessous. Il est également possible de se passer de cet en-tête pour conserver une forme de type article.
Avec côté
<div class="aa-bloc-tete"><div class="aa-bloc-gauche aa-fond-gris">Un bloc principal de présentation à gauche, où se trouve l'information qui doit passer</div><div class="aa-bloc-droite aa-fond-blanc">Un bloc pour des contenus annexe (compléments, ouvertures, conseils) à droite à 30% de la largeur</div></div><div class="aa-bloc-dessous">Et bloc permettant d'ajouter des détails en dessous</div>Sans côté
<div class="aa-bloc-tete"><div class="aa-bloc-gauche aa-fond-gris">Un bloc principal de présentation sur tout le long, où se trouve l'information qui doit passer</div></div><div class="aa-bloc-dessous">Et bloc permettant d'ajouter des détails en dessous</div>Corps du texte
Le corps du texte d'une page d'aide est présenté de la même manière qu'un article.
Pied de page
Titres
L'utilisation de titres est recommandée pour structurer votre mise en page. Plusieurs niveaux de titre sont disponibles et plusieurs couleurs avec des sens particuliers le sont également.
Créer un titre
La syntaxe HTML <h2> ou <h3> est utilisable, mais peut parfois être handicapante, en particulier sur des pages ayant un menu. Dans ce cas, il faut utiliser la mise en page de titres alternatifs, prise en charge par le CSS. Ces styles alternatifs ne fonctionnent qu'avec des titres en gras (balise <strong>).
Mettre en forme le titre
Dans le bloc principal, le premier niveau de titre est en bleu (.aa-titre-bleu), les autres sans style particulier (pas d'autre bleu).
L'utilisation de la couleur est à considérer avec parcimonie. Si vous sentez par expérience qu'il est obligatoire de mettre un texte en rouge, c’est peut-être que votre mise en page ou les éléments d'accroche sont mal pensés. Les autres types de couleurs disponibles sont :
- Bleu
- Le bleu met en avant une action nécessaire à la progression ou une information fondamentale de premier niveau.
.aa-titre-bleu
- Rouge
- Le rouge indique un point extrêmement important, une interdiction ou une erreur.
.aa-titre-rouge
- Vert
- Le vert indique un point de validation ou un conseil.
.aa-titre-vert
Syntaxe des titres et rendus
Dans le cadre principal
Syntaxe avec des titres HTML
<div class="aa-bloc-tete"> <div class="aa-bloc-gauche aa-fond-gris"> <h2 class="aa-titre-bleu">Action sur la page, action principale</h2> <h3>Second niveau de titre (structuration)</h2> Texte présentant l'action. </div></div>Syntaxe sans titres HTML
<div class="aa-bloc-tete"> <div class="aa-bloc-gauche aa-fond-gris"> <strong class="aa-faux-h2 aa-titre-bleu">Action sur la page, action principale</strong> <strong class="aa-faux-h3">Second niveau de titre (structuration)</strong> Texte de présentation de l’action </div></div>Attention aux espacements entre les « titres » et le texte ! Pensez également à retirer les indentations (présentes pour la lisibilité) pour que ce code fonctionne avec le parseur.
Rendu
Action sur la page, action principale
Second niveau de titre (structuration)
Texte de présentation de l’action
Autres cadres
<div class="aa-bloc-tete"> <div class="aa-bloc-gauche aa-fond-gris"> Cadre principal </div> <div class="aa-bloc-droite aa-fond-blanc"> <strong class="aa-titre-bleu">Titre pour un avis</strong> Texte <strong class="aa-titre-rouge">Titre d'interdiction</strong> Texte <strong class="aa-titre-vert">Titre de validation</strong> Texte </div></div>Attention aux espacements entre les « titres » et le texte ! Pensez également à retirer les indentations (présentes pour la lisibilité) pour que ce code fonctionne avec le parseur.
Rendu
Titre pour un avis
Texte
Titre d'interdiction
Texte
Titre de validation
Texte
Boutons
.aa-bloc-tete {display:table; width: 100%;}
.aa-bloc-gauche,.aa-bloc-droite {display:table-cell;vertical-align:center;}.aa-bloc-droite {width:30%;}.aa-bloc-dessous {padding:5px 10px;}/* Couleur et apparence des éléments */.aa-fond-gris {background-color:#F6F6F6;padding:10px; font-size: 1.1em;}
.aa-fond-blanc {background-color:#FFF;padding:10px; }.aa-fond-avertissement {display:block;border-bottom:1px solid #C00;background-color:#FFF; padding: 10px;}.aa-titre-bleu {color:#3366BB;border:none;}
.aa-titre-rouge {color:#C00;border:none;}.aa-titre-vert {color:#008769;border:none;}.aa-faux-h2 {font-weight:normal;font-size:150%; }.aa-faux-h3 {font-weight:normal;font-size:132%; }
