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.

27 Replies
Russell Killips

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.

Russell Killips

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.

Sublime

Alexandra Angelova

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

Alexandra Angelova

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? 

Russell Killips

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

Alexandra Angelova

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? 

Russell Killips

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.

Scroll Area Hack

 

Alexandra Angelova

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.

Russell Killips

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

Scrollbar