> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://documentation.celestory.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Styling without writing CSS

# 🎨 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

| Family | Where to find it | Examples of settings |
|---|---|---|
| **Colors** | almost everywhere | Background color (Frame, Background, Feed), Color (character border), Timer bar color (Choices), Click feedback color (QTE), Background color (Audio choice) |
| **Fonts and text** | every section of Block style | a **Text style** field for each element (Dialogues, Alert, Choices, Narrator, Notification, Input, QTE, Select file, Audio choice…), bundling font, size and color |
| **Sizes** | Frame, Feed, Characters, Swipe | Width, Height, Maximum width, Maximum height |
| **Margins** | Choices, Narrator, QTE, Select file | Margin, Choices container margin |
| **Borders and corners** | every section | Border image, Width (border thickness), Show border, Round character images, Rounded corners (Swipe card) |
| **Choice buttons** | Choices | Alignment, Direction (vertical / horizontal), Text alignment, separate styles for a normal / done / disabled choice |
| **Behavior** | Other, Feed | Disable text selection, Activate waiting button, Clear feed automatically, Hide fading effect |

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:

| Class | What it styles |
|---|---|
| `.chatbot-feed` | the conversation feed |
| `.chatbot-background` | the backdrop set by a Background block |
| `.chatbot-alert` | a narration line |
| `.chatbot-dialogue-text` | a dialogue line's text |
| `.chatbot-choices`, `.chatbot-choice` | the choices area, a single choice button |
| `.chatbot-waiting-button` | the waiting button |

🔺 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:

```css
.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.