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.

Version BF minimale requise : BreezingForms Lite
Niveau : Moyen
Compatibilité Joomla! 4/5 : ✅

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.

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 faites un aperçu, vous vous apercevrez qu'il est vierge, pas de couleur, un placement standard des éléments, etc. Voir ci-après.

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 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 leurs 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 indispensable…

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 leur 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 !