Documentation / Habillage

Styles

Un style règle l'allure de vos modules : couleurs, polices, logo, cadre, champs et bouton. Vous le composez une fois dans Mes styles, puis vous choisissez où il s'applique. Sans style, vos modules portent les couleurs de Bonjour la toile.

Créer un style

1. Ouvrez Mes styles.
2. Choisissez un modèle de départ et donnez un nom au style.
3. Cliquez sur « Créer et régler ». L'éditeur s'ouvre, avec un aperçu à côté des réglages.
4. Réglez, regardez l'aperçu, puis cliquez sur « Enregistrer ». Les changements faits dans l'éditeur ne sont en ligne qu'après l'enregistrement.

Un compte peut porter jusqu'à vingt styles. Le bouton « Dupliquer » crée une copie d'un style existant.

Les modèles de départ

Un modèle n'est qu'un point de départ : tout ce qu'il pose se change ensuite, et le style n'y reste pas lié.

Dans l'éditeur, « Repartir d'un modèle » remplace tous les réglages par ceux du modèle choisi. Votre logo et votre CSS personnalisé restent.

Ce qui se règle

• Couleurs : l'accent (boutons, étoiles, cases cochées), le texte, le fond du cadre, le fond autour, les bordures, le fond des champs et le texte du bouton. Les quatre dernières peuvent rester « calculées » : elles se déduisent des autres. Le fond autour calculé est transparent, pour laisser voir la page de votre site derrière le module.
• Polices : une pour les titres, une pour le texte.
• Texte et titres : tailles, interligne, graisses, espacement des lettres du titre, casse (normale ou majuscules), alignement du titre et de l'introduction.
• Cadre : dans un cadre ou posé à même la page, arrondi des coins, bordure, ombre, marges intérieures, largeur maximale.
• Champs : encadrés, soulignés ou remplis, arrondi, épaisseur du trait, hauteur, espace entre deux champs.
• Bouton : plein, contour ou doux, arrondi, taille, largeur, position, graisse, casse.

L'éditeur signale les couleurs qui se lisent mal ensemble (un texte trop proche de son fond, par exemple). Il prévient, il n'empêche pas.

L'aperçu peut montrer le formulaire, le quiz et les réactions, sur un fond de site clair ou sombre.

Les polices

Trente familles sont proposées, en plus des deux de la maison (Geist et Instrument Serif) : des polices sans empattement, avec empattement, à chasse fixe et de caractère. Elles sont servies par Bonjour la toile : rien ne se charge chez Google depuis la page de vos visiteurs. L'éditeur ne propose que les graisses que chaque famille possède vraiment.

Le logo

Un style peut porter un logo, affiché en tête de vos formulaires et de vos quiz. Formats acceptés : PNG, JPEG, WebP ou GIF, 256 Ko au plus, de 8 à 4 000 pixels de côté. Le SVG n'est pas accepté. Un PNG à fond transparent passe sur toutes les couleurs. Sa hauteur et sa position (à gauche, au centre, à droite) se règlent dans le style.

Le CSS personnalisé

Pour ce qu'aucun réglage ne couvre, un champ accepte du CSS, 20 000 caractères au plus. Il s'applique après tout le reste. Les classes des modules commencent par .bl-, par exemple .bl-carte, .bl-titre, .bl-champ, .bl-etiquette ou .bl-reaction, et les couleurs du style se relisent par var(--bl-accent) et ses voisines.

.bl-titre { font-style: italic; }

Pour la sécurité de vos visiteurs, url(), @import et @font-face sont neutralisés : une feuille de style ne doit rien charger d'ailleurs.

Où un style s'applique

Cela se décide dans le style lui-même, sous « Où il s'applique », en haut de ses réglages. Deux choses à cocher :

• L'appliquer partout : tous vos modules, sur tous vos sites. Un seul style à la fois peut être celui de partout.
• Et précisément sur : une case par module greffé, site par site. Coché, ce module porte ce style même si un autre est celui de partout.

Les cases partent avec les réglages : un seul « Enregistrer ». Un module se voit donc attribuer, dans l'ordre :

1. Le style qui l'a coché, s'il y en a un.
2. Sinon, le style de partout.
3. Sinon, les couleurs de Bonjour la toile.

Supprimer un style se fait par le menu « Plus », en tête de son écran, et c'est définitif. Les modules qui le portaient reprennent le style de partout, ou les couleurs de Bonjour la toile.