After publishing your storyline course you might notice the menu text/font size is too small to see. If you try to increase the menu font size you will notice that storyline only supports to customize font and not the ‘font size’.
To overcome this issue the storyline recommends to resize the player to fit to the full screen so everything on the screen (including menu, content, navigation controls etc.) will be scaled up including the menu.
However zooming (scaling will result like zoom effect) the contents is not a good idea and this work around will only apply to PC. What about iPads? With iPad we will end up viewing the course in either 8″ or 10″ screen and resizing the content is not an option when HTML5 courses viewed on mobile safari browser (assuming you are not using articulate mobile player).
When viewed on iPad the menu font/text size will be too small and it will be really difficult to read and tap.
At this point increasing the font size on the menu seems to be a ‘hot feature request’ and I hope storyline would sooner than later will consider this addition into the tool.
But until then, you can try this workaround:
- On the storyline published course, look for the file named player.css within mobile folder
- Open this file in a text editor like notepad or notepad++
- Visit line number 1470 or search for ul.slidelist li (it is a CSS block)
- This CSS style block is responsible for the Storyline HTML5 player’s menu font/text style
- Editing the font-size and height fields here would change the menu text style
Let’s take an example. By default, the font-size will be 11px and height will be 16px as shown below:
If you slightly increase this font-size and height (height affects highlight area) then notice it increases font size on the storyline menu.
Now the course menu would look much better and friendly to tap on the small screens such as iPad.
Before you make your hands dirty with this trick:
- Please understand what you are doing. You are editing the course output to change the UI. This means, every time you republish the course you will be required to change this setting. So it is ideal to change this setting during your QA stages and later.
- This is the trick I have personally found for my needs and not the recommendation provided by the product makers – Articulate
- It is only a temporary work around until we get the option to change the font size on the authoring environment itself
- This change only affects the HTML5 format output and not Flash or iOS versions
Have a question or feedback? Feel free to use the comments area below. If you are looking for more interesting posts like this then check out the post index page and subscribe for future posts using the option available on the right side menu.