Create and edit a theme¶
Design a theme that matches your brand, then use it across your tooltips, highlights, popups and tours.
Who can do this: All Flook users
Before you start¶
Themes are created and edited in the Flook Builder, not the dashboard.
Steps¶
- In the Flook Builder, open any tooltip, highlight, popup or tour.
- Open the Theme list:
- For an item, it's on the Essentials tab.
- For a tour, it's in Tour General Settings.
- Click New Theme to start a new theme. To change the selected theme, click the pencil next to it instead.
- The Theme Editor opens. Click the name at the top to rename your theme.
- Choose a part of the theme on the left, and change its settings (see below). The preview updates as you go. You can also click a part of the preview to jump to its settings.
- Click Save.
What you can change¶
| Section | What it controls |
|---|---|
| Padding / Spacing | Space inside the item and between blocks (Gap) |
| Header | The close button's colour |
| H1, H2, Body Text | Colour, Font, Size, Line height, Letter spacing |
| Image | Border, shadow and margin around images |
| Primary Button, Secondary Button | Text, background, border and padding |
| Divider | Style, Colour and Width |
| Link | Colour and Underline |
| Arrow | Size: Small, Medium or Large |
| Launcher | Size, Default Colour and Default Icon. "Defaults can be overridden in the widget properties" |
| Background | Colour and Shadow |
| Border | Style, Colour, Width and Radius |
| Tour Controls | Progress type (Dots, Pages or Line), Progress colour, Button alignment and Button type (Arrows or Buttons) |
| Flook Branding | Space around the Flook logo |
| Backdrop | Colour |
Fonts available: Inter (Thin, Light, Regular, Medium, Bold, Black) and Roboto (Light, Regular, Bold).
Most sections have a Reset button that undoes your changes to that section.
Tips¶
- Use the filter icon (Preview) at the top right to choose which parts appear in the preview. Backdrop is hidden by default. Turning a backdrop on for an item is done in the item's settings.
- Saving a theme updates every item and tour that uses it.
- Click Cancel to leave without saving.
Troubleshooting¶
"Duplicate theme" appears when I try to edit a theme¶
You're trying to edit one of Flook's built-in (system) themes, which can't be changed. Click Duplicate to make your own copy, then edit that. See Duplicate a theme.
"Could not load the Theme"¶
Click Back and try again.