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

oh wow, thanks!

Sorry i didn't see this until just now.

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%)?

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.

Hello Clint,

You could try:

var x = document.getElementsByClassName("lightbox-close-btn")[0];
x.style.transform = "scale(2.0)";

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 = "20px";
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?

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. 

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.

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.

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

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.

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.