Styling without writing CSS

Many people open a CSS block to repaint a color, change a font, or round a button's corners — when the module's design settings already do it, with the mouse, without any risk of breaking on the next deployment. This article shows you where to look before writing a single line of CSS, and it doesn't repeat what the Module settings (design) article already covers: the angle here is "don't write CSS for nothing." 🧭

🧭 Where the settings live

From the module settings (the gear icon on the module, in the graph), four tabs:

• Characters — a portrait, a color and a text style per character.
• Stages — your backgrounds, one by one.
• App style — the general look: frame, background, feed, HUD, characters, waiting button, delays, and an "Other" section.
• Block style — the look of every block type that shows on screen: Alert, Choices, Dialogues, Narrator, Image, Input, Swipe, Notification, Background, QTE, Select file, Audio choice.

These last two tabs hold nearly every visual setting a module has.

🔢 90 settings, counted one by one

The data store behind App style and Block style holds exactly 90 fields editable with the mouse, counted directly in the configuration module: every field is a setting you can see in one of the two tabs, no exceptions.

So the question to ask before writing CSS is: isn't what I want already one of these 90 fields?

🎨 The families of settings

Every name above is the exact label you see in the editor — not a shortcut of my own.

🖱️ The shortcut from a block

Open any block that shows on screen (Dialogue, Choice, Alert…). At the bottom of the block panel, the "Edit block style" button takes you directly to the Block style section that governs that block type. From a dialogue block you land on "Dialogues"; from a choice block, on "Choices." No need to hunt for the right section by hand.

🟦🟥 Coloring choices without CSS — the native way

To give each button of a Choices block a different color (the classic case: one option blue, one red), there is a native solution.

Connect an Alter choice block, set to "Change style", to one option's point on the Choices block. It then offers a border style and a text style, picked from a ready-made style library: solid-color panels (blue, red, green, yellow, orange, purple, brown, cyan, black, white…), comic-book bubbles, messaging-app styles (WhatsApp, Facebook, Telegram, Instagram, LinkedIn, Twitter, WeChat), medieval styles, a scroll, and a few neutral ones (including a fully transparent one).

This is the official route: it doesn't depend on any CSS class name, so it survives platform updates — at the cost of one Alter choice block per option you want to color.

🔺 The "bubble" styles (blue, red, green) are designed for a dialogue line, with large internal margins: check the render before using them on a small button, they can look oversized.

⚠️ When the CSS block is still the right tool

There are genuine cases none of the 90 settings cover:

• precise cropping of a background image ("cover without stretching") — see the trap right below, because the native "Cover" setting doesn't do what its name promises;
• targeting a single instance rather than a whole type: there is no "this one message" style, only "messages";
• positional selectors, like coloring the 1st choice differently from the 2nd without putting an Alter choice block on each one;
• anything no setting offers: shadows, gradients, transitions.

In every other case, look in App style or Block style first.

🧑‍💻 How to use the CSS block

The CSS block has a style input, which isn't a free-text field but a CSS code editor, and a clear input: the style you set persists through the whole flow that follows, until another CSS block with clear turned on. Place it once, at the very start of the flow.

A few stable classes from the Chatbot template you can target:

🔺 Classes that look like css-a1b2c3 are generated on every build: never target them, they change without warning.

An example, for the one case the native setting really doesn't cover — cropping the background:

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

🔺 Silent traps to know about

A font name in quotes falls back to serif. The font picker lists generic names at the top (sans-serif, serif) followed by real font names (Arial, Verdana, Georgia…). For some module elements — dialogues in particular — the chosen name always ends up in quotes in the final CSS. A generic name in quotes means nothing to the browser, which falls back to its default serif. The fix: pick a real font name from the list (Arial, for instance), never the generic entry at the top.

Text can end up white on white. Some text styles start with a near-white color meant for a dark background. If your text disappears, check the color field of that text style first — no CSS to write, just a color to change.

A dialogue bubble doesn't really have a "background color": it's a border image. To repaint it, pick a different border style from the library instead of hunting for a "background" setting that doesn't exist for that element.

→ Next step: open App style and Block style on your own module, and find at least one setting you had, until now, been doing in CSS.