Forum Discussion

BHFS's avatar
BHFS
Community Member
1 month ago

Storyline loading three dots BG color

Hi all,

When a Storyline course loads it briefly shows a loading screen with 3 animating dots. That screen has a background color. The color is written into the published HTML file.

I can't figure out how to change that color within the .story file. A screenshot is attached. (as you can see mine is an unfortunate pink color.) Thanks.

 

3 Replies

  • Hi,

    Try this:

    • Open story.html in your HTML editor, such as Visual Studio Code.
    • Go to the first line of the body section. For my sample file, that lands on line 96.
    • In the following line, change the hexadecimal code after the hashtag to your desired hexadecimal color code number. In this example, my color code is F33328. 

      <body style="background: #F33328" class="cs-HTML theme-unified">

    • Save your HTML file
    • Relaunch

     

    If this answers your question, please mark it as Solved. Otherwise, feel free to ask a follow-up question.

  • BHFS's avatar
    BHFS
    Community Member

    Thanks Kendal. Yes this works. Unfortunately, it's overwritten with every publish. I'm specifically looking for the feature that affects this in the .story file.

    • Hi BHFS​!

      Glad to see Kendal has been helping you!

      Currently, Storyline 360 does not support a feature to modify the style of the loading screen. The background you're noticing is part of the Storyline player shell, and not part of any Slide content itself. The color is hard-coded into the generated HTML/CSS files at the time of publishing, and gets rendered before the Storyline runtime finishes loading the course.

      I understand that having more custom control for this screen could improve your authoring experience. I've shared this request with our product team!

      Also, we want your published file to work smoothly in all supported browsers, so we don't support modifying the published output. Other folks in the community may have discovered additional workarounds to share with you here!