While Chameleon offers many point-and-click styling options, you can also leverage custom CSS to more finely-tune the styling of your Chameleon Experiences, including Tours, Launchers, Surveys, etc.  

👉 Explore the styling options offered by Chameleon

You can input your CSS within the Chameleon Builder by navigating to the Styling section. 

Note: If you are on a legacy plan, custom CSS may not be available on your account. You can get access to custom CSS by upgrading to our Startup plan here

List of selectors

Below are example CSS selectors for Chameleon Tour steps and their components. You can use these to help guide which elements to target.

We recommend you test adding your own style settings in all cases. 

/* New step editor styles*/
#chmln .chmln-edit-modal .chmln-inner .chmln-header .chmln-close{ /* the close button */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-media-body .chmln-step-media { /* the style of the image or video */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-body .chmln-body-content { /* the style of the body content */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-body .chmln-body-content h4 { /* the style of a particular header size in the body */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer { /* the style of the footer area at the bottom of the step */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-progress{ /* the style of the progress bar */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-progress .chmln-progress-dot{ /* the style of the progress bar dot*/ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-progress .chmln-progress-text{ /* the style of the progress bar text*/ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-cta-region button.chmln-action{ /* the style of the buttons */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-cta-region button.chmln-button-primary { /* the style of all primary buttons */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-cta-region button.chmln-button-secondary { /* the style of all secondary buttons */ }
#chmln .chmln-edit-modal .chmln-lightbox-highlight .chmln-lightbox-opening-row .chmln-lightbox-opening{ /* the style of the shroud highlight (a CSS shadow) */
box-shadow: 0 0 100px 2000px rgba(0,0,0,0.4) !important; }
/*NOTE: box-shadow sizes over 2000px can be unpredictable on Safari and Firefox*/


Sometimes you may want to create styles specifically for one Tour or a single step.

👉 Learn how to find the ID of your Experience

You can then create custom CSS to target this ID. For example, below are example CSS selectors for a specific step.

#chmln .chmln-edit-modal.chmln-step-[STEP-ID] .chmln-inner .chmln-body .chmln-body-content { 
  font-family: 'Helvetica Neue', sans-serif !important;
}
/*NOTE: Replace the [STEP-ID] with the Step id of the Step you want to target.*/

Example styling

Below are examples of ways you can customize your Steps, by altering the styling associated with the various components. 

You can also create Templates with your specified styling that others can then use whenever they create new Steps.

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

Links

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!


Learn more

Did this answer your question?