All Collections
Creating Experiences
Design
Using Custom CSS
Using Custom CSS to style Microsurveys
Using Custom CSS to style Microsurveys

Understand how you can use CSS to tweak the styling and format of your Microsurveys

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

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, Microsurveys, etc.

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

  • .chmln-survey -- target all Microsurveys

  • .chmln-campaign-{survey ID} -- target a specific Microsurvey, using the Microsurvey ID

  • .chmln-survey-{type} -- target a specific Microsurvey type (replacing type with, for example, nps, will target all NPS Microsurveys.)

  • .chmln-close -- target the close button

  • .chmln-edit-modal -- target the whole Microsurvey modal component

  • .chmln-step-media -- target the media container (image or video)

  • .chmln-body-content -- target the body content

  • .chmln-body-content {header element} -- target a specific header in the body content (replacing header element with the desired header element: h1, h2, h3, h4, etc.)

  • .chmln-footer -- target the footer

  • .chmln-lightbox-opening -- target the lightbox opening

  • .chmln-input_text-container -- target the input field

  • .chmln-survey-buttons -- target the Microsurvey buttons area

  • button.chmln-action -- target all buttons

Finding the ID of a Microsurvey

To find the ID of a Microsurvey, use your Browser Console. Right-click the relevant Microsurvey in question and then click 'Inspect element'. 

Hover over the <div id="chmln-campaign-XXXXXXXX"  element, which corresponds to the Microsurvey above; and then use the XXXXXXXXX  as the ID.

Example custom CSS

Here is an example of a custom stylesheet crafted for all the Microsurveys on an account:

#chmln .chmln-survey .chmln-close svg path {
  fill: black !important;
}
#chmln .chmln-survey .chmln-step-media {
  padding: 10px !important;
}
#chmln .chmln-survey .chmln-body-content {
  color: pink !important;
}
#chmln .chmln-survey .chmln-body-content h4 {
  font-family: sans-serif !important;
}
#chmln .chmln-survey .chmln-footer {
  margin-top: 10px !important;
}
#chmln .chmln-survey button.chmln-action {
  background-color: white !important;
}
#chmln .chmln-survey .chmln-lightbox-highlight .chmln-lightbox-opening {
  box-shadow: 0 0 100px 2000px rgba(0,0,0,0.4) !important;
}



Know more


Did this answer your question?