🎨 Mettre en forme sans écrire de CSS

Beaucoup de gens ouvrent un bloc CSS pour repeindre une couleur, changer une police ou arrondir un bouton — alors que le design du module le fait déjà, à la souris, sans risquer de casser au prochain déploiement. Cet article vous montre où chercher avant d'écrire la moindre ligne de CSS, et ne revient pas sur ce que l'article Réglages de modules (design) couvre déjà : ici, l'angle est « n'écrivez pas de CSS pour rien ». 🧭

🧭 Où se trouvent les réglages

Depuis les paramètres du module (icône d'engrenage sur le module, dans le graphe), quatre onglets :

• Personnages — un portrait, une couleur et un style de texte par personnage.
• Scènes — vos décors, un par un.
• Style de l'app — l'apparence générale : cadre, fond, flux de discussion, ATH, personnages, bouton d'attente, délais, et une section « Autre ».
• Style des blocs — l'apparence de chaque type de bloc affiché à l'écran : Alerte, Choix, Dialogues, Narrateur, Image, Champs de saisie, Swipe, Notification, Fond, QTE, Sélection de fichier, Choix audio.

C'est dans ces deux derniers onglets que vivent la quasi-totalité des réglages visuels d'un module.

🔢 90 réglages, comptés un par un

Le magasin de données qui alimente Style de l'app et Style des blocs contient exactement 90 champs éditables à la souris, comptés directement dans le module de configuration : chaque champ correspond à un réglage visible dans l'un des deux onglets, sans exception.

Avant d'écrire du CSS, la question à se poser est donc : ce que je veux faire n'est-il pas déjà l'un de ces 90 champs ?

🎨 Les familles de réglages

Chaque nom ci-dessus est le libellé exact que vous voyez dans l'éditeur — pas un raccourci de ma part.

🖱️ Le raccourci depuis un bloc

Ouvrez n'importe quel bloc qui s'affiche à l'écran (Dialogue, Choix, Alerte…). En bas du panneau du bloc, le bouton « Éditer le style du bloc » vous amène directement à la section de Style des blocs qui gouverne ce type de bloc. Depuis un bloc de dialogue, vous atterrissez sur « Dialogues » ; depuis un bloc de choix, sur « Choix ». Pas besoin de chercher la bonne section à la main.

🟦🟥 Colorer les choix sans CSS — la voie native

Pour donner une couleur différente à chaque bouton d'un bloc Choix (le cas classique : une option bleue, une rouge), il existe une solution native.

Branchez un bloc Modifier choix, réglé sur « Changer l'apparence », sur le point d'une option du bloc Choix. Il vous propose alors un style de bordure et un style de texte, à choisir dans une bibliothèque de styles prêts à l'emploi : des panneaux de couleur unie (bleu, rouge, vert, jaune, orange, violet, marron, cyan, noir, blanc…), des bulles de bande dessinée, des styles façon messagerie (WhatsApp, Facebook, Telegram, Instagram, LinkedIn, Twitter, WeChat), des styles médiévaux, un parchemin, et quelques styles neutres (dont un entièrement transparent).

C'est la voie officielle : elle ne dépend d'aucun nom de classe CSS, donc elle survit aux mises à jour de la plateforme — au prix d'un bloc Modifier choix par option à colorer.

🔺 Les styles « bulle » (bleue, rouge, verte) sont pensés pour une réplique, avec de grandes marges internes : regardez le rendu avant de les poser sur un petit bouton, ils peuvent paraître surdimensionnés.

⚠️ Quand le bloc CSS redevient légitime

Il reste de vrais cas où aucun des 90 réglages ne suffit :

• le cadrage précis d'une image de fond (« couvrir sans étirer ») — voir le piège juste en dessous, car le réglage natif « Couvrir » ne fait pas ce que son nom promet ;
• viser une seule instance plutôt qu'un type entier : il n'existe pas de style « ce message-ci », seulement « les messages » ;
• les sélecteurs positionnels, comme colorer le 1ᵉʳ choix différemment du 2ᵈ sans passer par un bloc Modifier choix sur chacun ;
• ce qu'aucun réglage ne propose : ombres, dégradés, transitions.

Dans tous les autres cas, cherchez d'abord dans Style de l'app ou Style des blocs.

🧑‍💻 Mode d'emploi du bloc CSS

Le bloc CSS a une entrée style, qui n'est pas un champ de texte libre mais un éditeur de code CSS, et une entrée clear : le style posé persiste dans tout le flux qui suit, jusqu'à un autre bloc CSS avec clear activé. Placez-le une seule fois, au tout début du parcours.

Quelques classes stables du template Chatbot, utilisables dans vos règles :

🔺 Les classes qui ressemblent à css-a1b2c3 sont générées à chaque build : ne les ciblez jamais, elles changent sans prévenir.

Exemple, pour le seul cas où le réglage natif ne suffit pas — le cadrage du décor :

.chatbot-background {
  background-size: cover !important;
  background-position: center center !important;
}

🔺 Pièges silencieux à connaître

Une police citée entre guillemets bascule tout en serif. Le sélecteur de police propose en tête de liste des noms génériques (sans-serif, serif) suivis de vrais noms de police (Arial, Verdana, Georgia…). Pour certains éléments du module — les dialogues en particulier — le nom choisi est toujours écrit entre guillemets dans le CSS final. Un nom générique entre guillemets ne veut plus rien dire pour le navigateur, qui retombe sur son serif par défaut. La parade : choisissez un vrai nom de police dans la liste (Arial, par exemple), jamais l'entrée générique du haut.

Le texte peut être blanc sur fond blanc. Certains styles de texte partent avec une couleur presque blanche pensée pour un fond sombre. Si votre texte disparaît, vérifiez d'abord le champ couleur du style de texte concerné — pas de CSS à écrire, juste une couleur à changer.

Une bulle de dialogue n'a pas de « couleur de fond » à proprement parler : c'est une image de bordure. Pour la repeindre, choisissez un autre style de bordure dans la bibliothèque plutôt que de chercher un réglage « fond » qui n'existe pas pour cet élément.

→ Prochaine étape : ouvrez Style de l'app et Style des blocs sur votre propre module, et repérez-y au moins un réglage que vous aviez, jusqu'ici, réglé en CSS.

Mis à jour le : 21/09/2026