For an overview of how to use custom CSS to style your Chameleon experiences, please read this article first.

You can use custom CSS (by adding it within the Styling section) to adjust the design of your Launchers. 

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

The classes and options available:

  • Target a specific Launcher by prefixing selectors with Launcher ID*: chmln-list-{Launcher ID}, or you can target all Launchers using the class: chmln-list .
  • Adjusting the Menu styling (e.g. background color, corner radius): .chmln-list
  • Adjusting the text within the Menu title: .chmln-list-title. Depending on whether there is markdown present in your title, you may want to further specify elements within the title (e.g. .chmln-list-title h4 ).
  • Adjusting the Menu dismiss: .chmln-list-close
  • Adjusting the overall styling of a Tour item: .chmln-list-campaign
  • Adjusting the styling of a particular Tour in the Launcher: .chmln-list-campaign[data-id="{Tour ID}"] .
  • Adjusting the text for the Tours titles: .chmln-list-campaign-title
  • Adjusting the text for the Tours descriptions: .chmln-list-campaign-description)
  • Adding or removing Search bar .chmln-list-search 
  • Adjusting the checkmark style for the checklist (within the Menu): .chmln-list-checkmark 
  • Adjusting the Widget styling: .chmln-list-trigger)

*Finding the ID of a Launcher

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

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

Example custom CSS

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

#chmln .chmln-list .chmln-list-top .chmln-list-title {
  /* set font size within Launcher title */
  font-size: 14pt !important;
#chmln .chmln-list .chmln-list-top .chmln-list-title > * {
  /* set font size/color within Launcher title, including any markdown elements */
  font-size: 14pt !important;
  color: green !important;
#chmln .chmln-list .chmln-list-campaign:hover {
  /* set hover styling for Tour items within Launchers */
  background-color: pink !important;
#chmln .chmln-list .chmln-list-campaign .chmln-list-campaign-title {
  /* set font size/color for Tour item titles within Launchers */
  font-size: 12pt !important;
  color: blue !important;
#chmln .chmln-list .chmln-list-campaign .chmln-list-campaign-description {
  /* set font size/color for Tour item descriptions within Launchers */
  font-size: 11pt !important;
  color: pink !important;

Some times you may want to create styles specifically for only one Launcher.  Below are example CSS selectors for a specific Launcher.

#chmln .chmln-list-container.chmln-list-[Insert Launcher id here] .chmln-list-item .chmln-list-item-description { 
  display: none
/*NOTE: Replace the [Insert launcher id here] with the Launcher id of the Step you want to target.*/
Did this answer your question?