Forum Discussion
Change colors and/or hover for the Next and Previous buttons on Player
I need a better color contract for the next and previous buttons on the Storyline player - the buttons are not an accessible color contrast - is it possible to adjust the color so there is better contrast without having to create buttons.
Thanks
Nancy
Please prioritize this feature request. It's been broken for at least 4 years now. Just give us the option to adjust the colors so that we can meet the required accessibility levels without having to create our own buttons. Accessibility and equity are important, and they should be to you as well.
I am surprised that Articulate are unwilling to move on this issue. Changing the Background colour is not the solution to offer when an organisation wants the player to be in the organisation's chosen brand colour.
What I find quite bizarre, is that when I have moved from SL3 to SL360 and changed our player to Modern, some of the tabs are indeed white and not grey (please see attachment). This suggests either a bug or a conversion oversight.
Please don't "fix" this by making them all grey!
I think everyone just wants to have a player where they can decide the appropriate colours as opposed to it being locked down.
Sometimes, what seems to developers to be a minor issue and not worthy of work actually is a key UI/UX issue which is frustratingly ignored.Thanks for listening.
Thank you, Steve and everyone else who has contributed to this thread for sharing how important this feature is to your workflow!
I've collected this feedback to share with our team! At this time, we are prioritizing other features and bug fixes for upcoming releases, so we don't have a timeline for when this feature will be slated for a future update. When I have an update to share, I'll be sure to return to this discussion.
Hi Nancy!
Would your course benefit from adjusting the color of the player to a custom color or a dark or light theme?
I found this article from the 2021 Storyline Update that walks you though how to adjust the player color within the player properties tab: Storyline 360: Modern Player Custom Color.
Perhaps this will create enough contrast so that the Next and Previous button text pass accessibility standards.
Thanks,
Luciana
Changing the background color isn't the issue. There are many times I want a specific background, not just using light or dark. The dark background meets the "minimum" standard for contrast but the light background does not meet any of the WCAG contrast for those with a disability - which would mean that either you have to create all the buttons for a module or use only the dark background. It would seem like Articulate could fix this without a lot of trouble - or maybe there is a javascript that we could use. It's very frustrating. And for some larger organizations where the triple-A (AAA) is the company or org standard, they would have to create all the buttons because light and dark backgrounds do not meet the triple-A standard at all!
Hi, Nancy.
Thank you for reaching out!
The player adjusts the color of the buttons depending on which background color you choose.
When you choose a dark custom background color, the player controls use hex color code #BABBBA. When you choose a light custom background color, the player controls use hex color code #585858.
While you can't choose a different color for the buttons, we have a feature request logged for the ability to customize the font color for the Menu Controls in the Modern Player.
I will update this discussion if I have any news to share or if this request makes it to our feature roadmap.
Is there any update on this feature? As advanced as Articulate is with bells and whistles, I'm really disappointed at the lack of action on accessibility features. This is not a hard change.
I have to agree with everyone in this string and others on this topic. There's such a push by Articulate to use the modern player but the color control is so inferior to the classic player. And yes... 4 years is a long time to wait.
Cheers Lauren. Appreciate you popping in to respond.
It's not ideal but a workaround is to change the css output.min.css file. Naturally every time you publish you have to re-apply, you will overwrite your css changes. I make it a part of my release process. Not that big of deal my changes are light.
For example, let's say you want to change the next and previous hover color to neon green and really make it pop. You can try it by publishing your course to web, now inspect the page, on pc hit F12 for developer tools. Inspect element. Now select your next button, that will highlight your element, on the styles pane you will note the which one it is. In my circumstance it was output.min.css:693. What that means is it's the output.min.css file and its line 693. In my case the css was:
body:not(.is-touchable-tablet) .cs-pxabnsnfns10111100101 .cs-button:hover .text {
color: #BABBBA;
}I changed to:
body:not(.is-touchable-tablet) .cs-pxabnsnfns10111100101 .cs-button:hover .text {
color: #09f332;
}Hit save and reload. Now hover over next and prev. See that its neon green. You shouldn't need to clear your cache but maaaybe.
Repeat process for discovering your desired elements and change the attributes accordingly.
Andy
Hi Andy. Thanks for your response. Sorry for not being a CSS guy, but are you saying you are doing this in the published html page in the browser which will work even if the SCORM is added to an LMS?
Or is this using the browser to find out what needs changing and where and then diving into the published folder before you zip the contents to make the SCORM zip file?
Thanks, SteveLong answer:
I used the publish for web just to identify the elements of the changes I need to make.
But then you when you publish for say SCORM 1.2 it generates all the files as it does for publishing for the Web browser. You then make that change in your published SCORM output. You zip that up as normal and load that into any LMS. The changes will carry over at the course level irrespective of LMS. What I like about publishing to the web and viewing in my local browser is I can iterate through changes quickly. But when I do it for real yeah you put it in your SCORM package. Remember though you have to reapply every time you publish, so I save this to the end of my workflow. I test in the design phase to make sure it all works and looks good. Then I don't worry about it until the end.
Short answer: Yes it works when packaged for SCORM. See long answer for details.
James Kingsley on Review My Elearning has a tool that can change the colours and the hover states
https://storylinebuttons.com
Thanks for this, Phil.
I will check when I get home tonight. My organisation is blocking it.
I have generally found all the help with Studio and Storyline over the years has come from the community finding workarounds and not by solutions by the supplier, which is a shame.
Generally, if it's in the guides you get pointed to them and if it's not, it's thrown out to the community, so thank you everyone for all your help over the years.
