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.
Hi David,
I decided to try manipulating the close button with javascript.
On the lightbox slide, there is an execute javascript trigger on timeline start.
var x = document.getElementsByClassName("lightbox-close-btn")[0];
x.style.backgroundColor = "#ff0000";
x.style.width = "40px";
x.style.height = "40px";
x.style.padding = "10px";
x.style.margin = "10px";Here is a sample project for you to look at.
This is awesome, Russell! Thanks so much for sharing it.
Is the a line of JS that can be added to increase the size of the "X" itself (say to 200%)?
Hello Clint,
You could try:
var x = document.getElementsByClassName("lightbox-close-btn")[0];
x.style.transform = "scale(2.0)";
Great stuff Russell. Was looking for a way to change that color, as I have no red objects anywhere in a series of modules I'm developing.
Thanks!
I'm trying to apply it to my file and it's not working. in fact I tried it in the one shared and it doesn't work.
Did anyone else have the same issue?
Thanks again for the tip, Russell!
The close button works great - the glitch is gone now. The scrollarea is not changing, though. Could it be that the piece of the scrollarea is not referred to correctly?
So far when customizing, I've been using the reference guide attached below. Is it correct to use these terms when editing the .html?
The pdf that you shared is for changing the colors of the Classic Player.
The Modern Player only has few options. A light theme, a dark theme, and an accent color.
In order to change the colors of the modern player beyond the few options, you have to hack it. (This is not supported by Articulate).
Here is a screen shot of what the scroll area should look like after applying the color change hack.
oh wow, thanks!
Sorry i didn't see this until just now.
Hey Clint,
Glad that this conversation was able to help you out as well.
I'm not sure if Russell is still subscribed here. You are welcome to reach out to the user directly via the 'Contact Me' option on the user profile if you do not hear back soon.
That code is a life-saver, Russell!
I am noticing something weird though, and don't know if it's just me or anyone else has seen this too: the original color of the close icon can be seen for a split second while opening the lightbox slide. Then it's gone, but it still feels a bit like a glitch.
If you have a transition on the slide it will show until the transition completes.
No, I don't, just a plain slide. Also, you can barely see it - it doesn't fully display, like I said - looks like a glitch; not fully visible, but still annoying.
Hello Alexandra,
Styling the lightbox close button can also be done without using javascript.
After publishing your course, you will need to add some lines of code to story_html5.html
I prefer editing html files using a program called Sublime Text. Another program that is popular is called Notepad++
Just before the closing head tag ( </head> around line 15 ) I added:
<style>
.lightbox-close-btn{
background-color: #ff0000 !important;
width: 40px !important;
height: 40px !important;
padding: 10px !important;
margin: 10px !important;
}
</style>Here is a screenshot of what it looks like in Sublime Text.
I am not sure there is a work around, this is hacking the player code and is liable to break in future versions of the player.
If you are publishing for an LMS, you will need to add the lines of code to index_lms_html5.html instead.
Again, just before the closing head tag (</head> around line 32)
Thanks so much, Russell! I will try these out.
I was also wondering if there is a way to change the color of the side scrollbar on the player: the default is light grey, which doesn't work well with dark colors. Have you tried changing the code for it? Is it possible to do it without breaking anything? :)
Hello Alexandra,
This can be done by using the same technique as above. You will need the Hexadecimal Code for your color.
For example, the Hexadecimal Code for Red is: #FF0000
<style>
.scrollarea-btn::after{
background-color: #FF0000 !important;
}
</style>
Hello Russell and thanks so much for your reply!
I have some more questions, though: Can I simply open the .html with Notepad? It's how I've done it so far - does it make any difference? Also, I am not able to find any code related to the scroll bar - is it possible that changes for it are restricted in SL3?
Yes, you can edit the .html files in Notepad, but it isn't as user friendly.
You won't find that code in the html file. Just add it in before the closing head tag. </head>
The actual colors and styling of the player is in the output.min.css file.
Adding some styles to the html files with the !important overrides the styles in the output.min.css
