STORYLINE LIGHTBOX BACKGROUND (MODERN PLAYER) NOT TRANSPARENT

Mar 12, 2019

Hello all,

I would like to know if it is possible to use the lightbox functionality and make the slide background of the lightbox 100% transparent. We don't want custom made because of certain reasons. The background keeps appearing of the slide itself opaque no matter what settings I try in the format background panel. It will not be transparent at all, also by trying changing this in the masterslide decks makes no difference. I've attached a screendump of what happens cq what I need. (photoshopped it).

Please let me know if it's possible. It influences our design decisions at this point so any decisive answer would be nice.

Kind regards and thanks for your answer in advance.

Judith

50 Replies
Russell Killips

Hi Bill,

There is a way to get this working so you don't briefly see the white background.
In order to do that, I usually edit a couple of html files after publishing it. With this approach, you won't need to use the execute javascript triggers.

If you publish for web, you will only need to edit the story.html file.

If publishing for lms, I edit 2 files: story.html and index_lms.html

I prefer using a program called 'Sublime Text' to do edit the files. It is possible to use notepad but it isn't as nice.

Here is the code that I add in just before the closing head tag (</head>):

<style>
.lightBoxSlide{background-color: transparent !important;}
#light-box-wrapper{background-color: transparent !important;}
</style>

If you also want to hide the lightbox close button, add this line of code in before the closing style tag (</style>):

.lightbox-close-btn-floating{display: none !important;}

Here is a screen shot of the story.html file after adding in the code (Lines 17 - 21).

lightbox code to hide background and close button

Stephan Padel

Awesome! That solves a lot of problems.

Do you guys know whether it's possible to change the effect the the lightbox has on the "rest" of the screen?

What I mean is this: When you open a lightbox, the remainder of the screen that doesn't show the lightbox is darkened. Is it possible to prohibit that?

Any help would be greatly appreciated!

Stephan Padel

Hi Kris,

Correct, the code doesn't go into Storyline directly but needs to be inserted into the story.html file after you have exported the project.

To do that, you can open the story.html with a text editor of your choice and then add the following code to the <head> of the html file:

<style>
.visible-overlay{background-color: transparent !important;}
</style>

I hope this helps!

Cheers,

Stephan

Zsolt Olah

I have a lightbox where I needed to make the background transparent, hide the lightbox wrapper, and also adjust overlay color/transparency around it (that I used for a fading effect).

I put these in a JavaScript trigger on the lightbox slide master layout. You don't need all of these, you can play around each of them and see the result. Using this was easier than editing the output html every time. It's important that these are on slides used for lightbox only because it assumes you have these elements on the page. I also added a trigger on the masterpage for Escape. When the user presses Escape on a lightbox, it closes. Much friendlier than mousing or tabbing to the X.

document.getElementsByClassName('lightBoxSlide')[0].style.backgroundColor = "transparent"

document.getElementsByClassName('visible-overlay')[0].style.backgroundColor = "rgba(255, 255, 255, 1)"

document.getElementById('light-box-wrapper').style.background="none"

Math Notermans

As some extra info on Zsolt's approach...

If you want the backgroundColor of the overlay element partially transparent..
the a in rgba stands for alpha... ranging from 0 to 1..

So...
document.getElementsByClassName('visible-overlay')[0].style.backgroundColor = "rgba(255, 255, 255, 0.5)"
gives you a 50% transparant overlay.

Nicholas Clowes

Hi folks, I've been trying to get this to work in a project I'm currently working on. I've managed to get it working with Russel's approach, but I haven't been able to get rid of the brief moment of background before the JS trigger removes it. I can't edit the HTML files directly for reasons. Can anyone point me in the right direction?

Mark Wheeler

Hi, fairly new to storyline after spending years with captivate.
Could someone please explain to me where these java triggers need to go/how to be triggered. I can't for the life in me get them to work.

I've tried both 
document.getElementsByClassName('lightBoxSlide')[0].style.backgroundColor = "transparent"

and
$(".lightbox").find("rect[id^='slide-bg']").hide();

using - execute javascript, when the timeline starts on this slide
and I've tried these on both the slide that is the lightbox and the master slide for that slide.

Neither have worked.
I'm trying to create a universal support slide for our courses (triggered from a support option on the player) have I done something wrong with the script or is it not supported when triggered from the player.

please help

Miriam Schneider

Hi Mark, unfortunately I can't open the story file you are referring to anymore. Would you be willing to share the code you used to make the background transparent? All the codes shared in previous posts did not work for me (neither when inserted on Master slide or on the lightbox slide itself.)

Zsolt Olah

Hi Miriam, 

Try this: 

1. Create a base slide where you launch the light box.
2. Create another slide that will be the light box. 
3. Set the background color of the light box slide to Fill Color (pick any), and drag the transparency all the way to 100%. 
4. Add the following in the light box slide as a JavaScript trigger when the slide timeline starts:

document.getElementsByClassName('lightBoxSlide')[0].style.backgroundColor = "transparent"

document.getElementsByClassName('visible-overlay')[0].style.backgroundColor = "rgba(255, 255, 255, 0)"

document.getElementById('light-box-wrapper').style.background="none"

Here's an example: https://360.articulate.com/review/content/d58c7b60-d4e6-447c-b6d8-79696568620d/review

Bonus info: with a lightbox, Storyline saves your suspend data in the LMS. This has nothing to do with the transparency but good to know. For example, if build a game and you're staying a single slide and you gain score, the LMS will not remember it until you leave the side. OR you show something on a lightbox.