I know that this is an old question, but I am fairly new to Storyline and could do with some help. I need to add some image branding to the html page for a customer. I've tried adding the
<body background="my image"> in the header html, and I've tried an external css file, but so far, nothing has worked.
I put in an example background from an absolute link.
If you want to include an image and reference it within your package there are a few good ways to do that. You can also make your player transparent so the background shows through.
I put in an example background from an absolute link.
If you want to include an image and reference it within your package there are a few good ways to do that. You can also make your player transparent so the background shows through.
Hi Steve,
Many thanks for this, it seems to have done the trick!
In the case of the piece I included earlier, you'd invoke that within a JavaScript trigger. You can attach the trigger to many types of events like a button or a timeline start. This is handy since you don't really need to edit any of your HTML files and the change stays with the storyline source, updated on each publish.
Bill, since I saw your post this morning, I have being looking for a work around for this but I have not figure this out. Using image is easier. Check this tutorial by elearning:Adding a background image or texture to your story.html page in Articulate Storyline
I've tried both options and neither are working for me. Ugh! In IE, the background image tiles (and I don't want it to), but then disappears once the player is visible. ??? The background image isn't visible at all in Chrome or Firefox. Has anyone else been successful with adding a background image that does not repeat?
I put in an example background from an absolute link.
If you want to include an image and reference it within your package there are a few good ways to do that. You can also make your player transparent so the background shows through.
This is a great solution (at least for my needs)
i changed the javascript slightly to "document.body.style.backgroundColor="blue""
It looks like Articulate missed an opportunity in version 2 to add this feature. I would say there are probably plenty of folks who want to be able to put images, video and other features seen in most websites today as backgrounds instead of the an HTML 4 plain solid color background.
I do recognize that there are easy ways to change the presentation background and I love how Storyline resizes to match the size of the browser which is great, but most screens are either 16:9 or still hanging onto 4:3 and a good number are now 8:5 (which is a shocking find after researching it this morning).
Having a background and "floating" my presentation, perhaps even having some control of the padding built into the player controls, would really be sweet. I can't report this as a problem, but I don't see anywhere to get votes on these kinds of improvements and just suggesting it never really seems to give good ideas traction.
Does anyone else want more than just a background image behind the player? Video? Padding? More control?
And while we are at it, is there any way that when we "flag" a comment that we can also "flag" it as part of a feature request? That would really save people the trouble to make formal requests considering that there is a lot of redundancy and loss of time and energy that could but cut down if we could directly vote for, second or make the suggestion for a product improvement directly from the community interface here.
Are you referring to the "flag" button under the posts? This would actually cause the post to be sent for review for Spam. There has been recent discussion about the feature requests and how they are shared/handled, but for now it is best to just submit as many requests as possible so the development team is aware that many people want it.
Yes, Emily, that is what I am referring to. It would take minimal effort to convert that Flag button into something much more useful than a spam notifier for the admin. It could be used as a "Like" button of sorts where the comment suggests an improvement. Normally customers pay me for this kind of suggestion, but it's a freebie for you.
65 Replies
Dave - did you ever get an answer that you can share.
Dave and Bill -
You might have luck using JavaScript within a JavaScript trigger to set that up:
document.body.style.background = 'url(http://www.designmyprofile.com/images/graphics/backgrounds/background0169.jpg) no-repeat center center'
I put in an example background from an absolute link.
If you want to include an image and reference it within your package there are a few good ways to do that. You can also make your player transparent so the background shows through.
Hi Dave,
Have you thought of adding the image/custom branding to a Slide Master and re-apply the master to your slides ?
Cheers
Geert
I wrote this VBA script to add background image and some fancy ccs3 rounded corners to my custom player.
Use at your own risk !
It modifies story.js but makes a backup copy called StoryOLD.js before doing so.
Place it under your Published Directory
http://torontographic.com/examples/storyline/background.zip
Output:: I use web based publishing. Do not know if ipad, etc. looks as good.
Hi Steve,
Many thanks for this, it seems to have done the trick!
I really appreciate it.
David
Hi Bill - the response from Steve seems to have worked. Have you had any other ideas from elsewhere?
Dave
How did you get it to work? GuessI need step by step instructions.
Hi Bill
I published the project locally, then added an image to the output files.
I added the line below within the tag of the story.html file:
document.body.style.background = 'url(backing.png) no-repeat center center'
Then re-uploaded the whole lot again.
Hope this helps Bill.
Dave
Thanks Dave but still having a problem finding where the string of code goes in story.html. Can you attached a screen shot? Thanks.
Hi, Bill -
Bill, since I saw your post this morning, I have being looking for a work around for this but I have not figure this out. Using image is easier. Check this tutorial by elearning:Adding a background image or texture to your story.html page in Articulate Storyline
That was perfect! Now I need to know how not to display it in tile format. I have text included.
Hi Bill
Here's where I added the code:
I tried the method with the tiled background image, but could not get that to work.
Hope this helps
Dave
I've tried both options and neither are working for me. Ugh! In IE, the background image tiles (and I don't want it to), but then disappears once the player is visible. ??? The background image isn't visible at all in Chrome or Firefox. Has anyone else been successful with adding a background image that does not repeat?
Hi Lesley,
I'm not sure if folks are still subscribed to this thread, so you may want to send them a private message as well.
Okay, thank you Ashley!
No problem Lesley!
This is a great solution (at least for my needs)
i changed the javascript slightly to "document.body.style.backgroundColor="blue""
Alright, so I tried the fix Steve suggested but something didn't turn out right. This is what the url of my video now shows:
It looks like Articulate missed an opportunity in version 2 to add this feature. I would say there are probably plenty of folks who want to be able to put images, video and other features seen in most websites today as backgrounds instead of the an HTML 4 plain solid color background.
I do recognize that there are easy ways to change the presentation background and I love how Storyline resizes to match the size of the browser which is great, but most screens are either 16:9 or still hanging onto 4:3 and a good number are now 8:5 (which is a shocking find after researching it this morning).
Having a background and "floating" my presentation, perhaps even having some control of the padding built into the player controls, would really be sweet. I can't report this as a problem, but I don't see anywhere to get votes on these kinds of improvements and just suggesting it never really seems to give good ideas traction.
Does anyone else want more than just a background image behind the player? Video? Padding? More control?
Hello Joseph,
I am sure others would like this as well. You can always submit a feature request. The more the better.
Thank you, Emily. I have done so at your urging.
And while we are at it, is there any way that when we "flag" a comment that we can also "flag" it as part of a feature request? That would really save people the trouble to make formal requests considering that there is a lot of redundancy and loss of time and energy that could but cut down if we could directly vote for, second or make the suggestion for a product improvement directly from the community interface here.
Hello Joseph,
Are you referring to the "flag" button under the posts? This would actually cause the post to be sent for review for Spam. There has been recent discussion about the feature requests and how they are shared/handled, but for now it is best to just submit as many requests as possible so the development team is aware that many people want it.
Yes, Emily, that is what I am referring to. It would take minimal effort to convert that Flag button into something much more useful than a spam notifier for the admin. It could be used as a "Like" button of sorts where the comment suggests an improvement. Normally customers pay me for this kind of suggestion, but it's a freebie for you.
This discussion is closed. You can start a new discussion or contact Articulate Support.