Slide titles in the Notes tab won't change color in HTML5

Hi!

I am unable to change the color the the slide titles in the Notes tab when the Player is running in HTML5.  Editing the colors of the slide titles using transcript>>heading_text in the advanced color editing section works great if the Player runs in Flash.  But, in HTML5, it appears the Player is rendering the slide title text using the base>>text color settings instead.  I am unable to edit the slide title text separately from the Player's base text for HTML5.

Is this functionality of the Player intended?  If not, is there a fix on the way?  Are there any work-arounds in the Player itself?

Thanks,

Steve

22 Replies
Christine Hendrickson

Hi Steven,

Welcome to E-Learning Heroes!

We're investigating an issue related to visited states of the menu in HTML5, but not formatting/colors. 

First, can you please confirm you're publishing with Update 5? To find this information click on Help >> About Articulate Storyline.

Articulate Storyline Update 5 includes bug fixes, performance improvements, and HTML5 output enhancements. Click here for details.

If you are running Update 5, are you able to share a .story file for the project? I'd be happy to take a look and see if I experience the same issue on my end.

Thanks!

Steven Guajardo

Hi Christine!

Yes, I am using Update 5. 

Attached is an example.  I started with the default color settings for the Player, then from the advanced color editing section, selected transcript >> heading_text and set it to red.  When previewing the project or publishing and viewing the project using story.html, the Notes section heading text shows up red.  However, publishing the project and using story_html5.html, the text is dark gray.

Thanks!

Steve

Christine Hendrickson

Hi Steven,

Thank you very much for providing the project file!

I've taken a look and published the project for both Flash & HTML5:

• Flash

• HTML5

I was also able to reproduce this in a new project file:

• Flash

• HTML5

I do not see any existing reports on this issue, so I'm collecting the information and reporting this issue to our Quality Assurance team for investigation. I'm also going to share the file you shared here, as well as the file I created. If you have any additional information on the issue, please do let me know and I can add to the report.

*Note: This may or may not be intended behavior. I'm hoping that our QA team will be able to confirm whether or not this is related to the fact that HTML5 output doesn't support notes formatting, or if it's an issue with the player colors. 

I'm also going to add this thread to the report, so I can share updates when they're available. I don't have a time frame to share at this point, but will try to keep you in the loop.

Thanks very much for bringing this to our attention, Steve!

Steven Guajardo

Hi Christine!

Found a couple of other fields having the same issue when running in HTML5.  In addition to the slide title text in the Notes tab (transcript >> heading_text), the list item text in the Glossary (glossary >> test) and the list item text in the Resources tab (listitem >> text) are having the same issues.  Looks like the html/css isn't updating the colors for these items in HTML5 when the project is published.  

I've attached an updated project to highlight the issue, a dark player background with light text along with the Notes, Glossary, and Resource tabs being lightly colored with dark text.  Please view in both flash and HTML5 to see the difference.  In HTML5, a person cannot really read what is in either of these three sections because the colors are too similar or the same.  

My team is running on a bit of a tight deadline with a project using Storyline.  We were devising a workaround for the slide title issue, but now, with the Glossary and Resources tabs also affected, this is has a much greater impact to our project.  Is it possible to get more definitive information about this issue?

Thank you so much for your help!

Steve

Titty Pat

I have the same problem.

I set menu>bg white and glossary>heading_text blue, but in HTML5 - and only for the glossary - the CSS/HTML doesn't see this setting, even if there are no writing errors in html of frame.xml.
I don't know how, but for the html5 version menu>bg become blue and it's impossible to read "definition" and "term".

Christine Hendrickson

Hi Lauren,

I apologize for the trouble and I'm sorry to hear that this is causing issues for you as well.

As Ashley mentioned earlier, we've added this thread to the ticket. Anyone subscribed to this thread will receive and update when we have more information on the issue.

In the meantime, if you find any information that may help us investigate the issue, please share.

Thank you very much,

Christine

Marjan Van de Kauter

Is there a solution for this issue yet? I'm having a similar problem with the header of the menu when the menu is opened (Tab >> Selected Text). In Flash, the menu header is the colour I selected in the advanced color editing (black), but in HTML5, the header becomes white when you click it instead of black (which is a problem, because the background of my menu is also white).

Alyssa Gomez

Thanks for sharing those screenshots, Marjan. I can clearly see how the Menu tab label is completely unreadable in HTML5. I'd like to do some further investigation on your file since you said you're using Storyline 2 and I don't see that this issue has been reported for that version of Storyline. I understand you cannot share your file publicly due to confidentiality, but you always have the option to share it privately with our Support Engineers here, and they will even sign an NDA, if you wish. 

Alyssa Gomez

Hi Marjan,

Thanks for sharing your file with me. I played around with a few settings, but I was unable to find a fix for the white text in the selected Menu tab. Would you mind sharing this file with our team through this form? I'd like them to take a closer look at it to confirm whether it's related to the known issue with Storyline 1. And if you do decide to open a case, please let me know your case number so I can follow along as well. :)