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 Standard 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;
}
Did this answer your question?