You can create a theme and add your custom CSS for advanced customizability of your tours. 

If you use themes with custom CSS and your tour is not displayed as expected on your page, here are 2 of the most common issues that you may want to check. 


1. Custom CSS format


It is mandatory to write the custom CSS in a specific format to ensure it displays correctly both in preview and on your page. 


For any class that you want to target, include .#{classNamePrefix} before the class declaration, as shown below



✅ Correct❌ Incorrect
.#{$classNamePrefix}-actions {
padding: 0 30px 20px 30px!important;
}


uf-actions {
padding: 0 30px 20px 30px!important;
}



2. Ensure on-page CSS does not interfere with Usetiful theme CSS


To look for conflicts, inspect the tour element that is not displayed properly, and look for crossed-out styles in the inspector


Here's an example


If you have any additional questions or need help, please contact us.