Change menu colour background

Aug 06, 2018

Hello,

We are using Storyline 360 version 3.18.16333

Is it possible to change the background colour of Menu?  Currently we are using the "out of the box" light colour.

Many thanks...

9 Replies
Katie Riggio

Welcome to ELH, Nicole! đź‘‹

While there currently isn't an option to customize the modern player's menu background color, I've shared this discussion with our product team!

At this time, you can change the colors for the modern player–light or dark–and one accent color. If you need more control over colors for each player feature, you can switch to the classic player and use the advanced color options as described here.

Another option can be to turn off the player altogether and create your own custom navigation with buttons, hotspots, and hyperlinks. Here's how!

Hope that helps, and we'll certainly let you know if we add this feature in the future! As always, feel free to share any other thoughts here or through our Feature Request form–we're all ears! 

Becca Levan

Hi Nicole,

I'm happy to return with some exciting news! đź—ž

Storyline 360 Update 54 is here, and it introduces several features and bug fixes! Here's the item you'll be interested in:

New: Brand your courses by choosing a custom background color for the modern player.

Just launch the Articulate 360 desktop app on your computer and click the Update button for each application—details here.

Please let us know if you have any questions or reach out to our Support Engineers directly!

John Morgan

Hi James,

Thanks for reaching out! I understand you'd like to change the background of a menu. I have a follow-up question so I can better understand what you're asking.

  • Which menu are you looking to change the color of? This thread is discussing changing the color of the menu in the modern player. Here is a screenshot of the Player Properties windows with the menu highlighted.

Is this the menu you are trying to change?

I look forward to your response!

James Meanwell

That's the menu! Interesting. John, I've just done some debugging with a senior developer on my team, who is a great guy (Nick McGowan). He's hugely impressed at the speed with which you have replied. Thank you!!!!!!

Now, back to the matter at hand. It seems like changing the background colour works for almost all of the colours except for white. When I use white as the background colour, John, the menu defaults to a grey (perhaps #f4f4f4). Have you and your team come across this as well? 

Essentially, I'd like to use a white menu...although this is just a workaround for another issue (when I minimize the menu in an embedded iframe, I can still see what looks to be about a 1px border on the left—image attached). So I was thinking that using a white menu (for context the webpage background is white) would eliminate the grey border...

Thank you, John!

Steven Benassi

Hi James!

Thanks for the feedback!

It sounds like you were trying to set the background color of the player menu to be as starkly white as possible. I'd be happy to help with that!

Testing this out on my end, yes the #F4F4F4 color code does appear as more of an off-white/grey tone. However, setting the custom color code to #FFFFFF achieves the plain white color you seem to be looking for. I would suggest giving that a shot to see if it does the trick!

Hope this helps! Please let me know if you have any more questions!

John Morgan

Hi James,

After testing this out, I see what you are experiencing! It looks like there is a light gray shade placed on the player menu regardless of what color you choose. This is done to differentiate the menu from the rest of the player. We don’t currently have an option for making the menu completely white, but this is something I can share with our product team.

Thanks for bringing this to our attention!