javascript coding for changing the background color in SL3

Hi Geetha,

What background color are you trying to change? The HTML background outside the slide? Have you tried changing the color in the player properties (see screenshot)?

To change the color of the HTML page, use something like the following (note that this example changes the background to red).

document.body.style.backgroundColor = "#AA0000"; 

If you make your slide background transparent in BOTH the player AND on specific slides or all of your slides, this will have the effect of changing your slide background as well.

Note that you can use this same concept to use a background image instead of a color.

1. Set your slide background (and any other player elements you wish to hide) to transparent using the advanced color editing option in the StoryLine player properties colors and effects window.
2. Set the slide background for individual slides to transparent by:
   1. right clicking on the slide
   2. selecting "format background"
   3. and then adjusting the transparency to 100%
      You can apply this to all slides directly here or pick and choose which slides should be transparent.
      You can also perform these steps on a slide master for use in your project
3. Use the following JS where you want to change the background:
   document.body.style.backgroundSize = "cover";
   document.body.style.backgroundImage = "URL('url of your image')";

Hi Allison,

I want to change user interface color,  can you help me in that part

Thanx Owen, ill try the above option and get back to you.

Hi Owen,

the code executes in changing the background(html) color, but I want to change the player color when a button is clicked.

the main concept is to change the theme color of the player dynamically. Once the user clicks the theme option button, the player color(theme) has to be changed.

Can u provide js code for the same.

StoryLine controls the player fonts and colors through an external .css sheet.  To accomplish what you are trying to do, you would need to:

1. Duplicate the style sheet found in your published output and give it a unique name (like blue player, red player, etc.
   
2. locate the section that controls the player text color, border color, & background color.
   
3. Change the values to create the theme you are looking for. The first set of rgba values control the text in the player frame, the next set controls the border, the 3rd set is your top gradient color and the 4th is your bottom gradient.
4. Use JavaScript to dynamically change the style sheet of the page (effectively applying the new color values to the player.  You are going to have to research that one but I did a quick google and this page looks promising: http://www.cssnewbie.com/simple-jquery-stylesheet-switcher

You can test this "on the fly" using the developer window of your browser and see the impact of changing the css to get the look you want.

Additional Info

• I followed the steps above and created 3 new style themes (see attached files below for red, green, and blue).
• After publishing the attached SL3 file, I dropped these in the same folder as the output.min.css file. You should now have 4 style sheets in the published folder and can view the JavaScript in action.
• The attached StoryLine 3 file executes the following JavaScript
  1. On timeline start, you need to find the link element on the page with the url to your default css and give it a unique ID that you can later reference:
     $("link[href='html5/data/css/output.min.css']").attr('id', 'target-css')
  2. Each button uses the id to find the element and replace the href link with a link to a different style sheet:
     Red Button JS: $("#target-css").attr('href', 'html5/data/css/output.red.css');
     Green Button JS: $("#target-css").attr('href', 'html5/data/css/output.green.css');
     Blue Button JS: $("#target-css").attr('href', 'html5/data/css/output.blue.css');

You can try it out on your own using the files below and the instructions above.

hi Owen,

thanks a lot for the explanation. ill try out the steps and get back to you

It's working thanks a lot. I implemented in my project 

hi Owen,

document.body.style.backgroundImage = "URL('url of your image')";

for the above code, where I have to place the image.ie, which folder I have to store the image. whether it should be in local or ?????

The image needs to be on the internet. It doesn't matter whether you place it with your files or somewhere else, as long as you know the html path to it. However, if it is on your desktop, only you will see it as (hopefully) no one else has access to your computer via the internet. So, DO NOT leave it on a local drive or your desktop.

Thanks, Owen :) .  can you suggest me links where I can refer js code for articulate 

Hi Owen,

Kindly check attached file.

we tried to change the bg of HTML and the loader in the Stoline file, it's working in local machine but it's not working in SCORM cloud(lms).

pls let me know the reason and a solution also

I can't diagnose from the published files. I would need to see the .story file and any associated .CSS files you are using.

Hi Owen soon ill get u that file.

can we keep image instead of changing color in the standard player? 

I'm not sure exactly what you mean. You can give the web page a background image and make the StoryLine player transparent. Would that achieve what you want?

Hi Owen,

Thanks a lot. your inputs made a lot of difference in our perspective in making of modules. keep in touch if any new ideas in SL. :)

Hi Owen,

I created a story file with custom UI and attached a video to play in the HTML background. that video is an introduction video. at the end of the video start button ll come which leads to next slide, at that time the bg video should disappear and proceed with next slide.

Unzip the file. check the coding in story_html5 and the video i pasted.

Hi owen,

Expecting for your reply

I didn't understand that you were looking for feedback. I can see the published file fine and the movie plays in the background. Are you asking how to hide it when the user clicks the next button?  If so, you would need to add a trigger to the next button to execute JavaScript to assign a new background and make sure that the trigger is placed before any other triggers associated with the button.

I can't really work from the published file to give you more direction; you would need to share the .story file.

thanks Owen,

yeah, i want the video to disappear after I click the next button.

> I tried the solution that u have suggested. am not getting the output as expected. the background color is changing but the video exists in bg. please refer the screenshot

> the video is not playing in fullscreen( please give solution for this also)

Video code :

<style>html.body{
background: url('Video.mp4') no-repeat;
background-size: cover; (to play the video in full scrren( according to my knowldge ))
overflow: hidden;
}
</style>

// use in story_html5.html file before style rel..

<video autoplay loop> (removed loop to stop the video)
<source src="Video.mp4" type="video/mp4">
</video>

Owen ,

In mobile view, the HTML background is not viewing.  the black view is loaded automatically. the background image is not loading. pls check if any settings should be changed

Pls check the screenshot in the attachment

I think your best course of action would be to create 2 custom CSS pages based on the default .css file created at publish. Dump them into your published course folder and use JavaScript to change which .css file is in use when you want the changes to occur. 
Check out the post here which covers most of what you will need. Link to Post.
The part that is not covered is modifying the .css file directly but I think you can probably figure that out; you already have the code that you need and should be able to find the parts that need to be replaced directly in the document.