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)

You can adjust custom CSS for your Chameleon account on the Styling page.

Note: Custom CSS will take precedence for any other point-and-click styling changes you make from the Chameleon Editor directly.

You can add custom CSS for your account in the 'Account-wide CSS' -- this will apply to all of your Experiences, although you can leverage selectors to target only specific Experiences or components.

You can click "Edit in Builder" to open the Builder and add the Custom CSS there. The benefit is that you'll be able to preview your changes for an example Experience directly. Alternatively you can use the "Quick Edit" option to make changes without a preview.

If you'd like to apply custom CSS to only a specific Experience then we recommend doing so from the Builder, as explained here.


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.

You can also adjust this directly in the Builder, which will give you a live preview of your changes:

When previewing your changes your expected style should show up; if not, then something is incorrect in the custom CSS.

You can also adjust the custom CSS directly from the dashboard page using the "Quick edit" option.

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.

Add Custom CSS on a Step/Experience level

If you would like to add CSS rules only for one step in particular, you can do so from the Control Panel by clicking "</> Custom CSS". Then add in custom CSS rules to only apply on the step you are editing.

Clicking "Download Step CSS" will download a file that contains all the CSS applied to the Step, including any defaults set by Chameleon.

Once you have added any CSS here, it will display in the "Experience-specific CSS" list at the bottom of the CSS section on the Styling page. Here you can review all the individual CSS you have added and make any "Quick edits" as necessary.

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?