Here's a job aid to help you quickly identify which parameters in Storyline's player properties are used to control the color of each item on your course player. If you need help with how to customize your player colors, check out this tutorial.
Hi Jeanette,
This is really helpful. Thanks! But I was wondering if I could use a background image for the HTML page background in Storyline instead of just having the background as a plain solid color.
If this is possible, please show me how.
Kind regards
Kay
Hello Kay. There isn't currently a feature that allows you to add a background image behind your player; that would make a great feature request: www.articulate.com/.../submit.php That said, I have seen folks accomplish this by using this unsupported method: if you edit the story.html file directly, so that it references a background image, and then place that image in the same folder where story.html resides, the image will replace the solid color background. There is currently a line in story.html that looks like this: body { margin: 0px; } and it would need to be changed to this:
body {margin: 0px; background-image: url(yourpicture.jpg);
background-repeat: repeat;}
and also you'd need to place yourpicture.jpg in the same location as story.html. A big downside is that you'd ... Expand
Hello Kay. There isn't currently a feature that allows you to add a background image behind your player; that would make a great feature request: www.articulate.com/.../submit.php That said, I have seen folks accomplish this by using this unsupported method: if you edit the story.html file directly, so that it references a background image, and then place that image in the same folder where story.html resides, the image will replace the solid color background. There is currently a line in story.html that looks like this: body { margin: 0px; } and it would need to be changed to this:
body {margin: 0px; background-image: url(yourpicture.jpg);
background-repeat: repeat;}
and also you'd need to place yourpicture.jpg in the same location as story.html. A big downside is that you'd need to make the same change every time you republish, since the files get overwritten if you publish again.
The screen background tip is brilliant but I'm wondering if I can push my luck one step further. At the moment it displays the chosen image tiled. Is there a way to make a single pictire fill the background?
Great! Jeanette, You're the best. One more thing though.
I find that after doing this, I still have some sort of background that still surrounds the player making my background image unable to fill the whole html space. is there a way I get get rid of this troublesome border?
Thank you.
Hi Kay - It sounds like you are wanting to remove all traces of the player frame while also incorporating your own custom background. Unfortunately, although the player frame does allow you to set the color to 100% transparent, this only works if you are using a solid color html background... if you manually modify the story.html file to include a background image as we discussed above, the frame becomes visible and there isn't currently a way to change that. Again, I'd recommend submitting a request for a feature that would allow a custom image to be used in place of the standard solid background - that would make a great enhancement. www.articulate.com/.../submit.php
Thanks for all the helpful tips Jeanette! It's been four years and we still can't change the player frame to transparent or to a different color. I changed the story.html background to a gradient background, now all for corners of the players are showing in white. I wish I could fix that. :(
Hi Jeanette,
This is cool and I enjoyed your in-depth coverage of topics. I'd like to know why some of these materials, like videos that you upload, are not downloadable for offline viewing.
Is there any way you can provide the links? Thanks.
hi martin, i too like to sometimes view content from Heroes offline. Here are a couple resources I use to do it: if you go to www.flashvideodownloader.org/helpchrome.php you can get a Chrome add-in called FVD which allows you to download videos. You just go to whatever tutorial page you want and when you start playing the video, the FVD button on your chrome toolbar lights up. Press that and you'll be able to download the mp4 and have it on your hard drive. As far as the other content on the tutorial pages, i like to use a tool called Web2PDF Converter. It lets you save web pages as a pdf file--- very handy!! You can get it here: http://www.web2pdfconvert.com/
Hi Jeanette
Where do I find the color attributes which drive the popup which appears, for example, when you don't answer a quiz question at all (not the correct/incorrect feedback popup but the one that says "you must answer this question"). I've looked everywhere and can't work it out! Thanks.
Hi Graeme - the Invalid Answer message that learners see when they click Submit without answering a question is a pop-up message that Storyline displays automatically...to change its colors, check page 2 of the Storyline Player Colors job aid, the section called "Pop-ups." The color of the popup itself is controlled by "Window >bg" and the other "Window" parameters. The button color on the popup is controlled by "Editor>btn_bg" and the other "Editor" parameters.
Hi Jeanette
Is there a tool or guide to help you choose your different colors on your player?
For example... a color wheel or color pallet showing the colors that work on the player.
It is awesome that you have so much control over what's going on on your player, but there are so many different features and elements. I find it difficult to coordinate all the colors making sure they match.
Choosing one of the preset color schemes is much easier but it limits you.
Hi Monica
We find a lot of our clients are a bit overawed by the different options so we now offer a Storyline template design service to set them on their way. This includes the player, theme plus all the standard interaction types and questions in your house style. Contact stephen.miller@omniplex.co.uk for details if you think it might help you.
Hi Monica! Graeme's serve is a nice option. Another thing that I've seen folks do is choose a ready-made color scheme that most closely matches your preferences, and then make customizations to just specific components as necessary. Our dev team loves feature requests, though, so if you'd like to see a guided method of choosing various color parameters, we value your suggestions! You can submit them here: www.articulate.com/.../submit.php
Hi Gustaf, the parameter called Tabs>>text controls the color of the tab titles in the sidebar of your Storyline player. Any tab that's currently selected will appear in the color of Tabs>>selected. Are you wanting to change the color of tab titles in the top bar of your player instead? If so, try changing Base>>text. If that still doesn't help, would you mind posting a screenshot in the Storyline forum, to show what item you're wanting to change? community.articulate.com/.../65.aspx That way we can help you out better. Thanks! :)
This is one great guide. Really useful for talking to clients about style guidelines. One quick question - Where can I change the font size of the menu list?
Hi Michael - right now there isn't a feature in Storyline that allows you to change the font of the menu titles. But that would make a great feature request! www.articulate.com/.../submit.php In the meantime, here's a post that contains a couple ideas that might help: community.articulate.com/.../16104.aspx
Hi Jeanette
This aid is really useful, thank you. I have a small problem adding a white logo to the dark blue background base. Although the logo is a transparent .png it is just showing as a white block. I've used transparent .pngs on the slides, but the Player appears to handle them differently.
Hi Jeanette,
Thanks so much for providing this and all the other useful hints and tricks.
It has lifted the appearance of the projects I'm currently working on - the client loves it!
116 Comments
Hello Kay. There isn't currently a feature that allows you to add a background image behind your player; that would make a great feature request: www.articulate.com/.../submit.php That said, I have seen folks accomplish this by using this unsupported method: if you edit the story.html file directly, so that it references a background image, and then place that image in the same folder where story.html resides, the image will replace the solid color background. There is currently a line in story.html that looks like this: body { margin: 0px; } and it would need to be changed to this: body {margin: 0px; background-image: url(yourpicture.jpg); background-repeat: repeat;} and also you'd need to place yourpicture.jpg in the same location as story.html. A big downside is that you'd ... Expand