Chameleon is built to blend natively into your product while standing out from your interface, to ensure your guidance gets delivered. Check out the Styling overview to learn how to fully control the look of your Experiences in the Dashboard and Builder.

With custom CSS you can take that to the next level, and apply specific customizations to your entire account, or certain Experiences. This is how you can ensure your brand style is accurately represented in any Experience you deliver.

🔐 Available for all plans

📍 Ready to enhance your Tours, Tooltips, Microsurveys, Launchers

⚙️ Use it from the Dashboard & Builder

You can apply CSS (stylesheets that define your styling) to Chameleon Experiences for granular control over all styling elements. Use custom CSS rules to match the styling of Experiences to your application to the pixel. 

While many common styling attributes (such as color, fonts, text, etc.) are easily customizable from the Builder, you may want further control over items such as:

These and more, are adjustable with custom CSS in Chameleon.

Custom CSS works by targeting specific elements of Chameleon Experiences to change their styling. To use this, you need to first identify the Chameleon element you would like to target, then add the specific styling in the custom CSS field.

See the list of selectors used for different Experiences:

You can adjust the styling with custom CSS in the Dashboard, at an account level, or from the Builder, at an Experience level.

👉 In your Dashboard on the Custom CSS page, you can access the CSS Cheat Sheet to quickly find a specific class name that you can use to customize your Experiences. You can review all the available classes for all Experience types and simply copy and paste one when you need it.

Identify the selectors you want to target: use the articles from the list above or identify the CSS style properties you should use by using the Elements panel in Chrome's Developer tool to inspect elements.

We suggest that you first change the CSS locally within your browser, from within the Developer Tools, so you can confirm that the observed style is as you expected.
​

Once you're satisfied, you can then add this code into the CSS input field within the Styling page, in the Dashboard, or directly in the Builder, to also get a live preview of your changes.

The Custom CSS tab in the Dashboard is the place to go for full styling control of any individual or group of Experiences. Your custom CSS can be added to your whole account (all Experiences), to a group of Experiences, or to specific ones.

Here you can hit the 'Quick Edit' button to go in straight away and add your custom CSS. Or, take the safe route, and 'Edit in the Builder' to get a quick preview of the changes you want to make. Once you're happy with your changes, you can apply them immediately.

👉 If you'd like to adjust the custom CSS for only one individual Step or Experience, we recommend doing so via the Builder, to give you a live preview and ensure it looks as expected.

All the custom CSS changes you're making via the Builder will also show up in the Dashboard, in the Experience-specific CSS section. You can easily go in to review and adjust the styling applied with the 'Quick edit' option or use the Builder for precise revisions.

If you'd like to adjust the custom CSS for only one individual Step or Experience, you can do it from the Builder to instantly check the results. When previewing your changes your expected style should show up; if not, then something is incorrect in the custom CSS, and you should review your rule.

Simply select the Custom CSS option from the Design section and click "Add CSS rule". Chameleon will generate a new rule and you can add your desired selectors and styling.

From the Builder, you can also hit 'Download Step CSS' to get a file that contains all the CSS applied to that Step or Experience, including any defaults set by Chameleon.

If you would like to adjust the CSS applied based on the user (or user group), for example, to change the styling based on the user's individual or company settings, our powerful merge tags can also be used in Custom CSS.

In case this is not enough for you, there's also the option of using our custom helpers API to extend the merge tags with custom code.

📩 Want to access this functionality? Speak with us so we can enable this for your account and discuss how you can best leverage it.

Below are some examples of ways you can customize your Experiences using Custom CSS to alter the styling associated with the various components.

🎯 The examples below are directed to Tours; however, you can apply the same logic to other Chameleon Experiences, by adjusting the CSS selectors accordingly.

To illustrate the impact of the various custom CSS examples below, here is a default Step, which has not been adjusted with any custom CSS:

You can easily create a Step like this, by using the options available in the Builder.

Add padding, e.g. between the Step's edges and body text, pushing the Step out larger:

Add a margin between the Step's edges and body text, narrowing the text more within the Step:

Customize a Step's border; useful for highlighting Steps on dark backgrounds:

Adjust the intensity of Step shadows:

Enable users to interact with the elements inside of Lightbox and on your page:

💡In this case, you'll also want to drop the opacity of the Lightbox to 10%, so users can see and interact with the other elements on your page. Optionally, to ensure you're focusing users' attention on the right action, you can add a border of the same color as your Step. 😉

You can easily leverage your existing fonts and font family by adding the correct names to the Styling section. Read more here.
​
However, if you feel the need, you can import other brand fonts for use in custom CSS styling by including the @import call in your Chameleon custom CSS file.

For example, to make Rubik available when specified as a font-family:

Set alternate fallback fonts for Mac users:

Adjust headers, such as Increasing the font size of H1s:

Adjust line height and margin of all headings:

Turn blockquotes into bordered tip boxes with an accent color:

Add a wider margin between paragraphs:

Remove the margin of a step's last paragraph:

Adjust paragraph line heights:

Adjust the margins between individual items in an ordered or unordered list:

Change link styles, such as increase font-weight (bold) of links:

Remove underlines from the link text, both visited and unvisited, and instead indicate a link with an accent color:

Hide link underline on hover:

Display the Step media as a centered square icon:

Force step media to 100% container width without distorting the aspect ratio:

Adjust the spacing between media and body components

​

Adjust the padding between the Step edge and the embeded content:

Adjust the padding and opacity of the progress indicator:

Set the color and size of progress indicator breadcrumbs:

Adjust dismiss padding:

Customize dismiss icon fill color:

Adjust the position of an outside right dismiss button:

Remove outside dismiss icon background:

Adjust dismiss text size and weight:

You can do a lot to ensure your buttons are styled and behave exactly as other buttons within your interface. Here are some examples:

Round button corners:

Set custom colors for button default and hover states:

Increase button height:

Make buttons shorter and wider:

Change button text and border color on hover:

Force button text to uppercase:

Apply shadow to button on hover:

Chameleon sets a default style on elements that are focused or tabbed to for accessibility. You can adjust that styling with some custom CSS as follows though:

Change the default focus border to red and thicker:

Feel free to adjust this however you'd like to meet your own apps styling needs.

📩 Have any requests for other styling examples you'd like to see or any questions on how to craft your perfect style? Speak to us, we're happy to help out!