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

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;

Sometimes 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.*/

👉 Explore some examples for styling Experiences using Custom CSS

Discover more...

Did this answer your question?