Overview
A theme defines the overall look-and-feel of the UI of an Inquiry. A theme includes settings for colors, fonts, borders, and more. Use the Flow Editor to easily edit a theme.
In this tutorial, you'll learn how to:
- Upload your logo: Upload a custom logo to be displayed on the start page.
- Customize colors: Choose an overall primary color, and primary and secondary colors for buttons.
- Style text: Set the font, font size, and font weight of text.
- Style buttons: Choose from preset style configurations for buttons.
1. Set up
Open Theme editor
1.1. Open the Flow Editor for your desired Inquiry Template.
1.2. Click Theme at the top-right corner of the window to open the Theme editor.
Select language
1.3. In the Language dropdown, select the language you want to view the flow in, while you edit.
Note: Any edit you make to your theme will be applied to your flow in all languages. The language you pick in this dropdown does not narrow the scope of your edits to just that language.
2. Upload your logo
Upload a custom logo for your start screen. Your logo will replace the words "Getting started" at the top of the start screen.
2.1. Select Start Page Title from the left-hand sidebar.
2.2. Click the gray box to bring up an image picker. Select the image file from your computer.
2.4. Drag the logo width slider to adjust the image width.
2.5. Click Save.
3. Customize colors
In this tutorial, we'll choose an overall primary color, and primary and secondary colors for buttons. Many more color options are available.
3.1. Select Color from the left-hand sidebar.
3.2. Under Primary color, click the square box to open a color picker. Pick the color you want. See the hex code of your chosen color appear in the input box.
3.3. Under Primary button fill color, copy/paste the hex code from the Primary color to the input box here. This sets primary buttons to be the same color as the Primary color.
3.4. Under Secondary button fill color, click the square box to open a color picker. Pick the color you want. (If you don't want to choose, copy/paste this hex code for a dark gray: #585656)
3.5. Click Save.
4. Style text
In this tutorial, we'll set the font, font size, and font weight of headings. You can apply analogous settings to body text and small text. Additional settings exist for line height, and text alignment.
4.1. Select Font from the left-hand sidebar.
4.2. Under Heading font, select a font for your heading text.
4.3. Under Heading font size, use the slider or input box to set a font size.
4.4. Click Save.
5. Style buttons
Choose from preset style configurations for buttons.
5.1. Select Buttons from the left-hand sidebar.
5.2. Under Button border radius, use the slider or input box to select a radius.
5.3. Under Button style, select the Raised style.
5.4. Click Save.
6. (Optional) Publish
Your end users will not see your changes until you publish them.
Since this is a tutorial, you may not want your end users to see your changes! If and when you do want to deploy changes to your end users, hit Publish at the top right of the window.