With Chameleon, you can style your Experiences to match your brand and styling needs perfectly. Aside from the global styling options that you have in your Dashboard, each Experience is customizable directly from the Builder.
Regardless of the Experience you create, you have several options to customize your Canvas for a complete native blend.
👉 Check out the Styling Overview to know how you can ensure your Experiences look perfectly built-in.
Customize your Canvas to the pixel
To update the look and feel of your Step background or canvas, find all customization options under "Canvas" in the Design section of the Builder.
Here you will find options relating to the size and visual appearance of your canvas, and you can adjust:
the padding size
the width
the border color and width
how rounded the corners should be
the color and style, along with its opacity
ℹ The default spacing is 24px around Steps and 16px in between each component. You can update your defaults from the Styling page in the Dashboard.
For your Experience background, you have 3 style options that you can choose from solid color, gradient, or image/GIF.
🤝 Make sure the Canvas width fits your text but does not cover other important elements on your page to obstruct your user’s experience.
Solid
A solid background is a straightforward way to align your Experiences with your branding and goals. Chameleon automatically detects the color palette present on your page and suggests those colors for you to pick from.
You can also add your brand’s palette and use these colors “by the code”. Get your hex guidelines for this, or pick a new one using a color picker.
Gradient
With the gradient background, you can create an appealing, modern Experience. You can pick (or add your own) 2 colors to form a smooth gradient and adjust it with the opacity option.
🪄 With a gradient background, is best to have similar hues or luminance as your underlying interface for a native blend.
💡 You can use an online tool to make sure you pick the right hues that will complement your Experience.
Image/GIF
Add a custom visual to your Experience by uploading images or GIFs as your Experience background. This can be a good way to draw attention to a user's action but should be in line with your branding and done with impeccable graphics.
✨ A good rule of thumb is to create Experiences that stand out from your underlying interface, with different colors or hues. It’s hard for users to distinguish between the two if they are too similar.
Style all that you want with Custom CSS
If you want to achieve more nuanced styling you can use Custom CSS to customize your Experiences. Within each Experience, you can control attributes like fonts, colors, line spacing, positioning of certain elements, borders and shadows, or color gradients.
This works by adding specific styling options to different elements in your Chameleon Experiences, in the custom CSS field. Learn the steps to do this here.