Custom CSS

Custom CSS overrides can be applied to your application to make the Widgets look more at home .

The widgets are written as VueJS SPA's with help from Vuetify (opens new window) so if you are familiar with this framework, you may recognise some of the class naming convention. In order to prevent conflicts, we have prefixed as much as possible with the class .widget-application which is the most outer wrapper inside the initialisation element.

For easier overrides, we recommend the use of SASS (opens new window) and to nest your style overrides as closely as possible to the nesting pattern used in the widget application. Providing your custom style overrides are loaded after the widgets, they should apply effectively without the use of !important.

Example: Custom Listing Video Titles

.widget-application .widget-videos .video-title {
    font-size: 19px;
    float: left;
    color: #E2186F;
    background-color: #FFF;
    padding: 6px 16px;
}