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