Version 2 — Novembre 2010 — tetue
Nomenclature CSS actuelle de SPIP pour les messages de réponse des formulaires :
.reponse_formulaire {}
.reponse_formulaire_erreur {}
.erreur_message {}
.reponse_formulaire_ok {}etc.
Ces sélecteurs sont longs à écrire et je ne sais pas vous, mais moi je me trompe toujours (écrivant « formulaire_reponse » au lieu de « reponse_formulaire » et « .message_erreur » au lieu de « .erreur_message »).
Je propose de simplifier ainsi [*] :
.reponse {}
.reponse.info {}
.reponse.notice {}
.reponse.error {}
.reponse.success {}D’après les classes anglophones de BluePrint, framework CSS répandu, qui défini très simplement et joliment :
.error,
.notice,
.success { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }
.error { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
.notice { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.success { background: #E6EFC2; color: #264409; border-color: #C6D880; }
.error a { color: #8a1f11; }
.notice a { color: #514721; }
.success a { color: #264409; }En version française, ça donnerait (bof) :
.reponse {}
.reponse.info {}
.reponse.attention {}
.reponse.erreur {}
.reponse.succes {}Autre exemple (vu à cette page) :
.remarque
.remarque.attention
.remarque.information
.remarque.erreurPour mémo, voici les différentes classes croisées sur le Web :
| message (neutre) | avertissement | message d’erreur | confirmation de succès | etc. |
|---|---|---|---|---|
| .reponse_formulaire | .reponse_formulaire_erreur | .reponse_formulaire_ok | .erreur .obligatoire .erreur_message .explication | |
| .notice | .error | .success | ||
| .information | .attention | .erreur | ||
| .information | .error | .required .note | ||
| .info | .warning | .error | .success | |