Using Custom CSS to style Experiences

Learn how you can use CSS to specify your design and brand for any Chameleon Experience

Pulkit Agrawal avatar
Written by Pulkit Agrawal
Updated over a week ago

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.

β„Ή Chameleon currently only supports CSS at this time. This excludes pre-processor versions of CSS such SASS, SCSS, and LESS.


Availability & Usage

πŸ” 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:

  • Line spacing

  • Borders and shadows

  • Positioning of certain components (e.g. dismiss cross)

  • Color gradients

  • Font stacks (learn more here)

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

✨ You can also create Templates with specific styling that others can then use whenever they create new Experiences.


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

β„Ή ​Custom CSS will take precedence for any other point-and-click styling changes you make using the Chameleon Builder.

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.

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.
​

πŸ‘‰ You may need to specify element styles with an !important tag.

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.

Custom CSS on the Styling page in the Dashboard

πŸ‘‰ 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.

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

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:

General Announcement Tour Step in Chameleon

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:

#chmln .chmln-inner .chmln-body {
margin: 0px !important;
padding: 14px 20px 20px 20px !important;
}

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

#chmln .chmln-inner .chmln-body {
margin: 0 30px 30px 30px !important;
}

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

#chmln .chmln-edit-modal .chmln-inner { 
border: 3px solid #64748B !important;
}

Adjust the intensity of Step shadows:

#chmln .chmln-edit-modal .chmln-inner { 
box-shadow: 0 0 30px rgba(0,0,0,0.3)!important;
}

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

#chmln .chmln-lightbox-cell { pointer-events: none !important; }

πŸ’‘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:

@import url('https://fonts.googleapis.com/css?family=Rubik');

Set alternate fallback fonts for Mac users:

#chmln .chmln-edit-modal .chmln-inner .chmln-body .chmln-body-content { 
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
}

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

#chmln .chmln-inner .chmln-body h1 {
font-size: 32px !important;
}

Adjust line height and margin of all headings:

#chmln .chmln-inner .chmln-body h1,
#chmln .chmln-inner .chmln-body h2,
#chmln .chmln-inner .chmln-body h3,
#chmln .chmln-inner .chmln-body h4,
#chmln .chmln-inner .chmln-body h5,
#chmln .chmln-inner .chmln-body h6 {
padding: 0 !important;
margin-bottom: 16px !important;
line-height: 1.2em !important;
}

Turn blockquotes into bordered tip boxes with an accent color:

#chmln blockquote {
padding: 7px 7px !important;
background-color: #fafafa !important;
border: 1px rgba(0, 0, 0, .1)solid;
border-left: 5px solid #000 !important;
border-left-color: #2196f3 !important;
border-radius: 0px !important;
color: inherit;
font-family: inherit;
font-size: inherit;
text-shadow: none;
font-style: inherit;
margin: 20px 0 !important;
font-size: 92%;
}

Add a wider margin between paragraphs:

#chmln .chmln-body p {
margin: 0.8em !important;
}

Remove the margin of a step's last paragraph:

#chmln .chmln-body p:last-child {
margin-bottom: 0 !important;
}

Adjust paragraph line heights:

#chmln .chmln-inner .chmln-body-content p { 
line-height: 2em !important;
}

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

#chmln .chmln-inner .chmln-body-content li > p { 
margin : 0 !important;
}

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

#chmln * .chmln-body a {
font-weight: 600 !important;
}

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

#chmln .chmln-body a:link, 
#chmln .chmln-body a:visited {
color: #0099ff !important;
text-decoration: none !important;
}

Hide link underline on hover:

#chmln .chmln-body a:hover {
color: #000 !important;
text-decoration: none !important;
}

Display the Step media as a centered square icon:

.chmln-edit-modal .chmln-step-media img { 
margin-top: 30px !important; width: 50px !important; height: 50px !important;
}

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

#chmln .chmln-edit-modal img {
max-width: 100% !important;
height: auto !important;
}

Adjust the spacing between media and body components

#chmln .chmln-inner .chmln-media-body {
justify-content: center;
}


​

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

#chmln .chmln-step-embed {
padding: 2em !important;
}

Adjust the padding and opacity of the progress indicator:

#chmln .chmln-progress .chmln-progress-breadcrumbs {
margin: 3px !important;
width: 7px !important;
height: 7px !important;
opacity: 0.5 !important;
}

Set the color and size of progress indicator breadcrumbs:

#chmln .chmln-progress .chmln-progress-breadcrumbs {
background: #ebf0f3 !important;
width: 4px !important;
height: 4px !important;
margin: 4px !important;
}

Adjust dismiss padding:

#chmln .chmln-close {
padding: 20px !important;
}

Customize dismiss icon fill color:

#chmln .chmln-edit-modal .chmln-inner .chmln-close svg.chmln-close-icon path {
fill: #606266 !important;
}

Adjust the position of an outside right dismiss button:

#chmln .chmln-close {
right: -28px !important;
left: auto !important;
top: -24px !important;
}

Remove outside dismiss icon background:

#chmln .chmln-close {
background-color: transparent !important;
box-shadow: none !important;
}

Adjust dismiss text size and weight:

#chmln .chmln-close.chmln-close-text {
font-size: 12px !important;
font-weight: bold !important;
}

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:

#chmln .chmln-edit-modal .chmln-action {
border-radius: 20px !important;
}

Set custom colors for button default and hover states:

#chmln button.chmln-action  {
background: #0099ff !important;
border: 1px solid #0099ff !important;
padding: 8px 22px 8px 22px !important;
color: #ffffff !important;
border-radius: 3px !important;
}
#chmln button.chmln-action:hover {
background: #66ccff !important;
border: 1px solid #66ccff !important;
}

Increase button height:

#chmln .chmln-cta .chmln-action {
padding: 5px 5px 8px 5px !important;
}

Make buttons shorter and wider:

#chmln .chmln-cta .chmln-action {
padding: 0 25px 0 25px!important;
}

Change button text and border color on hover:

#chmln button.chmln-action:hover  {
color: #66ccff !important;
border: 1px solid #66ccff !important;
}

Force button text to uppercase:

#chmln .chmln-cta .chmln-action {
text-transform: uppercase !important;
}

Apply shadow to button on hover:

#chmln .chmln-cta .chmln-action:hover {
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
}

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:

#chmln .chmln-edit-modal .chmln-inner *:focus {
box-shadow: 0 0 0 4px #f62020 !important
}

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!

Did this answer your question?