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 Chameleon account on the Styling page, in the Dashboard, or using the Builder, at a State level.


Quick access


List of Launchers selectors

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.


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

Strikethrough completed checklist items:

#chmln .chmln-list .chmln-list-item.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;
}

Launcher progress bar styling

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


Launcher 'Welcome State' styling

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


Launcher 'Empty State' Styling

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.


Discover more...

Did this answer your question?