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
That works, but a white background briefly shows before becoming transparent. I have published to web when viewing it in my file. But this seems like it will work for what I need, thank you!
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).
Russell, THANK YOU so much for sharing this! Works perfectly!
If you want this always on every project you publish, you can add/edit it in
C:\Program Files (x86)\Articulate\360\Storyline\player\unified
in these 3 files...
index.html
index_lms.html
index_lms_aicc.html
These are used by Articulate to create the html files.
Thank you, Math! That also makes the process a lot more streamlined. You guys are awesome!
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!
Hi Stephan,
That is an overlay that appears when opening the lightbox.
You can make the overlay transparent by using:
.visible-overlay{background-color: transparent !important;}
Thanks, Russell! That solved our problem :).
Just wanted to jump in to thank everyone who has contributed to this. Took me only a few moments to find the answers I was after when I searched and the solutions above work beautifully!
Hi! Thanks for the tip. Do you add this code on the slide that is shown in the Lightbox or when you trigger to open the Lightbox?
Thanks for any further clarification.
Hi Kris,
you add this code not on a slide in the Storyline project itself. Add it in the story.html file that ist created after you export your course.
HI Jannis,
For the following code that was included by @Russell Killips above, it does not go into SL directly?
.visible-overlay{background-color: transparent !important;}
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
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"
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.
Thanks for this solution Zsolt. It worked perfectly for my needs. :-)
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?
Hi Zsolt
Thank you very much for the solution. It works but I seem to have a black border on the lightbox that I cannot get rid off. Do you perhaps know of a code that can help with the problem.
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
finally got it working by copying the code from Russell's "Lightbox_Transparent_Background.story" file, which seems to be different to the other code people say work. So who knows, but glad got it working
Hello everyone, its now some years later and some of the old links don't seem to work anymore. is there a new solution to getting the lightbox background transparent?
Hi, Marion!
Other members might not be subscribed to this discussion, but you're welcome to contact them directly through their profile by clicking on their name and selecting Contact Me.
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.)
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.
Thanks so much!!! works like a charm!
Only the first time I opened it, the white background was visible for a
moment before it turned transparent. Is there any way to get rid of this
as well?
Best,
Miriam