The Articulate Storyline player: we’ve all seen it before. By default, it looks like this:
There are tons of ways you can customize this player to look and behave how you want. Get rid of the volume icon? No problem. Change the text that says “Resources” or remove it altogether? Sure thing! Update the color scheme to your corporate colors? Of course!
But have you ever wondered how to suppress the Articulate Storyline player altogether to achieve a seamless, invisible player like the one below?
Or, something like this:
Notice how in both cases, the player is completely invisible. How did I do that? Let me walk you through the simple steps.
Remove the Player Features
To edit your player you need to be in the player properties window: just click the player icon on the home tab of the Storyline ribbon. Once you’ve opened it, you’ll see this:
To create an invisible player, you need to start by removing its existing features—the menu, the title, the resources link, and the volume icon. You’ll notice you can do all of those things by unchecking their corresponding checkboxes on the features tab of the player properties window.
Once you’ve gotten rid of those items, your preview will look like this:
For now, it’s okay that the “Prev” and “Next” navigation buttons are still visible—that’s because you can’t remove those in the player properties window. To get rid of them, you need to go into each slide’s slide properties and uncheck the “Prev” and “Next” buttons. We’ll do that a little bit later in the process, so it’s fine that they still appear in the preview.
Select a Page Background Color
Now you get to start playing around with colors. First, set your page background color—the browser’s background fill color—which by default is white. To change the page background color, click the “Colors & Effects” tab of the player properties window, and then select the color you want under the “Page Background” drop-down menu.
In our example, we want the page background to be dark teal. Once we’ve set my page background color, our preview looks like this:
Adjust the Player Color Scheme
Now comes the part when you edit the color scheme of the player to make it invisible. Wait, an invisible color? Nope—the player itself is still there, but just appears invisible once you edit the colors to make it a solid shade that blends with the background. Magic!
To edit the player’s color scheme, click the “Show advanced color editing” link. This will let you control every aspect of the player’s color scheme.
Next, from the “Edit item” drop-down menu, select “Base.” You’ll then go into each of the items listed one by one (Main Background, Main Border, Left Separator, etc.) and adjust the colors (Top Color & Bottom Color) to be the same dark teal as your page background color.
By the time you’re done, your slide will look like this:
Remove Navigation Buttons from Slides
The last thing you need to do is go into each slide and remove the “Prev” and “Next” navigation buttons that appear along the bottom. To do that, open the slide properties window and deselect those two options under “Slide navigation controls.”
You now have created the sleek look of an invisible player! You’ll notice that when you preview this player, the background fill color still appears as white:
This is normal; you’ll only see the page background color once you’ve published and you review the slide inside a web browser. Once you do, it should look like this:
And there you have it! Four simple steps to create an invisible and seamless player with Articulate Storyline. And if you want to save time, you can grab these free downloads: 3-Pack of Seamless Player Skins or 10-Pack of Seamless Player Skins, and see if the color you need is already available!
Got any questions or feedback about this process? Don’t hesitate to leave me a comment below. I love to hear from the community.
Want to try something you learned here, but don’t have Articulate software? Download a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.