First, learn about how to control styling across your Chameleon account and Experiences:

The article above explains how to set default styles, adjust styles for multiple Tours at once, how to add custom CSS, and how to leverage Templates for different themes.

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

Know more

Did this answer your question?