Put YOUR Logo in the Top Left of the Player (SL3 / SL360)
Jun 23, 2017
Have you ever wanted to place your company logo IN the player itself? You can with a bit of JavaScript in StoryLine 3 or 360 but there are a few restrictions.
- Add a T/F variable to control running the JavaScript only once. Set its initial value to True.
- Add your JavaScript trigger to run When timeline starts if your control variable is equal to true. (See JavaScript explanation below)
- Set your control variable equal to false When timeline starts and be sure it is in the trigger stack below your JavaScript trigger
- Be sure your player size is Locked at optimal size.
Here is the JavaScript:
//First we are going to add a logo to the webpage
//Create a new image element and set its attributes
var newLogo = document.createElement('img');
newLogo.setAttribute('src', 'http://ImageAddress');
newLogo.setAttribute('id', 'CustomLogo');
// I've found 45 to be about the largest you want your height to be but you can adjust as needed.
newLogo.setAttribute('height', '45');
//Add your logo to the page
document.body.insertBefore(newLogo, document.body.firstChild);
//This next part uses a bit of JQuery to find the title in the StoryLine player and then move the element you just created to be right before it.
$(".presentation-title").before($("#CustomLogo"));
You might be able to do something similar in SL2 but I haven't tried it yet. You would need to start by identifying how the title element is named in the SL2 player. Have fun and let me know how this works for you!
Credits: Thanks to James Kingsley for the inspiration. His "Hacking the Player" webinar was very useful. You can view it here: Webinar Recording
18 Replies
You are incredible Owen - you do realise you've unleashed a monster. Now peeps will want you to show how to replace the default nav buttons with their custom ones... :-)
Thanks Wendy, but I think I will leave that to bigger/brighter minds than mine. :-)
I tried out a few more SL3 "player hacks" including adding a print button directly in the player. You can read about it in this post where I've included a StoryLine 3 .story source file.
That is pretty sweet!
Glad you found the webinar useful!
Hi! This is pretty great!!
But I was wondering if it could be possible to center the logo? I understand the logo is depending on the title but still wondering if it's possible.
Not that I have found so far.
However, you could add transparent space on the left of your logo (using similar coding as that used to add the logo) change the code to insert the logo after the title instead of before it, and then do the same with the blank space. You can then adjust the width of the blank space until you find a width that has the desired effect. I just tried it and it worked. Here is my code and an image of the result.
//Add the logo to the page
var newLogo = document.createElement('img');
newLogo.setAttribute('src', 'https://community.articulate.com/assets/mark-fb-bddbd92870305f01d422d8bf0e0d6d6d.png');
newLogo.setAttribute('id', 'CustomLogo');
newLogo.setAttribute('height', '45');
document.body.insertBefore(newLogo, document.body.firstChild);
//Add a transparent image to the page
var blankSpace = document.createElement('img');
blankSpace.setAttribute('src', 'https://www.transparenttextures.com/patterns/asfalt-light.png');
blankSpace.setAttribute('id', 'BlankSpace');
blankSpace.setAttribute('height', '45');
document.body.insertBefore(blankSpace, document.body.firstChild);
//move the logo and transparent image into the player
$(".presentation-title").after($("#CustomLogo"));
$(".presentation-title").after($("#BlankSpace"));
//Resize the width of the transparent image
$("#BlankSpace").attr("width", "150");
Just found out how to center my logo without the transparent thingy + it is responsive!
Here's how to do it (copy and paste this and customize what need to be customized, such as your logo's link and height):
//Here is where you insert your logo's link
//Here is where you set your logo's height
//Here is the function to inject a <style> tag
//Here is the injected CSS that center the logo
You can check it out in action: DEMO
Thanks again for your help Owen Holt. It is very appreciated!
Nice solution. Thank you for posting your results!
Owen I know this is an obvious question but when test publishing i only have the logo on my local drive, you have to already have the image residing at an http address?
Yes, it needs to be on the internet or your company's intranet.
There is a trick you can employ in StoryLine using a web object as a suitcase to publish other items you want to use in your courses like images or music files. I think there is a thread detailing it somewhere but I don't have the link handy.
No worries, I placed the image on the intranet and got it to work (I don't know what I was thinking), thank you, still working through some issues but def a good step forward. So I understand this clearly, this logo is in the player that wraps around the content you create?
That is correct.
Does anyone know what I can do to show the logo in the upper right hand corner?
Yes looking for top right hand corner to put the logo. Any ideas??
We will hide this later if you are not publishing course resources but we are going to use it to locate the right corner of the player.
$(".presentation-title").before($("#CustomLogo"));
With this:
$("#tab-resources").after($("#CustomLogo"));
$("#tab-resources").hide();
That should do it for SL3 and SL360.
Thank you so much. Will definitely give it a try.
WORKS GREAT!!!
Glad you found it useful and that the code is still working.
This discussion is closed. You can start a new discussion or contact Articulate Support.