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

Sep 06, 2018

David McDonagh
By David McDonagh

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.

43 Replies
Russell Killips
over 4 years ago09/17/19 at 5:09 pm (UTC)

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
over 4 years ago11/25/19 at 10:46 am (UTC)

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! 

Russell Killips
over 4 years ago11/25/19 at 3:08 pm (UTC)

Hi, sorry I don’t know why it isn’t working for you. If you send me a sample published project with your scrollbar hack, I will take a look at it. I probably won’t be able to look at it until tomorrow. I’m leaving shortly to go to a meeting and I have some other work to do for a client.

Alexandra Angelova
over 4 years ago11/26/19 at 4:05 pm (UTC)

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
over 3 years ago07/31/20 at 5:49 pm (UTC)

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
over 3 years ago08/04/20 at 4:54 pm (UTC)

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>

Russell Killips
almost 2 years ago07/05/22 at 2:26 pm (UTC)

Hello Mou,

If you are using the classic player and wish to change the lightbox close button from red to black.

After publishing your course you will need to add in this code:
#light-box-close { background-color: #000000 !important; }

If publishing for web, you will need to add the code to story.html

If publishing for scorm, you will need to add the code to index_lms.html
(I usually add the code to both index_lms.html and story.html)

In the screen shot below I added in the code at line 14 just before the </style> tag.

Code

 

And here's the result:

Result

Sign In to Reply