Chameleon is built to blend natively into your product while standing out from your interface to ensure your guidance gets delivered. Check out the Styling overview to learn how to fully control the look of your Experiences in the Dashboard and Builder.
With custom CSS you can take that to the next level and apply specific customizations to your entire account or certain Experiences. This is how you can ensure your brand style is accurately represented in any Experience you deliver.
ℹ Chameleon currently only supports CSS at this time. This excludes pre-processor versions of CSS such as SASS, SCSS, and LESS.
Availability & Usage
🔐 Available for all plans
📍 Ready to enhance your Tours, Tooltips, Embeddables, Microsurveys, Launchers
You can apply CSS (stylesheets that define your styling) to Chameleon Experiences for granular control over all styling elements. Use custom CSS rules to match the styling of Experiences to your application to the pixel.
While many common styling attributes (such as color, fonts, text, etc.) are easily customizable from the Builder, you may want further control over items such as:
Line spacing
Borders and shadows
Positioning of certain components (e.g. dismiss cross)
Color gradients
Font stacks (learn more here)
Custom CSS works by targeting specific elements of Chameleon Experiences to change their styling. To use this, you need to first identify the Chameleon element you would like to target, then add the specific styling in the custom CSS field.
ℹ Custom CSS will take precedence for any other point-and-click styling changes you make using the Chameleon Builder.
Full Selector list
Full Selector list
# Chameleon CSS Selector Reference
This comprehensive reference contains all CSS selectors for styling Chameleon experiences. Use this guide to customize Tours, Tooltips, Microsurveys, Launchers, and Embeddables.
## General Information
- Chameleon supports standard CSS (not preprocessors like SASS, SCSS, LESS)
- Custom CSS takes precedence over point-and-click styling changes
- Use `!important` to ensure styles are applied
- Test styles in browser developer tools before implementing
- Box-shadow sizes over 2000px can be unpredictable on Safari and Firefox
## Experience Types
### Tours
**General Tour Selectors:**
```css
/* Step container */
.chmln-edit-modal .chmln-inner { }
/* Close button */
.chmln-edit-modal .chmln-inner .chmln-header .chmln-close { }
/* Media container */
.chmln-edit-modal .chmln-inner .chmln-media-body .chmln-step-media { }
/* Body content */
.chmln-edit-modal .chmln-inner .chmln-body .chmln-body-content { }
/* Body title */
.chmln-edit-modal .chmln-inner .chmln-body .chmln-body-content h4 { }
/* Footer area */
.chmln-edit-modal .chmln-inner .chmln-footer { }
/* Progress bar */
.chmln-edit-modal .chmln-inner .chmln-progress { }
/* Progress dots */
.chmln-edit-modal .chmln-inner .chmln-progress .chmln-progress-dot { }
/* Progress text */
.chmln-edit-modal .chmln-inner .chmln-progress .chmln-progress-text { }
/* All action buttons */
.chmln-edit-modal .chmln-inner .chmln-cta-region button.chmln-action { }
/* Primary button */
.chmln-edit-modal .chmln-inner .chmln-cta-region button.chmln-button-primary { }
/* Secondary button */
.chmln-edit-modal .chmln-inner .chmln-cta-region button.chmln-button-secondary { }
/* Lightbox highlight */
.chmln-edit-modal .chmln-lightbox-highlight .chmln-lightbox-opening-row .chmln-lightbox-opening {
box-shadow: 0 0 100px 2000px rgba(0,0,0,0.4) !important;
}
```
**Specific Tour/Step Targeting:**
```css
/* Target specific step by ID */
.chmln-edit-modal.chmln-step-[STEP-ID] .chmln-inner .chmln-body .chmln-body-content {
font-family: 'Helvetica Neue', sans-serif !important;
}
/* Target entire tour by Experience ID */
.chmln-experience-[EXPERIENCE-ID] { }
/* RTL direction for specific step */
.chmln-step-[Step ID] .chmln-inner {
direction: rtl !important;
}
/* Increase pointer size */
.chmln-step-[Step ID] svg.chmln-pointer-highlight {
width: 50px;
height: 50px;
top: 15px;
left: -50px;
}
```
### Tooltips
**General Tooltip Selectors:**
```css
/* Tooltip title */
.chmln-edit-modal .chmln-inner .chmln-header .chmln-title { }
/* Media container */
.chmln-edit-modal .chmln-inner .chmln-media-body .chmln-step-media { }
/* Body container */
.chmln-edit-modal .chmln-inner .chmln-body .chmln-body-container { }
/* Body title */
.chmln-edit-modal .chmln-inner .chmln-body .chmln-body-container h4 { }
/* Footer area */
.chmln-edit-modal .chmln-inner .chmln-footer { }
/* Action buttons */
.chmln-edit-modal .chmln-inner .chmln-footer .chmln-cta-region button.chmln-action { }
/* Primary button */
.chmln-edit-modal .chmln-inner .chmln-footer .chmln-cta-region button.chmln-button-primary { }
/* Secondary button */
.chmln-edit-modal .chmln-inner .chmln-footer .chmln-cta-region button.chmln-button-secondary { }
/* Lightbox highlight */
.chmln-edit-modal .chmln-lightbox-highlight .chmln-lightbox-opening-row .chmln-lightbox-opening {
box-shadow: 0 0 100px 2000px rgba(0,0,0,0.4) !important;
}
/* Hotspot selector */
.chmln-tooltip-<tooltip-id> .chmln-hotspot-spot { }
/* Tooltip pointer */
.chmln-edit-modal .chmln-inner .chmln-pointer-highlight { }
```
### Microsurveys
**General Microsurvey Selectors:**
```css
/* Target all microsurveys */
.chmln-survey { }
/* Target specific microsurvey by ID */
.chmln-campaign-{survey ID} { }
/* Target specific microsurvey type (e.g., nps) */
.chmln-survey-{type} { }
/* Close button */
.chmln-close { }
/* Whole microsurvey modal */
.chmln-edit-modal { }
/* Media container */
.chmln-step-media { }
/* Body content */
.chmln-body-content { }
/* Specific header elements */
.chmln-body-content h1 { }
.chmln-body-content h2 { }
.chmln-body-content h3 { }
.chmln-body-content h4 { }
/* Footer */
.chmln-footer { }
/* Lightbox opening */
.chmln-lightbox-opening { }
/* Input field */
.chmln-input_text-container { }
/* Button area */
.chmln-survey-buttons { }
/* All buttons */
button.chmln-action { }
```
**Example Microsurvey CSS:**
```css
.chmln-survey .chmln-close svg path {
fill: black !important;
}
.chmln-survey .chmln-step-media {
padding: 10px !important;
}
.chmln-survey .chmln-body-content {
color: pink !important;
}
.chmln-survey .chmln-body-content h4 {
font-family: sans-serif !important;
}
.chmln-survey .chmln-footer {
margin-top: 10px !important;
}
.chmln-survey button.chmln-action {
background-color: white !important;
}
.chmln-survey .chmln-lightbox-highlight .chmln-lightbox-opening {
box-shadow: 0 0 100px 2000px rgba(0,0,0,0.4) !important;
}
```
### Launchers
**General Launcher Selectors:**
```css
/* Target all launchers */
.chmln-list { }
/* Target specific launcher by ID */
.chmln-list-{Launcher ID} { }
/* Menu styling */
.chmln-list { }
/* Menu title */
.chmln-list-title { }
/* Menu title with specific elements */
.chmln-list-title h4 { }
/* Menu dismiss */
.chmln-list-close { }
/* Tour item styling */
.chmln-list-campaign { }
/* Specific tour in launcher */
.chmln-list-campaign[data-id="{Tour ID}"] { }
/* Tour titles */
.chmln-list-campaign-title { }
/* Tour descriptions */
.chmln-list-campaign-description { }
/* Search bar */
.chmln-list-search { }
/* Checkmark style */
.chmln-list-checkmark { }
/* Widget styling */
.chmln-list-trigger { }
/* Progress bar */
.chmln-progress-bar { }
/* Welcome state */
.chmln-list-welcome-content { }
/* Empty state */
.chmln-list-empty-content { }
```
**Launcher Position Styling:**
```css
/* Fix launcher to top right when open */
.chmln-list.chmln-list-open {
position: fixed !important;
top: 72px !important;
right: 0 !important;
padding: 16px !important;
height: 300px !important;
}
/* Fix launcher to top left when open */
.chmln-list.chmln-list-open {
position: fixed !important;
top: 72px !important;
left: 0 !important;
padding: 16px !important;
height: 300px !important;
}
```
**Launcher Widget Styling:**
```css
/* Customize widget background */
.chmln-list-trigger.chmln-list-trigger-icon {
background-color: #47525D !important;
}
/* Move widget position */
.chmln-list-trigger.chmln-list-trigger-icon {
position: fixed !important;
width: 24px !important;
height: 24px !important;
top: 24px !important;
right: 130px !important;
}
/* Hide lightbulb icon */
.chmln-list-trigger-icon-lightbulb {
display: none !important;
}
```
**Launcher List Styling:**
```css
/* Adjust shadow */
.chmln-list-container .chmln-list {
box-shadow: 0 4px 8px 0 rgb(0,0,0,.24) !important;
}
/* Round corners */
.chmln-list-container .chmln-list {
border-radius: 15px;
}
```
**Launcher Item Styling:**
```css
/* Item content styling */
.chmln-list-item-content {
background: #FFF !important;
padding: 15px !important;
border-radius: 10px !important;
}
/* Item spacing */
.chmln-list-items li {
margin-bottom: 10px !important;
}
/* Item title styling */
.chmln-list-items .chmln-list-item .chmln-list-item-content .chmln-list-item-title {
line-height: 25px !important;
margin-bottom: 10px !important;
}
/* Item description styling */
.chmln-list-items .chmln-list-item .chmln-list-item-description {
line-height: 20px !important;
font-size: 14px !important;
}
/* Hide item descriptions */
li.chmln-list-item .chmln-list-item-description {
display: none;
}
/* Title color on hover */
.chmln-list .chmln-list-item:hover .chmln-list-item-title {
color: #0074E0 !important;
}
```
**Launcher Checklist Styling:**
```css
/* Strikethrough completed items */
.chmln-list .chmln-list-item-completed .chmln-list-item-title {
text-decoration: line-through !important;
}
/* Reduce opacity of completed items */
.chmln-list .chmln-list-item .chmln-list-item-completed .chmln-list-item-title {
opacity: 0.5 !important;
}
/* Hide checkbox icon */
.chmln-list-item .chmln-list-item-completed .chmln-list-checkmark svg,
.chmln-list-item .chmln-list-checkmark svg {
display: none !important;
}
/* Customize checkmark fill color */
.chmln-list .chmln-list-item .chmln-list-item-completed svg > path {
fill: #00CFBD !important;
}
```
**Launcher Progress Bar:**
```css
/* Adjust opacity */
.chmln-list .chmln-progress-bar {
opacity: 0.5 !important;
}
/* Add border to middle-positioned progress bar */
.chmln-list .chmln-list-progress-bar-container-middle .chmln-progress-bar {
border: 1px solid rgb(246, 194, 62) !important;
}
/* Change progress percentage color */
.chmln-list .chmln-list-progress-bar-container-middle .chmln-list-progress-bar-percentage {
color: red !important;
}
```
**Welcome State Styling:**
```css
/* Title background */
.chmln-list .chmln-welcome .chmln-title {
background-color: green;
}
/* Dismiss icon size */
.chmln-list .chmln-welcome .chmln-close {
width: 10px !important;
height: 10px !important;
}
/* Media styling */
.chmln-list .chmln-welcome .chmln-list-media {
opacity: 0.5 !important;
margin: 3px !important;
width: 200px !important;
height: 200px !important;
}
/* Body content line height */
.chmln-list .chmln-welcome .chmln-list-welcome-content {
line-height: 2em !important;
}
/* Button text uppercase */
.chmln-list .chmln-welcome .chmln-list-welcome-cta {
text-transform: uppercase !important;
}
```
**Empty State Styling:**
```css
/* Title size */
.chmln-list .chmln-empty .chmln-title {
font-size: 32px !important;
}
/* Media background */
.chmln-list .chmln-empty .chmln-list-media {
background-color: red;
}
/* Content margins */
.chmln-list .chmln-empty .chmln-list-empty-content {
margin: 0 20px 20px 20px !important;
}
```
## Common Styling Patterns
### Typography
```css
/* Headers */
.chmln-inner .chmln-body h1 {
font-size: 32px !important;
}
/* Body text */
.chmln-body p {
margin: 0.8em !important;
}
/* Links */
.chmln-body a {
font-weight: 600 !important;
color: #0099ff !important;
text-decoration: none !important;
}
/* Remove link underlines */
.chmln-body a:link,
.chmln-body a:visited {
color: #0099ff !important;
text-decoration: none !important;
}
```
### Layout & Spacing
```css
/* Padding */
.chmln-inner .chmln-body {
margin: 0px !important;
padding: 14px 20px 20px 20px !important;
}
/* Margins */
.chmln-inner .chmln-body {
margin: 0 30px 30px 30px !important;
}
```
### Borders & Shadows
```css
/* Custom border */
.chmln-edit-modal .chmln-inner {
border: 3px solid #64748B !important;
}
/* Custom shadow */
.chmln-edit-modal .chmln-inner {
box-shadow: 0 0 30px rgba(0,0,0,0.3) !important;
}
```
### Buttons
```css
/* Round button corners */
.chmln-edit-modal .chmln-action {
border-radius: 20px !important;
}
/* Custom button colors */
button.chmln-action {
background: #0099ff !important;
border: 1px solid #0099ff !important;
padding: 8px 22px 8px 22px !important;
color: #ffffff !important;
border-radius: 3px !important;
}
/* Button hover state */
button.chmln-action:hover {
background: #66ccff !important;
border: 1px solid #66ccff !important;
}
/* Button text uppercase */
.chmln-cta .chmln-action {
text-transform: uppercase !important;
}
```
### Media
```css
/* Square icon styling */
.chmln-edit-modal .chmln-step-media img {
margin-top: 30px !important;
width: 50px !important;
height: 50px !important;
}
/* Full width media */
.chmln-edit-modal img {
max-width: 100% !important;
height: auto !important;
}
```
### Progress Indicators
```css
/* Progress breadcrumbs */
.chmln-progress .chmln-progress-breadcrumbs {
margin: 3px !important;
width: 7px !important;
height: 7px !important;
opacity: 0.5 !important;
background: #ebf0f3 !important;
}
```
### Dismiss Components
```css
/* Dismiss padding */
.chmln-close {
padding: 20px !important;
}
/* Dismiss icon color */
.chmln-edit-modal .chmln-inner .chmln-close svg.chmln-close-icon path {
fill: #606266 !important;
}
/* Position outside dismiss button */
.chmln-close {
right: -28px !important;
left: auto !important;
top: -24px !important;
}
/* Remove dismiss background */
.chmln-close {
background-color: transparent !important;
box-shadow: none !important;
}
```
### Lightbox & Focus
```css
/* Enable interaction with lightbox elements */
.chmln-lightbox-cell {
pointer-events: none !important;
}
/* Custom focus styling */
.chmln-edit-modal .chmln-inner *:focus {
box-shadow: 0 0 0 4px #f62020 !important;
}
```
## Finding Element IDs
### Experience IDs
To find Experience IDs, check the URL in the Chameleon dashboard or use browser developer tools to inspect the element and look for data attributes.
### Step IDs
Use browser developer tools to inspect the step element and find the step ID in the class names or data attributes.
### Microsurvey IDs
Right-click the microsurvey, select "Inspect element", and look for `<div id="chmln-campaign-XXXXXXXX"` - use the XXXXXXXX as the ID.
## Best Practices
1. **Test First**: Always test CSS changes in browser developer tools before implementing
2. **Use !important**: Required to override Chameleon's default styles
3. **Be Specific**: Use specific selectors to avoid unintended styling conflicts
4. **Progressive Enhancement**: Start with small changes and build complexity gradually
5. **Browser Compatibility**: Test across different browsers, especially for advanced CSS features
6. **Performance**: Avoid overly complex selectors that could impact performance
## Notes
- Custom CSS takes precedence over point-and-click styling
- Changes apply immediately to live experiences
- Box-shadow sizes over 2000px can be unpredictable on Safari and Firefox
- Chameleon only supports standard CSS, not preprocessors like SASS/SCSS/LESS
- Use Chrome Developer Tools for the most accurate selector identification
You can also view the list of selectors used for different Experience types:
You can adjust the styling with custom CSS in the Dashboard, at an account level, or from the Builder, at an Experience level.
👉 In your Dashboard on the Custom CSS page, you can access the CSS Cheat Sheet to quickly find a specific class name that you can use to customize your Experiences. You can review all the available classes for all Experience types and simply copy and paste one when you need it.
Identify the selectors you want to target: use the articles from the list above or identify the CSS style properties you should use by using the Elements panel in Chrome's Developer tool to inspect elements.
We suggest that you first change the CSS locally within your browser, from within the Developer Tools so you can confirm that the observed style is as you expected.
👉 You may need to specify element styles with an !important tag.
Once you're satisfied, you can then add this code into the CSS input field within the Styling page, in the Dashboard, or directly in the Builder, to also get a live preview of your changes.
The Custom CSS tab in the Dashboard is the place to go for full styling control of any individual or group of Experiences. Your custom CSS can be added to your whole account (all Experiences), to a group of Experiences, or to specific ones.
Here you can hit the 'Quick Edit' button to go in straight away and add your custom CSS. Or, take the safe route, and 'Edit in the Builder' to get a quick preview of the changes you want to make. Once you're happy with your changes, you can apply them immediately.
👉 If you'd like to adjust the custom CSS for only one individual Step or Experience, we recommend doing so via the Builder, to give you a live preview and ensure it looks as expected.
All the custom CSS changes you're making via the Builder will also show up in the Dashboard, in the Experience-specific CSS section. You can easily go in to review and adjust the styling applied with the 'Quick edit' option or use the Builder for precise revisions.
ℹ Once you update the custom CSS it will apply immediately, including to all existing (live) Experiences.
If you'd like to adjust the custom CSS for only one individual Step or Experience, you can do it from the Builder to instantly check the results. When previewing your changes your expected style should show up; if not, then something is incorrect in the custom CSS, and you should review your rule.
Simply select the Custom CSS option from the Design section and click "Add CSS rule". Chameleon will generate a new rule and you can add your desired selectors and styling.
From the Builder, you can also hit 'Download Step CSS' to get a file that contains all the CSS applied to that Step or Experience, including any defaults set by Chameleon.
If you would like to adjust the CSS applied based on the user (or user group), for example, to change the styling based on the user's individual or company settings, our powerful merge tags can also be used in Custom CSS.
In case this is not enough for you, there's also the option of using our custom helpers API to extend the merge tags with custom code.
📩 Want to access this functionality? Speak with us so we can enable this for your account and discuss how you can best leverage it.
Below are some examples of ways you can customize your Experiences using Custom CSS to alter the styling associated with the various components.
🎯 The examples below are directed to Tours; however, you can apply the same logic to other Chameleon Experiences, by adjusting the CSS selectors accordingly.
To illustrate the impact of the various custom CSS examples below, here is a default Step, which has not been adjusted with any custom CSS:
You can easily create a Step like this by using the options available in the Builder.
Add padding, e.g. between the Step's edges and body text, pushing the Step out larger:
.chmln-inner .chmln-body {
margin: 0px !important;
padding: 14px 20px 20px 20px !important;
}
Add a margin between the Step's edges and body text, narrowing the text more within the Step:
.chmln-inner .chmln-body {
margin: 0 30px 30px 30px !important;
}
Customize a Step's border; useful for highlighting Steps on dark backgrounds:
.chmln-edit-modal .chmln-inner {
border: 3px solid #64748B !important;
}
Adjust the intensity of Step shadows:
.chmln-edit-modal .chmln-inner {
box-shadow: 0 0 30px rgba(0,0,0,0.3)!important;
}
Enable users to interact with the elements inside of Lightbox and on your page:
.chmln-lightbox-cell { pointer-events: none !important; }
💡In this case, you'll also want to drop the opacity of the Lightbox to 10%, so users can see and interact with the other elements on your page. Optionally, to ensure you're focusing users' attention on the right action, you can add a border of the same color as your Step. 😉
You can easily leverage your existing fonts and font family by adding the correct names to the Styling section. Read more here.
However, if you feel the need, you can import other brand fonts for use in custom CSS styling by including the @import call in your Chameleon custom CSS file.
For example, to make Rubik available when specified as a font-family:
@import url('https://fonts.googleapis.com/css?family=Rubik');
Set alternate fallback fonts for Mac users:
.chmln-edit-modal .chmln-inner .chmln-body .chmln-body-content {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
}
Adjust headers, such as Increasing the font size of H1s:
.chmln-inner .chmln-body h1 {
font-size: 32px !important;
}
Adjust line height and margin of all headings:
.chmln-inner .chmln-body h1,
.chmln-inner .chmln-body h2,
.chmln-inner .chmln-body h3,
.chmln-inner .chmln-body h4,
.chmln-inner .chmln-body h5,
.chmln-inner .chmln-body h6 {
padding: 0 !important;
margin-bottom: 16px !important;
line-height: 1.2em !important;
}
Turn blockquotes into bordered tip boxes with an accent color:
.chmln blockquote {
padding: 7px 7px !important;
background-color: #fafafa !important;
border: 1px rgba(0, 0, 0, .1)solid;
border-left: 5px solid #000 !important;
border-left-color: #2196f3 !important;
border-radius: 0px !important;
color: inherit;
font-family: inherit;
font-size: inherit;
text-shadow: none;
font-style: inherit;
margin: 20px 0 !important;
font-size: 92%;
}
Add a wider margin between paragraphs:
.chmln-body p {
margin: 0.8em !important;
}
Remove the margin of a step's last paragraph:
.chmln-body p:last-child {
margin-bottom: 0 !important;
}
Adjust paragraph line heights:
.chmln-inner .chmln-body-content p {
line-height: 2em !important;
}
Adjust the margins between individual items in an ordered or unordered list:
.chmln-inner .chmln-body-content li > p {
margin : 0 !important;
}
Change link styles, such as increase font-weight (bold) of links:
.chmln-body a {
font-weight: 600 !important;
}
Remove underlines from the link text, both visited and unvisited, and instead indicate a link with an accent color:
.chmln-body a:link,
.chmln-body a:visited {
color: #0099ff !important;
text-decoration: none !important;
}
Hide link underline on hover:
.chmln-body a:hover {
color: #000 !important;
text-decoration: none !important;
}
Display the Step media as a centered square icon:
.chmln-edit-modal .chmln-step-media img {
margin-top: 30px !important; width: 50px !important; height: 50px !important;
}
Force step media to 100% container width without distorting the aspect ratio:
.chmln-edit-modal img {
max-width: 100% !important;
height: auto !important;
}
Adjust the spacing between media and body components
.chmln-inner .chmln-media-body {
justify-content: center;
}
Adjust the padding between the Step edge and the embeded content:
.chmln-step-embed {
padding: 2em !important;
}
Adjust the padding and opacity of the progress indicator:
.chmln-progress .chmln-progress-breadcrumbs {
margin: 3px !important;
width: 7px !important;
height: 7px !important;
opacity: 0.5 !important;
}
Set the color and size of progress indicator breadcrumbs:
.chmln-progress .chmln-progress-breadcrumbs {
background: #ebf0f3 !important;
width: 4px !important;
height: 4px !important;
margin: 4px !important;
}
Adjust dismiss padding:
.chmln-close {
padding: 20px !important;
}
Customize dismiss icon fill color:
.chmln-edit-modal .chmln-inner .chmln-close svg.chmln-close-icon path {
fill: #606266 !important;
}
Adjust the position of an outside right dismiss button:
.chmln-close {
right: -28px !important;
left: auto !important;
top: -24px !important;
}
Remove the outside dismiss icon background:
.chmln-close {
background-color: transparent !important;
box-shadow: none !important;
}
Adjust dismiss text size and weight:
.chmln-close.chmln-close-text {
font-size: 12px !important;
font-weight: bold !important;
}
You can do a lot to ensure your buttons are styled and behave exactly as other buttons within your interface. Here are some examples:
Round button corners:
.chmln-edit-modal .chmln-action {
border-radius: 20px !important;
} 
Set custom colors for button default and hover states:
button.chmln-action {
background: #0099ff !important;
border: 1px solid #0099ff !important;
padding: 8px 22px 8px 22px !important;
color: #ffffff !important;
border-radius: 3px !important;
}
button.chmln-action:hover {
background: #66ccff !important;
border: 1px solid #66ccff !important;
}
Increase button height:
.chmln-cta .chmln-action {
padding: 5px 5px 8px 5px !important;
}
Make buttons shorter and wider:
.chmln-cta .chmln-action {
padding: 0 25px 0 25px!important;
} 
Change button text and border color on hover:
button.chmln-action:hover {
color: #66ccff !important;
border: 1px solid #66ccff !important;
}
Force button text to uppercase:
.chmln-cta .chmln-action {
text-transform: uppercase !important;
}
Apply shadow to button on hover:
.chmln-cta .chmln-action:hover {
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
}
Chameleon sets a default style on elements that are focused or tabbed to for accessibility. You can adjust that styling with some custom CSS as follows though:
Change the default focus border to red and thicker:
.chmln-edit-modal .chmln-inner *:focus {
box-shadow: 0 0 0 4px #f62020 !important
}
📩 Have any requests for other styling examples you'd like to see or any questions on how to craft your perfect style? Speak to us, we're happy to help out!