Is there any way to change the color of the Lightbox Close (X) button in the new modern dark player?

I would prefer to use the dark modern player, but I just tried out the Lightbox feature and the Close (X) button is incredibly hard to view. It's ok to see in iPad view (course is 4:3 size) but in laptop view it's really difficult.

See attached, laptop is left, iPad is right.

36 Replies
Russell Killips

In this code, I change the track color to blue (#0000ff) and the thumb color to red (#ff0000)

<style>
::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-track {background-color: #0000ff;}
::-webkit-scrollbar-thumb {background-color: #ff0000;}

.panel-content {
  scrollbar-highlight-color: #0000ff;
  scrollbar-face-color: #ff0000;
  scollbar-color: #ff0000 #0000ff;
}
</style>

Alexandra Angelova

Hello Russell! 

I was wondering whether you have had experience with the following issue: 

After publishing the project file for LMS, I unzip the folder and add the above code to the index_lms_html5 file to change the color of the scrollbar. Then I zip the folder again to upload it to the LMS, at which point it won't accept the file. 

Any insight would be more than highly appreciated! 

Alexandra Angelova

Hi Russell! 

I was actually able to figure this out. What you need to do when zipping is to open the unzipped file, mark its contents and zip them. This way you create a new .zip folder, which seems to be working perfectly. I read that it has something to do with the manifest xml file: seems like simply zipping and unzipping a folder somehow corrupts it. 

Alexandra Angelova

Thanks, Russell! 

I'll give it a try. What I'm trying to change now (unsuccessfully) is the scrollbar area.

You can see the html5 file attached below.

It seems like there's been some changes to this file after the last update to Storyline 3 and the code I used to add before is no longer working.

I'm not able to figure out why. I'd be really grateful if you could give me a hint.

Russell Killips

Try this for the classic player.

<style>
::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-track {background-color: #0000ff;}
::-webkit-scrollbar-thumb {background-color: #ff0000;}

.cs-panel {
scrollbar-highlight-color: #0000ff;
scrollbar-face-color: #ff0000;
scollbar-color: #ff0000 #0000ff;
}
</style>

Alexandra Angelova

Thank you for your help! 

Unfortunately, it's still not working. I think it's something to do with the latest update, I am noticing a new line of code that I don't remember being there previously:

 

 

<script>window.THREE = { };</script>

You can see it in the attachment. 

This way, when I add the extra code, it's right above </head>, but there's one more line between it and the previous </style> tag. 

Could this be the reason?

Also, when I open the story_html5.html file locally I can see the change, but after zipping and publishing it's no longer there.

I'm using SL3 (Classic Player only) and am publishing to HTLM5 with Flash fallback (there is no longer an html5 file in the HTML5 only output.)