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, 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:
- New 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, click the component you wish to change (e.g. step body, title, button, etc.) to see the customization options available.
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 🔆
👉 Have any questions or issues? Review the best way to get help.