Forum Discussion
STORYLINE LIGHTBOX BACKGROUND (MODERN PLAYER) NOT TRANSPARENT
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
53 Replies
Hi Eric,
It looks like you replied by email, so your attachments didn't make it! Feel free to jump into this discussion and use the Add Attachment button for your reply!
Oh nevermind on the slide size..it's because it's transparent duh and you created a box. But still stumped on the javascript...
I have been trying to get this to work as well, and nothing seems to do the trick. I also tried to use the code snippet to remove the close button and that does not work either.
Is it possible that Articulate changed something, perhaps naming, that is causing issues with the code?
Hi Bill,
Take a look at this storyline file.
For the lightbox slide, there is an execute javascript trigger that sets the background to transparent.
I also added a couple of buttons that will show or hide the lightbox close button.
THANK YOU SO MUCH!!!
Hi BIll,
I'll tell you what we did instead since we couldn't get the code to work. We used a layer and put a box on that layer the size of the slide and then made that box color slightly transparent and then put the contents on that box. I attached screenshots so that you can see. We had a video play, I set the layer to show once the media completed, and then you're able to see the content behind it and in front.
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;}
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.
Thanks, Russell! That solved our problem :).
