Simple Long Form et CSS personnalisé : la liste des sélecteurs
20 janvier 2017Depuis ses débuts, le plugin Simple Long Form, développé pour WordPress, propose un champ de formulaire réservé aux utilisateurs avancés. Il a pour fonction de leur donner la possibilité de personnaliser davantage le style d’un longform.
Les options de réglage sont déjà nombreuses mais elles conçues pour un usage général. Pour un usage particulier, les sélecteurs peuvent être récupérés via le code source. Ils sont désormais documentés ci-dessous, pour plus de facilité. Pour ceux qui ont un peu de mal avec le code CSS mais qui souhaitent s’y plonger, il existe de nombreuses ressources en ligne, dont l’excellent site W3Schools.
Intro
- Espace de chargement : .loader
- Intérieur de l’espace de chargement : #inner
- Titre de l’écran d’intro : .title h1
- Bouton déclencheur au bas de l’écran d’intro : button .trigger
- Titre pour une vidéo en fond d’écran : .bloc_title_top ou h1 .bloc_title_top ou .title_home h1
Barre de progression / barre fixe
- Barre de progression : #progression
- Chemin de la barre de progression : #barre
- Barre fixe : .navbar-fixed-top ou .navbar-fixed-bottom (selon le réglage)
- Icônes des réseaux sociaux : voir les icônes de FontAwesome, ex. .fa-twitter
Contenu des sections
- Auteur : #author
- Photos (auteur) : #photos
- Date : #date
- Sous-titre : .subline
- Chapeau : .chapo
- Texte d’intro : .intro_text
- Titre d’une section : .section_title
- Titre d’une section particulière : #sec1_title, #sec2_title, etc.
- Lettrine : .dropcap
- Encadrés (via Bootstrap) : .well, .panel, .jumbotron
- Elements de titraille : de h1 à h5
- Titre d’une vidéo : #bloc_title_1, #bloc_title_2, etc.
- Ligne horizontale : hr
- Légende d’une image de section : .caption_img_slf
- Bloc de citation : blockquote
- Bouton : .btn ou .btn-slf
Le champ du formulaire est à remplir comme une feuille de style. Ex :
.btn {background:#CC0033;padding:8px;color:#FFFFFF;}
.btn:hover {opacity:0.8;}
.btn {background:#CC0033;padding:8px;color:#FFFFFF;}
.btn:hover {opacity:0.8;}