Using Custom CSS to style Launchers

Use Custom CSS to change the styling of your Launcher to perfectly match your brand.

Pulkit Agrawal avatar
Written by Pulkit Agrawal
Updated over a week ago

While Chameleon offers many point-and-click styling options, you can also leverage Custom CSS to fine-tune the styling of all your Chameleon Experiences. With Launchers, you can adjust the different components, such as the Empty State, or the Progress bar component.

👉 You can adjust custom CSS for your account on the Styling page, in the Dashboard, or using the Builder, at a State level.


Below you'll find all the classes and options available to adjust with Launchers:

  • 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 the 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

  • Adjusting the Progress bar styling: .chmln-progress-bar

  • Adjusting the 'Welcome State': .chmln-list-welcome-content

  • Adjusting the 'Empty State': .chmln-list-empty-content

🎯 To see how to easily find the ID of your Launcher, read this article.


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

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

Customize the background color of the Launcher widget:

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

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

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
}

Increase the spacing and size of items in your Launcher and highlight each one separately.

.chmln-list-item-content {
background: #FFF !important;
padding: 15px !important;
border-radius: 10px !important;
}

.chmln-list-items li {
margin-bottom: 10px !important;
}

#chmln .chmln-list-items .chmln-list-item .chmln-list-item-content .chmln-list-item-title div {
line-height: 25px !important;
margin-bottom: 10px !important;
}

#chmln .chmln-list-items .chmln-list-item .chmln-list-item-description {
line-height: 20px !important;
font-size: 14px !important;
}

.chmln-list-trigger {
right: 10px !important;
}

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

Add an arrow to the right of item titles when hovered:

#chmln .chmln-list-item-content {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
#chmln .chmln-list-item-content:hover::after {
content: '';
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
#chmln .chmln-list-item-content:hover::after {
content: '➔';
visibility: visible;
opacity: 1;
}

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

Strikethrough completed checklist items:

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

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

Adjust the opacity of the progress bar:

#chmln .chmln-list .chmln-progress-bar {
opacity: 0.5 !important;
}

Add a border to the progress bar positioned in the middle:

#chmln .chmln-list .chmln-list-progress-bar-container-middle 
.chmln-progress-bar {
border: 1opx solid rgb(246, 194, 62) !important;
}

Change the color of the progress bar percentage:

#chmln .chmln-list .chmln-list-progress-bar-container-middle .chmln-list-progress-bar-percentage-label{
color: red! important;
}

Adjust the size and color of the progress bar in the Widget:

#chmln .chmln-list .chmln-list-trigger-progressbar-circle .chmln-list-trigger-progressbar-circle-border {
border:10px solid red! important;
}


With each Launcher you create you can also apply CSS styling to its 'Welcome State' - a different view of the Launcher for the first time a user sees it.

Below are the 'Welcome State' selectors you can style with CSS in applied examples:

Add a background color to the title:

#chmln .chmln-list .chmln-welcome 
.chmln-title {
background-color: green;
}

Change the size of the dismiss icon:

#chmln .chmln-list .chmln-welcome 
.chmln-close {
width: 10px !important;
height: 10px !important;
}

Adjust the opacity, size, and margins of the media:

#chmln .chmln-list .chmln-welcome 
.chmln-list-media {
opacity: 0.5 !important;
margin: 3px !important;
width: 200px !important;
height: 200px !important;
}

Adjust the line height of your body content:

#chmln .chmln-list .chmln-welcome 
.chmln-list-welcome-content {
line-height: 2em !important;
}

Set the Primary button text to uppercase:

#chmln .chmln-list .chmln-welcome
.chmln-list-welcome-cta {
text-transform: uppercase !important;
}


You can also apply CSS styling to any Launcher 'Empty State' - a view of the Launcher appearing when all items have been checked by the user.

Below are the 'Empty State' selectors you can style with CSS in applied examples:

Change the Title's size:

#chmln .chmln-list .chmln-empty 
.chmln-title {
font-size: 32px !important;
}

Add a background color to your media - with a transparent background:

#chmln .chmln-list .chmln-empty 
.chmln-list-media {
background-color: red;
}

Adjust the margins of your body content:

#chmln .chmln-list .chmln-empty 
.chmln-list-empty-content {
margin: 0 20px 20px 20px !important;
}

These are a couple of examples of visual changes you can apply to your Launcher components. You can view more examples with specific Experience selectors here.

Did this answer your question?