25 Replies
OWEN HOLT

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.

OWEN HOLT

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')";
Geetha R

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.

OWEN HOLT

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.

 

OWEN HOLT

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.

OWEN HOLT

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.

Geetha R

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.

OWEN HOLT

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.

Geetha R

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 HOLT

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.
T
he 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.