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
Rodrigo Viana

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

This discussion is closed. You can start a new discussion or contact Articulate Support.