Créer son propre template pour BreezingForms

Nous l'avons vu dans un autre tutoriel, il est parfaitement possible de créer son propre template (Thème) pour BreezingForms.

Niveau: Moyen, Avancé
Version BF minimale requise: BreezingForms Lite

Situation

Les thèmes présents initialement dans le composant BreezingForms ne vous plaisent pas, vous devez vous adapter à une charte de site ou vous désirez tout simplement obtenir un affichage complètement personnel de vos formulaires, alors il vous faut un thème personnalisé.

Lors de l'installation de BreezingForms, divers thèmes sont initialement installés. Ils se trouvent dans le répertoire "root"/media/breezingforms/themes (aussi themes-bootstrap ou themes-bootstrap3 selon votre version, lite ou pro)

Voyons comment personnaliser un thème classique.

Prérequis: html, css, utilisation de l'inspecteur du navigateur, client ftp, Notepad++ ou BBEdit (mac) ou similaire

La méthode la plus rapide et facile est de se servir de ce que les concepteurs de BF ont gracieusement fait pour nous et se baser sur un thème déjà présent d'origine mais quasiment sans formatage. Ce thème se nomme default et nous allons, après avoir accédé au répertoire suscité par FTP, dupliquer ce répertoire default et le renommer mon_theme (vous pouvez bien entendu le renommer comme vous le désirez hein, vous avez libre choix ????).

Ce thème est désormais accessible dans la liste des thèmes disponibles pour vos formulaires. Si vous l'affectez à un formulaire existant et que vous en faite un aperçu, vous vous apercevrez qu'il est vierge, pas de couleur, un placement standard des éléments, etc. Voir ci après.

Ceci est un formulaire avec le thème default, voire le thème que vous venez de créer sur base de default.

Le formulaire n'est pas relié à notre base de donnée et n'enregistre aucune information personnelle, il n'est présenté qu'à titre de présentation. Le bouton de soumission en a été retiré.

Cette section est de type normal en deux colonnes. Paramètre "Type d'écran" = Éléments sur la même ligne.

Section 2

La section ci-dessous est une section e type "Groupe de champs" en deux colonnes comme précédemment.
Les sections de type "Groupe de champs" ont un titre, comme ci-dessus "Section 2"

Section 3

Comme vous le voyez, ce nouveau mon_theme est désert et si vous en ouvrez la feuille de style (theme.css) dans votre éditeur CSS préféré, vous n'y trouverez que les sélecteurs pour chaque élément et, pour quelques un d'entre-eux, une propriété et une valeur. Sinon, chaque bloc de déclaration est vide.

Vous avez alors carte blanche pour personnaliser ce thème à votre guise et présenter vos formulaires vraiment à votre goût.

Résumé

Créez un formulaire, affectez-lui ce nouveau thème, publiez-le, affichez-le et ouvrez l'inspecteur de votre navigateur afin de pouvoir sélectionner chaque type d'élément, repérer ses propriétés afin de les retrouver dans votre "theme.css". Laissez aller votre créativité, écrivez vos propriétés CSS et leur valeurs et vérifiez au fur et à mesure le résultat de vos modifications en actualisant le formulaire dans votre navigateur. Aidez-vous toujours de l'inspecteur, il est indispenable…

Au départ, certaines propriétés seront peut-être (certainement même) affectées à vos éléments par les feuilles de styles de votre Template de site, la feuille CSS du nouveau thème BF écrasera ces propriétés lors de leurs mise en place.

Lorsque vous avez créé votre thème, pensez toujours à le sauvegarder et en placer une copie en lieu sûr, en local ou sur un "cloud" afin, qu'en cas de pépin, vous puissiez toujours retrouver vos thèmes pour les réinstaller. Un homme prévenu en vaut deux ! ????

Cet article vous a plu ?
N'hésitez pas à laisser une évaluation en haut de page afin de me faire part de votre impression !

 Commentaires  
jimmy
0#superjimmy10-10-2019 14:25
Et hop une astuce supplémentaire utile :-)
Répondre | Répondre en citant | Citer
Eddy
0#RE: Créer son propre template pour BreezingFormsEddy10-10-2019 15:00
Hello.

Toutes les astuces sont utiles ! Ravi que celle-ci puisse vous servir. N'hésitez pas à voter pour l'article en haut de page !
Répondre | Répondre en citant | Citer
 Ajouter un commentaire
En utilisant ce formulaire de commentaires, vous acceptez que les informations demandées soient enregistrées, affichées ci-dessous et utilisées pour un éventuel contact (dans ce cas, n'oubliez pas de renseigner votre e-mail). L'adresse e-mail n'est jamais affichée aux visiteurs.