Cette page présente quelques informations utiles à la conception des formulaires avec le w.c.s installé à l'AuF.

= Classes supplémentaires =

Techniquement elles sont rendues disponibles via [[https://formulaires.auf.org/themes/auf/wcs.css|une feuille de style AuF]].

Voici un tableau des classes disponibles :

|| '''Classe CSS''' || '''Fonction / Utilité''' ||
||<(> `left`        || Positionne le champ contre le bord gauche. ||
||<(> `right`       || Positionne le champ contre le bord droit. ||
||<(> `width20`     || Donne au champ une largeur de 20%. ||
||<(> `width24`     || Donne au champ une largeur de 24%. ||
||<(> `width25`     || Donne au champ une largeur de 25%. ||
||<(> `width29`     || Donne au champ une largeur de 29%. ||
||<(> `width30`     || Donne au champ une largeur de 30%. ||
||<(> `width34`     || Donne au champ une largeur de 34%. ||
||<(> `width39`     || Donne au champ une largeur de 39%. ||
||<(> `width45`     || Donne au champ une largeur de 45%. ||
||<(> `width49`     || Donne au champ une largeur de 49%. ||
||<(> `width50`     || Donne au champ une largeur de 50%. ||
||<(> `width60`     || Donne au champ une largeur de 60%. ||
||<(> `width65`     || Donne au champ une largeur de 65%. ||
||<(> `width70`     || Donne au champ une largeur de 70%. ||
||<(> `width75`     || Donne au champ une largeur de 75%. ||
||<(> `width80`     || Donne au champ une largeur de 80%. ||
||<(> `width99`     || Donne au champ une largeur de 99%. ||
||<(> `width100`    || Donne au champ une largeur de 100%. ||
||<(> `widthauto`   || Donne au champ une largeur automatique, qui s'adaptera en fonction de l'espace disponible. ||
||<(> `to_left`     || Positionne le champ contre le bord gauche, avec une largeur de 45%. ||
||<(> `to_right`    || Positionne le champ 50% du bord gauche, avec une largeur de 45%. ||
||<(> `to_right2`   || Positionne le champ 25% du bord gauche, avec une largeur de 20%. ||
||<(> `to_right60`  || Positionne le champ 25% du bord gauche, avec une largeur de 60%. ||
||<(> `to_right70`  || Positionne le champ 25% du bord gauche, avec une largeur de 70%. ||
||<(> `leftmargin2` || Donne à la marge de gauche une largeur de 2%. ||
||<(> `border`      || Ajoute une bordure en pointillés de couleur rouge tout autour du champ. ||
||<(> `readonly`    || Rend le champ visiblement non modifiable. ||
||<(> `long-radio`  || Place les choix sous leur titre au lieu de sur la même ligne. ||


Notes :
 * on peut combiner plusieurs classes en les mettant à la suite l'une de l'autre, par exemple : `left width49 border`
 * les champs avec une classe de type `right` doivent être placés, dans l'ordre des champs d'un formulaire, avant les champs qui seront à leur gauche (ne pas [[ProgFou|me]] demander pourquoi… ça s'explique mais bon…)
 * on peut créer d'autres classes au besoin, pour ce faire contacter l'administrateur du site w.c.s concerné

Historique :
 * 2013-06-11 : reprise de la classe `long-radio` directement dans `wcs.css` (merci EricMcSween ?)
 . {{{
div.RadiobuttonsWidget.long-radio div.content,
div.RadiobuttonsWidget.long-radio div.title { display: block; }
}}}
 * 2013-06-11 : adaptation de la hauteur du titre `#top h1`, autrefois en `height: 100px` pour passer en `min-height: 100px` (JC)