This job aid will help you identify the classic player colors in Storyline 360 and Storyline 3 so you can customize the course player for learners using desktop/laptop computers.
Not sure how to customize your player colors? See the Storyline 360 and Storyline 3 user guides for details.
Thanks for this David. I am having a problem with Tabs and "Selected Text" state.
https://community.articulate.com/discussions/articulate-storyline/text-colors-in-player-of-storyline-3
Do you have any idea about this?
Thanks.
Hi Terri,
There are several player properties that control text color. For example, Base>Link Text changes the font color for the course title and topbar player tabs. And List Item>Normal Text, List Item>Selected Item Text, and List Item>Viewed Item all control the color of slide titles in your course sidebar.
You can see which player color properties affect each element of the standard desktop player in the PDF job aid above. And this user guide explains how to edit player colors in Storyline: https://community.articulate.com/series/74/articles/articulate-storyline-360-user-guide-how-to-change-player-colors-font-size
Just let us know if you need help identifying the color property for a particular player element. :)
Thanks so much, David! Finally, I see the connector I previously overlooked, the link - Show advanced color editing, without that, as much as I studied the job aid, I could NOT make sense of it since I couldn't find how to get to "Base" and apply all those wonderful tips.
Thank you for this. It was exactly what I was looking for so that I can get our graphic design folks who do not have Articulate software involved in designing our player color scheme.
Thank you for sharing. I had this PDF for Storyline 2 yet it may have been on that client's laptop. I really appreciate the sharing this community provides!
Hi Stefan,
You can change the hyperlink color in your project's theme colors. Learn more about those here: https://community.articulate.com/series/74/articles/articulate-storyline-360-user-guide-how-to-use-theme-colors
And if you'd like to change the color of a hyperlink when learners click it, you'll need to add a Visited state to the clickable object. Learn more about states here: https://community.articulate.com/series/74/articles/articulate-storyline-360-user-guide-how-to-add-and-edit-states
Hi David,
thank you for this answer! Unfortunately my question was not written clear enough. I wanted to Change the Background of a link-text in the player, not on the slides. In your example above I would like to have a hover state for "Healty Habits".
Hi, Stefan, thanks for the example! I see what you're saying now. There isn't a hover color for Base>Link Text, such as "Healthy Habits" in the image above. However, many of the clickable player elements have hover colors. Here are some examples:
- Tab>Hover changes the hover color for tabs in the sidebar.
- List Item>Hovered Item Highlight changes the hover color for slide titles in the menu.
- Button>Hover Background changes the hover color for previous/next buttons.
- Editor>Window Button Hover changes the hover color for buttons on pop-up messages.
I hope that helps!
Hi Sarah,
You can preview some notification pop-ups. For example, preview a quiz slide in your course, then click the Submit button without answering the question. You'll see the Invalid Answer pop-up.
I hope that helps!
Hi, Stephanie! You can change the player font and font size in the player properties, on the same screen as the player colors.
You can't change the style of player elements or switch to square corners. However, you can turn off the built-in player features and create your own custom navigation features with buttons, hotspots, and hyperlinks.
Here's how to hide the built-in player: https://articulate.com/support/article/how-to-create-a-chromeless-player-sl2
Here are some examples of Storyline projects with custom navigation:
https://community.articulate.com/e-learning-examples/storyline-360-gamified-table-of-contents
https://community.articulate.com/e-learning-examples/storyline-escape-the-cavern-game
https://community.articulate.com/e-learning-examples/storyline-custom-na... Expand
Hi, Stephanie! You can change the player font and font size in the player properties, on the same screen as the player colors.
You can't change the style of player elements or switch to square corners. However, you can turn off the built-in player features and create your own custom navigation features with buttons, hotspots, and hyperlinks.
Here's how to hide the built-in player: https://articulate.com/support/article/how-to-create-a-chromeless-player-sl2
Here are some examples of Storyline projects with custom navigation:
https://community.articulate.com/e-learning-examples/storyline-360-gamified-table-of-contents
https://community.articulate.com/e-learning-examples/storyline-escape-the-cavern-game
https://community.articulate.com/e-learning-examples/storyline-custom-navigation-with-icon-badges
And you can find more examples here: https://community.articulate.com/e-learning-examples
I hope that helps!
Hi David,
This is great! I had one quick question as it relates to the player tabs. Is there a type-o with regard to the Menu, Resources, etc. tabs? At the top of the page, it shows the tabs being changed with the Base > Link Text, but when I change the Base > Link Text, the tabs (Resources/Menu) text does not change. I end up having to change the Tab > Normal Text. Also, in a future iteration, could Tab > Hover be included? With color contrast being a big topic with 508/WCAG, this would be a great resource.
Hi, Jackie! I'm glad to hear the job aid is helpful. :) The text colors depend on whether your tabs are in the sidebar or on the topbar. These items control sidebar tabs:
Tab > Normal Text
Tab > Hover
Tab > Selected Text
Tab > Shadow
Base > Link Text controls topbar tabs (and the title). I can definitely see how a hover color for topbar tabs would be helpful. I'll pass that on to our product team!
If you're using Storyline 360, the modern player style has a hover state for both sidebar and topbar tabs. You might try switching to the modern player to see if it'll work for your course: https://community.articulate.com/series/articulate-storyline-360/articles/storyline-360-user-guide-how-to-choose-a-player-style
I noticed today while editing colors for my Classic player colors that there is a new Accessibility edit item in the advanced color editing drop down list. Will you be publishing a new job aid? Thanks
Hi Melanie, good catch! :) Yes, we'll update the player colors job aid soon to include the new accessibility focus color. We recently shipped several accessibility enhancements for Storyline 360, including the option to change the accessibility focus color for keyboard-only users. You can learn more about it here: https://community.articulate.com/series/articulate-storyline-360/articles/storyline-360-customizing-accessible-player-settings
Hello! Is there a way to change the color of a "selected" button in player? I found that for the captions button, when I select it, I can't edit the color for the backgroun and it remains white (which is conflicting for this client because the button icons for their template is also white).
Is it somewhere else that I haven't seen or do you have to add it yet? Thanks!
Hi, Mica! That's a great question. The closed captioning button is the only one along the bottom of the player that has a selected state. You can change the background color for the selected state using Tab >> Selected Background. This is the same item that controls the color of the selected tab in the sidebar.
31 Comments
Hi, Stephanie! You can change the player font and font size in the player properties, on the same screen as the player colors. You can't change the style of player elements or switch to square corners. However, you can turn off the built-in player features and create your own custom navigation features with buttons, hotspots, and hyperlinks. Here's how to hide the built-in player: https://articulate.com/support/article/how-to-create-a-chromeless-player-sl2 Here are some examples of Storyline projects with custom navigation: https://community.articulate.com/e-learning-examples/storyline-360-gamified-table-of-contents https://community.articulate.com/e-learning-examples/storyline-escape-the-cavern-game https://community.articulate.com/e-learning-examples/storyline-custom-na... Expand