Adjust your default and account-styling from the Chameleon dashboard Styling page.
Set your brand defaults
One of the first things you may want to do with Chameleon is to set the default styling of your Experiences, such that when you create any new Experience, it will automatically be according to your brand.
Do that by clicking "Set your brand" on the Styling page
You can then set your brand colors and font here; this will adjust all the individual styling configurations to smartly match your theme.
Setting your fonts
You can use your exact fonts in Chameleon; just ensure they are spelt in precisely the same way as in your page. Chameleon then pulls this font from your page when showing any Experiences. You can also use a comma-separated list of fonts to include fallbacks if necessary.
Note: this font may not display in the dashboard or previews, but will work when previewing any Experiences in the Builder.
Adjust the styling
From the Styling section in the Dashboard, you can also adjust different styling components individually, either as the default for your account, or to apply to a particular Tour.
Here you can set your defaults:
Font - Adjust the fonts used in your Experiences. Chameleon pulls these from the fonts loading on your page
Colors - Adjust the colors for your text, backgrounds, buttons, etc.
CSS - Use custom CSS to achieve a more detailed styling and apply it to all Experiences, any particular Experience, or a specific step.
For more information about Styling for Experiences, click here.
💡 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.