SITools2

h1. Personnaliser un composant de formulaire

*Pré-requis*: connaitre les notions suivantes pour les CSS : Identifiant, classe, héritage et pseudo-class en CSS

*Outil* : Firebug

Exemples de scénarios :

[[Personnaliser_un_composant_de_formulaire#css_class|Appliquer une classe CSS]]

[[Personnaliser_un_composant_de_formulaire#style|Appliquer un style différent au sein d'un même composant de formulaire]]

[[Personnaliser_un_composant_de_formulaire#common_back|Ajouter un fond commun à deux composants]]

[[Personnaliser_un_composant_de_formulaire#min_max|Ajouter un min max pour un composant between]]

[[Personnaliser_un_composant_de_formulaire#top_label|Positionner le label en haut du champ field]]

h2(#css_class). Appliquer une classe CSS

Pour chaque composant de formulaire dans l'interface admin, il y a un champ CSS. Renseigner un nom (ex: ma_premiere_classe).

Ensuite, allez dans utilities > CSS Editor et éditer le main.css. Ajoutez y la classe que vous avez renseignez (ex : .ma_premiere_classe { }   - attention le "." est obligatoire).

h2(#style). Appliquer un style différent au sein d'un même composant de formulaire

h2(#common_back). Ajouter un fond commun à deux composants

h2(#min_max). Ajouter un min max pour un composant between

h2(#top_label). Positionner le label en haut du champ field