What can custom CSS do?

You can apply CSS (stylesheets that define your styling) to Chameleon Experiences to ensure that you have granular control over all styling elements. You can use this to more specifically match the styling of Experiences to your application. 

While many common styling attributes (such as color, fonts, text, etc.) are customizable from our point-and-click styling editor, 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)

To do this, you can add custom CSS styling within the Styling section of the Chameleon Editor. 

Note: If you are using Custom CSS (if anything is present in the input field) this will take precedence for any other point-and-click styling changes you make from the Chameleon Editor directly.

How to use custom CSS

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. 

See the list of selectors used for different Experiences:

1. Identify the Chameleon Elements to target

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

2. Edit and test the CSS in the browser

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. 

3. Add styles to CSS input field

Once you're satisfied, you can then add this code into the CSS input field within the Styling section.

💡 Tip - The example modal to the right of the Chameleon Builder previews your current style, and should update automatically. If your expected changes do not appear, review your CSS to ensure it's targeting the correct element.

Variable Custom CSS

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 your use case, there's also the option of using our custom helpers API to extend the merge tags with custom code.

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

Example styling

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

The specific examples below are directed to Tours. However, you can apply the same logic to other types of Chameleon Experiences, by adjusting the CSS selectors accordingly.

Note: For Tours, you can also create Templates with your specified styling that others can then use whenever they create new Experiences.

General step

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

A Step like this can be easily created and styled using the point-and-click adjustments available within the Chameleon Editor.

Padding

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;
}

Margin

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 20px 20px 20px !important;
}

Borders

Customize a step's border; useful for setting the border to a lighter color on steps with dark backgrounds:

#chmln .chmln-edit-modal .chmln-inner { 
border: 1px solid #ECEEF4 !important;
}

Shadows

Adjust the intensity of step shadows:

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

Fonts

You can use your existing fonts and font family easily by simply adding the correct names into 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;
}

Headers

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;
}

Blockquotes

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%;
}

Paragraphs

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;
}

Media

Display 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;
}


Embeds

Adjust padding between the step edge and embed content:

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

Progress Indicator

Change the color of progress indicator text (e.g. "1 of 3"):

#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-progress .chmln-progress-text {
color: #ccc !important;
}

Adjust padding and opacity of progress indicator breadcrumbs:

#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-progress .chmln-progress-dot {
margin: 3px !important;
width: 7px !important;
height: 7px !important;
opacity: 0.5 !important;
}

Set the active progress breadcrumb to 100% opacity:

#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-progress  .chmln-progress-dot.chmln-progress-dot-active {
opacity: 1 !important;
}

Set the color and size of progress indicator breadcrumbs:

#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-progress .chmln-progress-dot {
background: #ebf0f3 !important;
width: 4px !important;
height: 4px !important;
margin: 4px !important;
}

Dismiss component

You can use the Dismiss to let users exit your Tour, or snooze/pause / defer it and see it at a later time. Learn how to configure Dismiss functionality here. You can style the Dismiss icon or text in many ways, for example:

Reduce dismiss padding:

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

Customize dismiss icon fill color:

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

Edit dismiss icon size (make smaller):

#chmln .chmln-close-icon {
width: 10px !important;
height: 10px !important;
}

Adjust the position of an outside right dismiss button:

#chmln .chmln-edit-modal.chmln-dismiss-position-outside_right .chmln-close {
right: -28px !important;
left: auto !important;
top: -24px !important;
}

Remove outside left dismiss icon background:

#chmln .chmln-edit-modal.chmln-dismiss-position-outside_left .chmln-close {
background-color: transparent !important;
box-shadow: none !important;
}

Adjust dismiss text size and weight:

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

Buttons

You can do a lot to ensure your buttons are styled and behave exactly as other buttons within your interface. Below is a list of examples.

Align button container left:

#chmln .chmln-edit-modal .chmln-cta {
flex-grow: initial !important;
justify-content: flex-start !important;
}

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-edit-modal .chmln-cta .chmln-action {
padding: 5px 5px 8px 5px !important;
}

Make buttons shorter and wider:

#chmln .chmln-edit-modal .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;
}

Adjust border on the active button:

#chmln button.chmln-action:active  {
border: 1px solid #003366; !important;
}

Force button text to uppercase:

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

Apply shadow to button on hover:

#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-cta-region button.chmln-action:hover {
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
}

Change color of primary or secondary buttons:

#chmln .chmln-edit-modal .chmln-cta .chmln-button-primary {
background-color: pink !important;
}
#chmln .chmln-edit-modal .chmln-cta .chmln-button-secondary {
background-color: blue !important;
}

Feedback

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!


Discover more

Did this answer your question?