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.

List of Launchers selectors

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.

Examples

General CSS for all Launchers

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;
}


Targeting a single Launcher

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

Launcher position styling

Fix the Launcher to the top right of the screen when it is open:

.chmln-list.chmln-list-open {
position: fixed !important;
top: 72px !important;
right: 0 !important;
padding: 16px !important;
height: 300px !important;
}

Fix the Launcher to the top left of the screen when it is open:

.chmln-list.chmln-list-open {
position: fixed !important;
top: 72px !important;
left: 0 !important;
padding: 16px !important;
height: 300px !important;
}

Launcher widget styling

Customize the background color of the Launcher widget:

.chmln-list-trigger.chmln-list-trigger-icon {
background-color: #47525D !important;
}

Move Launcher widget position to the top right of the page:

.chmln-list-trigger.chmln-list-trigger-icon {
position: fixed !important;
width: 24px !important;
height: 24px !important;
top: 24px !important;
right: 130px !important;
}

Hide the Launcher lightbulb icon:

.chmln-list-trigger-icon-lightbulb {
display: none !important;
}

Launcher list styling

Adjust Launcher list shadow:

#chmln .chmln-list-container .chmln-list {
box-shadow:0 4px 8px 0 rgb(0,0,0,.24); !important
}

Round Launcher list corners:

#chmln .chmln-list-container .chmln-list {
border-radius:15px
}

Launcher item title styling

Adjust the line height and font size of Launcher item titles:

#chmln ul.chmln-list-items li.chmln-list-item .chmln-list-item-title,
#chmln ul.chmln-list-items li.chmln-list-item .chmln-list-item-title p {
line-height: 20px !important;
font-size: 14px !important;
}

Change Launcher item title color on hover:

#chmln .chmln-list .chmln-list-item:hover .chmln-list-item-title {
color: #0074E0 !important;
}

Decrease spacing between Launcher items:

#chmln .chmln-list .chmln-list-item .chmln-list-item-title {
#margin-bottom: 0 !important;
#padding-bottom: 0 !important;
}

Launcher item description styling

Hide Launcher item descriptions:

#chmln li.chmln-list-item .chmln-list-item-description {
display:none;
}

Change Launcher item description font size:

#chmln ul.chmln-list-items li.chmln-list-item .chmln-list-item-description {
font-size:11px
}

Style Launcher item item description text:

.chmln-list-items .chmln-list-item .chmln-list-item-description {
font-style: normal !important;
font-weight: normal !important;
font-size: 12px !important;
line-height: 18px !important;
color: #47525D !important;
}

Launcher checklist styling

Strike through completed checklist items:

#chmln .chmln-list .chmln-list-item.chmln-list-item-completed .chmln-list-item-title {
text-decoration: line-through !important;
}

Reduce opacity of completed checklist items:

#chmln .chmln-list .chmln-list-item.chmln-list-item-completed .chmln-list-item-title {
opacity: 0.5 !important;
}

Hide checklist checkbox icon:

.chmln-list-item.chmln-list-item-completed .chmln-list-checkmark svg,
.chmln-list-item .chmln-list-checkmark svg {
display: none !important;
}

Adjust size and spacing:

.chmln-list-item.chmln-list-item-completed .chmln-list-checkmark,
.chmln-list-item .chmln-list-checkmark {
width: 18px !important;
height: 18px !important;
margin-top: 2px !important;
margin-right: 12px !important;
}

Override existing checkmark icons (completed and default states):

.chmln-list-item.chmln-list-item-completed .chmln-list-checkmark {
background-image: url(http://cdn.loom.com/assets/chameleon/checkbox.svg) !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
.chmln-list-item .chmln-list-checkmark {
background-image: url(http://cdn.loom.com/assets/chameleon/empty.svg) !important;
background-repeat: no-repeat !important;
background-position: center !important;
}

Customize checkmark completed fill color:

#chmln .chmln-list .chmln-list-item.chmln-list-item-completed svg > path {
fill: #00CFBD !important;
}

👉 Explore some examples for styling Experiences using Custom CSS


Discover more...

Did this answer your question?