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-listAdjusting 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-closeAdjusting 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-searchAdjusting the checkmark style for the checklist (within the Menu):
.chmln-list-checkmarkAdjusting the Widget styling:
.chmln-list-triggerAdjusting the Progress bar styling:
.chmln-progress-barAdjusting the 'Welcome State':
.chmln-list-welcome-contentAdjusting 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.