Customize Your Lightbox Slide: Color and Opacity

As a result of my participation in ELH Challenge 413 which centered on the use of Lightboxes, I began an investigation into how one might go about adjusting some of the properties of a lightbox. My first goal was to see if the close ("X") button could be adjusted in terms of color and opacity. After isolating the line of code in the output folder, I enlisted the help of ChatGPT to produce a JavaScript command that would allow me to change the color and opacity of said button. As I began inputting my request, I realized I didn't particularly like the fact that the close button is semi-transparent, and that I would much prefer it to be solid/opaque. A minute later and, voila!, ChatGPT provided the following:

document.styleSheets[2].addRule('.lightbox-close-btn-floating:after', 'background-color: #FF0000');

After addressing the close button, I turned my attention to the semi-transparent background that appears when lightboxing a slide - another feature I am not particularly fond of. If only there was a way to not only make the background less transparent (so the learner isn't distracted by content on the base layer peeking through), but also switch up the color. Wouldn't that be nice? ChatGPT to the rescue!

document.querySelector('.visible-overlay').style.setProperty('background-color', 'rgba(255,255,255,0.98)');

 

Add these commands to a couple of Execute JavaScript triggers when the timeline starts on your lightbox slide and enjoy!

See a demo here.