Advanced: Styling the Class List Widget

This article is for developers who are embedding the class list Javascript widget into their websites and want to make use of the styling options that are available.

By default, the class list widget outputs basic text information, however you can also request images and registration buttons which can open up more opportunities for styling.

Styling Loading Status

Because the widget loads your class info through Javascript, there is often a slight delay between when the page first loads and when the classes "pop in" to the widget.  To manage the styling of the widget during this "loading" phase, we've included a data attribute on the widget HTML element that you can reference in your stylesheets to get the appropriate look.

When the widget is loading, the value of data-cs-widget-status attribute will be "loading".  When the content pops into the widget, we will automatically change this value to "loaded".  This can be useful if, say, you'd like to offer the user a spinning widget during the loading process.  Example code can be seen below.

    .coursestorm-widget[data-cs-widget-status="loading"] {
        background: #FEFEFE image('/spinner.gif') center center;
    }
    
    .coursestorm-widget[data-cs-widget-status="loaded"] {
        background: #FFFFFF;
    }

A similar attribute can be used on the image containers as well if you'd like to display certain styling while waiting for the images to load in.  This attribute is data-cs-item-status.

.coursestorm-thumbnail-container[data-cs-item-status="loading"] {
        background: #FEFEFE image('/spinner.gif') center center;
    }
    
    .coursestorm-thumbnail-container[data-cs-item-status="loaded"] {
        background: #FFFFFF;
    }

Selectors

For your convenience, we also offer a variety of other helpful CSS selectors for use when styling the widget to fit with your websites's theme.