Forum Discussion
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.
43 Replies
I am not using the Modern Player, sorry for the confusion. We just switched from SL 360 to 3, so I am trying to customize as much as possible. I suppose the way to do that is the same in both versions, you just need to add a line of code for each piece of the scrollbar you change. I was just wondering if I should follow the guide to see what is what within the scrollarea.
Sorry, I assumed that you were using the Modern Player as the title of this thread refers to the New Modern Dark Player.
The hack for changing the close button of the light box will only work for HTML5 output. (The Classic Player has publishing options for Flash and/or HTML5).
The Classic Player has a lot of options for changing colors. The guide is a good option. In the player properties, choose the Colors & Affects option. There you can choose a Color Scheme. Or even create your own.
For the Scrollarea: Click on Show advanced color editing. Change the Edit item: To Scrollbar
Yes, I did that, but changes won't display unless you publish for Flash, which I won't do, as it's obsolete. I'd rather have an ugly scrollbar than frustrated users :) Well, I guess I'm stuck with this scrollbar until they issue an update.
I see what you mean. The changing of the player colors in the classic player isn't reflected in the html5 output. I think this is a bug. You should contact Articulate Support.
It's not a bug, it's a feature still in the pipeline. But I still hoped there could be a way to hack this.
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>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!
It's working perfectly! Thanks so much, Russell!
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.
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.
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.
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>
Hi Russell,
I'm sorry I forgot to respond to this thread: I've managed to change the scrollbar color with the same code I was using before, there was an issue on my side. Thanks again for your help!
Hello,
Is it possible to change the lightbox button color from red to black in articulate storyline 3?
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.
And here's the result:
