[TIP] Thumbnail preview for your course

Hey guys - just wanted to share an easy way to make your Storyline course a little more visually appealing.

As you may know, when your Storyline file contains autoplay media it needs to add a play button to the start slide. By default it's just a grey/black screen with no indication of what to expect (which can be a bit ugly depending on where it's embedded):

Here's a simple way to make it pop:

1. Navigate to your \Articulate\360\Storyline\player\unified\html5\lib\stylesheets folder
2. Open desktop.min.css and/or mobile.min.css in a text editor
3. Search for:
   

    

   .mobile-start-overlay{background:rgba(0,0,0,0.8);

    

   replace with:

   .mobile-start-overlay{background-image:linear- gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("../../../story_ content/thumbnail.jpg"); background-size:cover;background-position:center;

    

4. (Mobile player only) Search for:

   .view-phone .mobile-start-overlay{background:black}

   replace with:

   .view-phone .mobile-start-overlay{}

5. Save and publish your course

Here's what it looks like now:

(NOTE: If you're familiar with CSS you can easily change the opacity & colour of the dark overlay as well)

The image is the same thumbnail image used by Articulate Review, so you don't have to guess what it will look like:

This thumbnail is just a screenshot of your course's first slide. So if you're unhappy with it for whatever reason, you can make your own by:

1. Creating a new slide
2. Adding your custom image as the slide background
3. Setting this slide as the first slide in your course
4. Adding a trigger to jump to the actual first slide, when the timeline starts

Voila! Your learners now have a preview of your course before even starting it, and most of the work is done for you.