Custom CSS in Themes is a powerful tool to customize the look and feel of your product tours or smart tips. 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;
}