Your tour should look and feel native, and Chameleon lets you adjust the styles to match your brand.
💡 Tip: to avoid confusion between your tour and your interface for new users (or those not totally familiar with your product) you should consider using contrasting / complementary colors for tours, to help them stand out.
The default styling for your Tours is set when adding your brand colors, but you can adjust individual styling components or make wholesale changes across your Tours from the Styling section.
Here you will have the option to change the following components:
- Colors: step background, text, overlay / shroud
- Fonts: family, default size. To learn more about this see this article
- Other: corner radius, shroud opacity
- Custom CSS: specify more precise styles. This is available on custom plans. If you'd like this feature, email us.
Any styling you adjust will appear in the example Step on the right-hand side.
❗️ Note: if you are using Custom CSS this will take precedence for any other point-and-click styling changes you make from the Chameleon Editor directly.
Once you're happy with your changes, select in the dropdown whether to apply to:
- All new (future) Tours -- sets the new default
- All Tours
- A particular Tour
For changes to any Live Tours, these will be marked as "Edited" and will need to be re-published before the changes are made live. This gives you the opportunity to specifically preview your Tour before deploying changes to users.
Change styling for a single step
In addition to changing the default or overall styling for your steps, you can change the style for a specific step. The options you have to change include:
- Step background and text color
- Button text and background color
- Corner roundness
- Shadow color and opacity
To make these changes, when editing your steps, simply click the component you wish to change (e.g. step body or button) to see the options available in the Editor topbar.
The color palette will show you colors from the underlying page, to make it easier for you to match your brand, but you can also paste any HEX code, and it will be saved to your "Custom" color list, for easy access.
You can also create transparent steps by changing the opacity of the step background color to 0%. You can use this in combination with an overlay to create an alternative style of guidance:
You can also use markdown formatting to change the size of fonts, or add links and bullets. You can also add emojis to help brighten your content 🔆
For any questions or feedback on this article, please send us a message by clicking on the chat bubble on the bottom right corner!