STORYLINE 1
In this short tutorial, Brother Jeff will show you how to use the new eLearning Brothers custom Storyline skin within a published Articulate Storyline course.
Limitations: Articulate does not currently support custom players for mobile devices. All custom Storyline players are flash based and will only appear/function on desktop browsers. If a user launches a course with custom player on a mobile device it will default to the standard Storyline player.
The following features are not currently supported in the Articulate Storyline SDK. If you wish to see these features implemented please contact Articulate directly.
• Custom HTML5 Skin (Custom Skin is desktop only)
• Accessibility
• Right-to-left text support
• Changing fonts
• Search
• Custom buttons
• Tool tip on menu hover
• Menu on top right and top left position
• Glossary on top right and top left position
• Notes on top right and top left position
• Side bar on right position
• Resources on side bar and top left position
• Color changing within Storyline (Must be done in the color.xml)
STORYLINE 2
In this short tutorial, Brother Bryce will show you how to use the new eLearning Brothers custom Storyline skin within a published Articulate Storyline course.
Here is a list of all the object you can change the color of for the skins. First Go to the "Home" tab and select "Player" to open the "Player Properties - Storyline Player" window. Then go to "Colors & Effects" and select "Show advanced color editing". This list tells you what you can change and where in the advanced color editing you can change it.
1. Top Bar Color - Base >> Main Background >> Top color
2. Bottom Bar Color - Base >> Main Background >> Bottom color
3. Title and Resources text color - Base >> Link Text >> color
4. Sidebar Background Color - Base >> Left Pane Background >> color
5. Button Color (Up State) - Button >> Normal Background >> Top color
6. Button Color (Hover State) - Button >> Hover Background >> Top color
7. Button Border Color - Button >> Border >> color
8. Button Icon Color - Button >> Icon >> color
9. Seekbar and Replay background Color - Seek Control >> Main Background >> Top color
10. Seekbar Progress Color - Seek Control >> Scrub Background >> color
11. Seekbar Position Color - Seek Control >> Seek Position >> color
12. Replay Icon Color - Seek Control >> Button Icon >> color
13. Menu Tabs Color - Tab >> Selected Background >> Color
14. Menu Tabs Text Color (Menu, Glossary, Notes) - Tab >> Normal Text >> Color
15. Resources Panel Header Text Color - Editor >> Text >> Color
16. Notes Text and Header Color - Editor >> Text >> Color
17. Glossary Background Color - Glossary >> Scroll Background >> Color
18. Glossary List Item Text Color - Glossary >> List Item Text >> Color
19. Glossary Header Text (Terms and Definition) - Glossary >> Heading Text >> Color
20. Resources Popup Panel Tab and Background Color - Menu >> Background
21. Volume Slider Background Color - Volume >> Slider Background >> Top Color
22. Volume Slider Border Color - Volume >> Slider Border >> Color
23. Volume Thumb Button Background Color - Volume >> Thumb Background >> Color
24. Volume Thumb Button Border Color - Volume >> Thumb Border >> Color
25. Volume Thumb Button Inner Border Color - Volume >> Thumb Inner Border >> Color
26. Scrollbar Track Background Color - Scrollbar >> Main Background >> Top Color
27. Scrollbar Up and down Arrow Background and Thumb Color - Scrollbar >> Button Background >> Top Color
28. Scrollbar Up and down Arrow Icon Color - Scrollbar >> Icon >> Color
29. Scrollbar Thumb Grippers Color - Scrollbar >> Button Top Line >> Color
30. Menu Item Backgrond Color - Menu >> Background >> Color
31. Menu Item Text Color and Resources text item color - List Item >> Normal Text >> Color
32. Menu Item Selected Color - List Item >> Selected Item Highlight >> Color
33. Menu Item Viewed/Visited Color - List Item >> Viewed Item >> Color