How to Use Custom Styles (CSS)

Custom CSS styles are a great tool to customize the look and feel of your membership websites. This feature allows you to override existing styles of your theme. You can change colors, size, change the order of elements or hide certain elements, add animations. There changes can potentially break responsiveness of the themes, this is why proper testing should always be performed after this type of customization.  

In this example we're going to highlight the background of the first course in the Students dashboard to attract their attention three seconds after the page is loaded. 

To do that, go to the Integrations step of Membership Wizard and open the Custom tab. Copy over the code provided below and click Done to save your changes.

Example code to copy: 

<style>
 // This code will change the color
 // of the first course card in the dashboard
 // into green 3 seconds after the page is loaded
 //
.course-select-box {
   transition: background-color 1.5s ease;
   transition-delay: 3s;
   background-color: lime;
}
</style>

After you've saved your changes, login to the membership as a student. You should see the background of the first course card change its color: