Custom CSS allows designers to fine-tune the design of your Chameleon Experiences to match your product's brand. For an overview of how you can use custom CSS with Chameleon please read this article first

Note: this may not be available on your plan. You can get access to custom CSS by upgrading to our Startup plan here

Add your custom CSS code within the Styling section of the Chameleon Editor. 

The classes and options available:

  • Target a specific Survey by prefixing selectors with Survey ID*: chmln-campaign-{Survey ID} , or you can target all Surveys using the class: chmln-survey .
  • Target a specific type of Survey by prefixing selectors with .chmln-survey-{type}. For example, to target NPS surveys, prefix selectors with .chmln-survey-nps.
  • Adjusting the close button: .chmln-close 
  • Adjusting the media container (image or video): .chmln-step-media 
  • Adjusting the body content: .chmln-body-content 
  • Adjusting a header in the body content (e.g. h4 ): .chmln-body-content h4  
  • Adjusting the footer of a step: .chmln-footer  
  • Adjusting the button styles: button.chmln-action
  • Adjusting the lightbox opening: .chmln-lightbox-opening  

*Finding the ID of a Survey

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

Hover over the <li id="chmln-campaign-XXXXXXXX"  row which corresponds to the Survey above and then use the XXXXXXXXX  as the ID.

Example custom CSS

Here is an example of a custom stylesheet crafted for all the Surveys 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;
/*NOTE: box-shadow sizes over 2000px can be unpredictable on Safari and Firefox*/

Did this answer your question?