Documentation / Appearance

Styles

A style sets the look of your modules: colors, fonts, logo, frame, fields and button. You build it once in My styles, then choose where it applies. Without a style, your modules wear the colors of Bonjour la toile.

Creating a style

1. Open My styles.
2. Choose a starting template and give the style a name.
3. Click "Create and set up". The editor opens, with a preview next to the settings.
4. Adjust, watch the preview, then click "Save". Changes made in the editor only go live after saving.

An account can hold up to twenty styles. The "Duplicate" button creates a copy of an existing style.

Starting templates

A template is only a starting point: everything it sets can be changed afterwards, and the style is not tied to it.

In the editor, "Start again from a template" replaces every setting with the chosen template's. Your logo and your custom CSS stay.

What can be set

• Colors: the accent (buttons, stars, checked boxes), the text, the frame's background, the background around it, the borders, the fields' background and the button's text. The last four can stay "computed": they derive from the others. The computed surrounding background is transparent, to let your site's page show through behind the module.
• Fonts: one for headings, one for text.
• Text and headings: sizes, line height, weights, letter spacing of the heading, case (normal or capitals), alignment of the heading and the introduction.
• Frame: in a frame or laid straight on the page, corner radius, border, shadow, inner padding, maximum width.
• Fields: outlined, underlined or filled, radius, line thickness, height, space between two fields.
• Button: solid, outline or soft, radius, size, width, position, weight, case.

The editor flags colors that read poorly together (a text too close to its background, for example). It warns, it does not block.

The preview can show the form, the quiz and the reactions, on a light or dark site background.

Fonts

Thirty families are offered, on top of the house's two (Geist and Instrument Serif): sans-serif, serif, monospace and display fonts. They are served by Bonjour la toile: nothing loads from Google on your visitors' page. The editor only offers the weights each family really has.

The logo

A style can carry a logo, shown at the top of your forms and quizzes. Accepted formats: PNG, JPEG, WebP or GIF, 256 KB at most, 8 to 4,000 pixels a side. SVG is not accepted. A PNG with a transparent background works on every color. Its height and position (left, center, right) are set in the style.

Custom CSS

For what no setting covers, a field accepts CSS, 20,000 characters at most. It applies after everything else. The modules' classes start with .bl-, for example .bl-carte, .bl-titre, .bl-champ, .bl-etiquette or .bl-reaction, and the style's colors can be read back through var(--bl-accent) and its neighbors.

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

For your visitors' safety, url(), @import and @font-face are neutralized: a style sheet must load nothing from elsewhere.

Where a style applies

This is decided in the style itself, under "Where it applies", at the top of its settings. Two things to check:

• Apply it everywhere: all your modules, on all your sites. Only one style at a time can be the one for everything.
• And specifically on: one box per added module, site by site. Checked, that module wears this style even if another one is the style for everything.

The boxes go with the settings: a single "Save". A module is therefore assigned, in order:

1. The style that checked it, if there is one.
2. Otherwise, the style for everything.
3. Otherwise, the colors of Bonjour la toile.

Deleting a style goes through the "More" menu, at the top of its screen, and it is final. The modules that wore it go back to the style for everything, or to the colors of Bonjour la toile.