Your tour should look and feel native, and Chameleon let's 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.
To change styling for many steps at once, use the Tour Styling menu in the sidebar.
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.
Simply make these changes in the Sidebar, and you will see the corresponding changes in the example step shown on the left-hand side.
Once you have made changes, you will have the option to apply these changes to either:
- Future steps: no existing steps will be affected, but new steps created afterwards will use the styling that you set
- All steps: all existing steps will be updated to match this new style. But don't worry, live tours will not be changed until you "Apply Edits" for that tour. (Tours that are affected by this change will be marked as "Edited").
❗️ Note: if you are using Custom CSS (if anything is present in the input field) this will take precedence for any other point-and-click styling changes you make from the Chameleon Editor directly.
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!