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.

  1. Add a T/F variable to control running the JavaScript only once. Set its initial value to True.
  2. Add your JavaScript trigger to run When timeline starts if your control variable is equal to true.  (See JavaScript explanation below)
  3. Set your control variable equal to false When timeline starts and be sure it is in the trigger stack below your JavaScript trigger
  4. 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
OWEN HOLT

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");

Xavier Godbout

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):

var newLogo = document.createElement('img');

//Here is where you insert your logo's link

newLogo.setAttribute('src', 'https://link_to_your_image.png');
newLogo.setAttribute('class', 'CustomLogo');

//Here is where you set your logo's height

newLogo.setAttribute('height', '30');
document.body.insertBefore(newLogo, document.body.firstChild);
$(".presentation-title").before($(".CustomLogo"));

//Here is the function to inject a <style> tag

function injectStyles(rule) {
var div = $("<div />", {
html: '&shy;<style>' + rule + '</style>'
}).appendTo("body");
}

//Here is the injected CSS that center the logo

injectStyles('.CustomLogo { position: absolute; margin: auto; right: 0; left: 0; padding-bottom: 5px }');

 

You can check it out in action: DEMO

Thanks again for your help Owen Holt. It is very appreciated! 

OWEN HOLT

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.

OWEN HOLT
  1. Be sure that you are including the resources tab in your player IN ITS DEFAULT LOCATION
    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.
  2. In the initial code in my post, replace this:
    $(".presentation-title").before($("#CustomLogo"));
    With this:
    $("#tab-resources").after($("#CustomLogo"));
  3. If you now want to hide the resources tab (optional) add this line of code right after the one above:
    $("#tab-resources").hide();

That should do it for SL3 and SL360.

This discussion is closed. You can start a new discussion or contact Articulate Support.