Skip to main content
Styling Overview

How to change colors, fonts, add custom CSS or other styling options to your Experiences

Tiago Mota avatar
Written by Tiago Mota
Updated over a month ago

We understand the importance of native-looking in-app Experiences to engage users. In Chameleon, you have complete control over the look of your Experiences, and you can ensure a cohesive style with Themes and Templates.

From Announcement Tours to Onboarding Checklists, you can personalize every aspect to achieve the right look and feel.


Availability & Usage

πŸ§‘β€πŸ’Ό Admins & Designers can update (if Roles are enabled)


Default Theme

Your Chameleon Experiences will follow a Default Theme that gets created when you get started with Chameleon. Once you confirm your Default Theme, you can adjust it in more detail on the Styling page and create more Themes to set the style for any Experience you create in Chameleon.

πŸ‘‰ You can also invite a Designer on your team to help set your Account Theme or create more Themes and Templates.


Account Styling

On the Styling page, you can access the Themes on your account, create new ones, and adjust your styling. You can also find your Templates here, or review and adjust Custom CSS rules that have been added to your Experiences.

πŸ‘‰ With each Theme, you can access more styling options and adjust your fonts, padding, colors, or Custom CSS.

Themes

Access your Default Theme or create new Themes on your account to help you manage a branded style for the different in-app Announcements you want to create. When you create a new Experience, it will always follow the style of your Default Theme.

β„Ή You can set as your Default Theme any Theme you create from the Themes tab on the Styling page.

If you have multiple Themes, you can also pick a different Theme for a new Experience when building it.

Experience Custom CSS

On the Experience CSS tab, you can review and edit any individually applied Custom CSS to Experiences on your account. Select any Experience and review or adjust the Custom CSS in the Dashboard or Builder.

Custom CSS tweaks take precedence over any other point-and-click styling changes you make from the Chameleon Builder directly. You can apply Custom CSS to your Themes or account Styling by editing your existing Themes. For each Theme, you can access two Custom CSS tabs:

  • Theme.css -- to apply Custom CSS to that specific Theme

  • Account.css -- to apply Custom CSS to your account styling

β„Ή Once you update the Custom CSS, it will apply immediately, including to all existing (live) Experiences.

β„Ή Open the CSS Cheat Sheet to quickly find a specific selector that you can use to customize your Experience. You can review all the available selectors for all Experience types and simply copy and paste one when you need it.

Saved Templates

Leverage Templates to quickly jumpstart building a new announcement for your most common use cases. These will appear when you create a new Experience (e.g., adding a new Tour Step or a new Microsurvey).

You can browse the "Templates Gallery" for each Experience type or create your own. This works the same way as you would create individual Steps or Experiences with the Chameleon Builder.

You can add different Templates to your Themes and ensure a cohesive style between your in-app announcements.

Chameleon Components Figma File

On the Styling page, you can also access the Chameleon Figma Components file that you can use to establish your Default Style or prepare any upcoming style changes before applying them to your Experiences.


Individual Experience styling

You can also tweak the style of your Experiences from the Builder and find styling options for the same components:

While working with colors in the Builder, 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.

To make adjustments to any component (e.g. Step body, title, button, etc.) click it to see the customization options available.

πŸ’‘ 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'll find options for your Step content as well and you can also apply markdown formatting, or add emojis to help brighten your content πŸ”† Or leverage user variables to personalize every interaction.

Did this answer your question?