«

»

May
28
2013

How to increase the Menu font size for Articulate Storyline courses

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’.

Default Storyline Font Setting

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.

 

Default Storyline Course Layout

Default Storyline Course Layout

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
Locate player.css file within storyline published course files

Locate player.css file within storyline published course files

  • 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:

 

Default menu font/text size and style properties (left) and how it looks on the storyline player (right)

Default menu font/text size and style properties (left) and how it looks on the storyline player (right)

 

If you slightly increase this font-size and height (height affects highlight area) then notice it increases font size on the storyline menu.

 

How to increase font size by tweaking player.css

How to increase font size by tweaking player.css

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.

 

5 comments

  1. Jon says:

    I took your steps but nothing changed with the font size. I have actually been having font size problems for some time now. For some reason my font defaults at 9px instead of 11px. My coworkers use Storyline for ELearning and theirs publishes at 11px and we are trying to get them all looking the same, but my font comes up smaller for some unknown reason. Any other ideas? Articulate support has been good at trying to help me with this, but they have been unable to pinpoint the problem or come up with a successful workaround.

    1. electron says:

      The method explained here applies to HTML5 output only. Are you trying for the same? If yes then,

      If you have edited the style (.css) file from the published output and the font is still not changed, then i guess there could be some issue with the content getting scaled (down sized). You may want to compare your publish setting with your peers

      (or)
      a basic check – please ensure the selected player font is exist in your machine. HTML5 version

  2. MaryL says:

    I’ve been getting a menu base font of 9 as well, although the resizing trick you describe works perfectly on mobile — thanks!

    I’ve been trying to make Storyline output work on Android, even though it isn’t officially supported. I couldn’t make the entire course fit in the Android browser space until I chose “Scale player to fit browser window”, which is perfect no matter what dimensions or menu choices I use. (The menu font size trick still works this way, too!)

    But I don’t like the look of 100% width/height on the desktop. Do you think there’s any way of using an absolute size on the desktop and a scaled, 100% presentation on mobile?

    Thanks!

    1. electron says:

      Thanks for the feedback and sharing your experience. I think the player scale setting will impact both HTML5 (for Android/Mobile) and Flash (for Desktop) formats. How about keep this scale option checked and publish for mobile (in HTML5 for Android/Mobile), and keep the option unchecked (locked size) and republish for desktop (in Flash). Not an ideal solution, but fairly easy to manage.

  3. Randy says:

    Thanks for the workaround, it did work for me also, and my default was 9px. The question I have now is, there are some titles in my course that have to wrap because they are longer and the second line is not indented the same, it is actually a space before the initial line above it. Is there a way to change the word wrap indent? It would be ideal if the second line of the word wrap indented a little further than the line above it. Thanks.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current ye@r *