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

Highlighting overlay

.#{$classNamePrefix}-modal::before,

.uf-overlay.uf-visible {

    opacity: 0.2;

}