Custom "Close" button for Lightbox (Solution) (HTML5)

Jan 27, 2017

Hi people,

I was looking for an solution to customize the default "close/x" button for the lightbox and i can't find it, so i digged inside the published files and source codes and find a way.

How to do it:

After publish your course in HTML5, look for "player.css" inside "mobile" folder. After that, open the CSS file and look for ".window .closeicon", now you can customize the CSS of the button shape and colors.

It will be always an X as content of the button. To change it, you need to look for "player_compiled.js" in the same "mobile" folder. Search for the line "<div class='closeicon'><span>x</span></div>".

You can now change the text or content just replacing the "x".

8 Replies

Alyssa Gomez
Staff

7 years ago01/27/17 at 5:13 pm (UTC)

Thank you for sharing that solution, Rodrigo! We do not support the modification of published output, but I know I've seen questions about changing the lightbox close button here and there around the forums, so I'm sure other users will be interested in your workaround!

7 years ago01/27/17 at 5:50 pm (UTC)

Hi Alyssa, i was indeed concerned about it (yours support about changing published files), but i think this is kind of advanced and for those who know something about CSS and JS.

Anyway, after seeing how simple it was for me, i trully believe that this could be added as an simple option on the player editor. I use the software everyday a

Alyssa Gomez
Staff

7 years ago01/27/17 at 6:03 pm (UTC)

Hey Rodrigo,

I can appreciate where you're coming from, and it's certainly an idea worth passing along to our product development team. Can you submit a feature request for what you’d like to see?

7 years ago01/27/17 at 6:22 pm (UTC)

Sure, i will do it.

Thanks.

Alyssa Gomez
Staff

7 years ago01/27/17 at 6:31 pm (UTC)

Thanks, Rodrigo!

Marcel van Lierop

over 6 years ago12/20/17 at 2:06 pm (UTC)

Hi there Rodrigo.

Thanks for sharing your solution with us! I was about to start some digging in the published folders myself to change that nasty image when I thought: "someone must have tried this before" :)