How to improve your Theme with custom CSS

Custom CSS in Themes is a powerful tool to customize the look and feel of your product tours or smart tips. To create a theme 1. Click Themes in the top menu while signed in 2. Click "+ Create new theme" in the top right corner Below you can find few examples of working customizations: Customize background color .#{$classNamePrefix}-modal-inner, .#{$classNamePrefix}-bubble, .#{$classNamePrefix}-slideout-inner, .#{$classNamePrefix}-notification-inner{ background: #CCC; } .#{$classNamePrefix}-bubble.top .pointer-below{ border-top-color: #CCC; } .#{$classNamePrefix}-bubble.left .pointer-below{ border-left-color: #CCC; } .#{$classNamePrefix}-bubble.right .pointer-below{ border-right-color: #CCC; } .#{$classNamePrefix}-bubble.down .pointer-below{ border-bottom-color: #CCC; } .#{$classNamePrefix}-content { background: transparent; } Customize background color and it's transparency .#{$classNamePrefix}-modal-inner, .#{$classNamePrefix}-bubble, .#{$classNamePrefix}-slideout-inner, .#{$classNamePrefix}-notification-inner{ background: rgba(255,255,255, 0.4); } .#{$classNamePrefix}-bubble.top .pointer-below{ border-top-color: rgba(255,255,255, 0.4); } .#{$classNamePrefix}-bubble.left .pointer-below{ border-left-color: rgba(255,255,255, 0.4); } .#{$classNamePrefix}-bubble.right .pointer-below{ border-right-color: rgba(255,255,255, 0.4); } .#{$classNamePrefix}-bubble.down .pointer-below{ border-bottom-color: rgba(255,255,255, 0.4); } .#{$classNamePrefix}-content { background: transparent; } Text color update .#{$classNamePrefix}-bubble, .#{$classNamePrefix}-slideout-inner, .#{$classNamePrefix}-modal-inner{ color: #FAC; } .#{$classNamePrefix}-content, .#{$classNamePrefix}-content p, .#{$classNamePrefix}-content span, .#{$classNamePrefix}-bubble-content, .#{$classNamePrefix}-bubble-content span, .#{$classNamePrefix}-bubble-content p{ color: #FAC !important} Title color update .#{$classNamePrefix}-title { color: #FD0 !important} Font update .#{$classNamePrefix}-content, .#{$classNamePrefix}-content p, .#{$classNamePrefix}-content span, .#{$classNamePrefix}-bubble-content, .#{$classNamePrefix}-bubble-content span, .#{$classNamePrefix}-bubble-content p, .#{$classNamePrefix}-button, .#{$classNamePrefix}-title {font-family: Impact !important;} Color for primary and secondary buttons .#{$classNamePrefix}-button, { border: #FFF; background: #FAF; } .#{$classNamePrefix}-button-primary, { background: #CCC; border: #FFF; } Remove "Dismiss checklist" text from your Checklist .#{$classNamePrefix}-bottom-action{ display: none; } Remove "X" button from your tours .#{$classNamePrefix}-close-button{ display: none; } Align button to the left .#{$classNamePrefix}-button-main{ left: 20px; right: auto; } Fully-rounded buttons .#{$classNamePrefix}-button { border-radius: 20px; } Elements without rounded corners .#{$classNamePrefix}-modal, .#{$classNamePrefix}-modal-inner, .#{$classNamePrefix}-bubble, .#{$classNamePrefix}-bubble-inner, .#{$classNamePrefix}-slideout, .#{$classNamePrefix}-slideout-inner, .#{$classNamePrefix}-notification, .#{$classNamePrefix}-notification-inner, .#{$classNamePrefix}-title{ border-radius: 0 !important; } Change border color of pointer .#{$classNamePrefix}-bubble { border: 1px solid red } .#{$classNamePrefix}-bubble.top .pointer-up { border-top-color: red; } .#{$classNamePrefix}-bubble.left .pointer-up { border-left-color: red; } .#{$classNamePrefix}-bubble.right .pointer-up { border-right-color: red; } .#{$classNamePrefix}-bubble.down .pointer-up { border-bottom-color: red; } .#{$classNamePrefix}-bubble .pointer::before { border-color: red; } Checklist customizations - change progress bar color .#{$classNamePrefix}-notification.#{$classNamePrefix}-tour-selection .#{$classNamePrefix}-progress .#{$classNamePrefix}-progress-bar { background-color: red;} Checklist - change the close button color .#{$classNamePrefix}-close-button svg path, .#{$classNamePrefix}-close-button svg line { stroke: red !important} Switch feedback emoji's from happy>neutral>sad to sad>neutral>happy #{$classNamePrefix}-feedback, .#{$classNamePrefix}-feedback-title { -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); }

Still puzzling over something?

Welcome new users like Slack

Customize theme for natural look & feel

Troubleshooting: Themes with custom CSS

How to turn modal dialog into a bottom bar announcement