Personnaliser les formulaires phpMyForm avec CSS

On peut personnaliser un seul formulaire phpMyForm avec les CSS indépendamment des autres formulaires de la page.

En complément de la feuille de style générale du script, chaque formulaire phpMyForm peut utiliser (ce n'est pas obligatoire) une feuille de style form_name.css située dans le dossier phpMyForm/form/form_name/css (form_name = nom du formulaire).
Cette feuille de style peut-être modifiée soit :

  • En ligne par l'interface d'administration de phpMyForm.
  • En local, avec un éditeur de texte, puis ensuite transférée par FTP.

Formulaire, dans lequel chaque couleur correspond aux class les plus utiles :
Note : Ce formulaire utilise les styles par défaut du thème WordPress pour les divers champs et boutons. Ceci peut être modifié, bien entendu, dans la feuille de style du formulaire.

On peut tout faire avec css, il suffit de connaitre les class ou id concernés. Les outils de développement intégrés dans les navigateurs permettent de trouver les noms de class ou id d'un élement facilement et donc modifier ou appliquer le style que l'on désire.

text form top
text00

text before data

text top

text after

text bottom

text after data

radio01
radio01

check01
check01

checkbox01
 
Texte après le bouton
text form bottom

Légende des couleurs :

.text-form-top
.text-form-bottom
.text-before-data
.text-after-data
.text-top
.text-bottom
.text-before
.text-after
.text-after-button
.bloc-label-data
.col-label
.bloc-content-data
.bloc-ligne-data (comprenant .bloc-label-data et .bloc-content-data)
fieldset.radio
bloc-check-uncheck
fieldset.bloc-multi-check

Bordure verte de séparation : class .bloc-ligne-data et .text-form-bottom (border-top)

Bordure orange autour du formulaire : est appliquée sur la class .php-my-form.

Ces bordures, entre chaque champs du formulaire et autour du formulaire, peuvent être également définies (donc sans ajout dans la feuille de style) dans les options du formulaire, dans le fichier form_options.ini (options style_form et field_border).

Un bloc div avec les class .php-my-form et .form_name (class du nom du formulaire) englobe tout le formulaire. Donc à partir de là, il est simple de n'appliquer des class rien qu'à un seul formulaire.

Exemple, la feuille de style doc_class_color.css de ce formulaire :

.entry-content .php-my-form.doc_class_color {line-height: normal!important;}
.php-my-form.doc_class_color {border: 6px solid #FFA500;border-radius: 5px;}
.php-my-form.doc_class_color .bloc-ligne-data, .php-my-form.class_color .text-form-bottom {border-top: 6px solid #008000;}
.php-my-form.doc_class_color .bloc-label-data {background-color: #FFC0CB;}
.php-my-form.doc_class_color .bloc-content-data{background-color: #66CDAA;padding: 5px!important;}
.php-my-form.doc_class_color .bloc-ligne-data {padding: 0!important;}
/* ********************* */
/* pour voir bloc-ligne-data */
.php-my-form.doc_class_color .bloc-label-data.textarea01, .php-my-form.doc_class_color .bloc-content-data.textarea01 {background: none!important;}
.php-my-form.doc_class_color .bloc-ligne-data.textarea01 {background-color: #C0C0C0;}
/* ********************* */
.php-my-form.doc_class_color .col-label {background-color: #7CFC00;}
.php-my-form.doc_class_color .text-form-top {background-color: #FFD700;}
.php-my-form.doc_class_color .text-form-bottom {background-color: #FFE4B5;}
.php-my-form.doc_class_color .text-top {background-color: #00FFFF;}
.php-my-form.doc_class_color .text-bottom {background-color: #1E90FF;}
.php-my-form.doc_class_color .text-before {background-color: #4682B4;}
.php-my-form.doc_class_color .text-after {background-color: #7B68EE;}
.php-my-form.doc_class_color .text-before-data {background-color: #FA8072;}
.php-my-form.doc_class_color .text-after-data {background-color: #FFA500;}
.php-my-form.doc_class_color .text-after-button {background-color: #B8860B;}
/* ********************* */
.php-my-form.doc_class_color .bloc-check-uncheck {background-color: #AFEEEE;}
.php-my-form.doc_class_color fieldset.bloc-multi-check {background-color: #DDA0DD!important;}
.php-my-form.doc_class_color fieldset.radio {background-color: #FFE4E1!important;padding: 5px;}