Project

General

Profile

Personnaliser un composant de formulaire » History » Version 6

Herve Ballans, 07/05/2012 17:17

1 1 Herve Ballans
h1. Personnaliser un composant de formulaire
2 1 Herve Ballans
3 1 Herve Ballans
1/ Pré-requis:
4 1 Herve Ballans
   Connaitre les notions suivantes pour les CSS : Identifiant, classe, héritage et pseudo-class en CSS
5 1 Herve Ballans
6 1 Herve Ballans
2/ Outil
7 1 Herve Ballans
   Firebug
8 1 Herve Ballans
9 6 Herve Ballans
Exemples de scénarios :
10 4 Herve Ballans
[[Personnaliser_un_composant_de_formulaire#css_class|Appliquer une classe CSS]]
11 1 Herve Ballans
[[Personnaliser_un_composant_de_formulaire#style|Appliquer un style différent au sein d'un même composant de formulaire]]
12 6 Herve Ballans
[[Personnaliser_un_composant_de_formulaire#common_back|Ajouter un fond commun à deux composants]]
13 6 Herve Ballans
[[Personnaliser_un_composant_de_formulaire#min_max|Ajouter un min max pour un composant between]]
14 6 Herve Ballans
[[Personnaliser_un_composant_de_formulaire#top_label|Positionner le label en haut du champ field]]
15 1 Herve Ballans
16 1 Herve Ballans
17 1 Herve Ballans
h2(#css_class). Appliquer une classe CSS
18 5 Herve Ballans
19 5 Herve Ballans
Pour chaque composant de formulaire dans l'interface admin, il y a un champ CSS. Renseigner un nom (ex: ma_premiere_classe).
20 5 Herve Ballans
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).
21 1 Herve Ballans
22 6 Herve Ballans
h2(#style). Appliquer un style différent au sein d'un même composant de formulaire
23 1 Herve Ballans
24 6 Herve Ballans
h2(#common_back). Ajouter un fond commun à deux composants
25 1 Herve Ballans
26 6 Herve Ballans
h2(#min_max). Ajouter un min max pour un composant between
27 1 Herve Ballans
28 6 Herve Ballans
h2(#top_label). Positionner le label en haut du champ field