Tutorial: Change the Focus Outline Colour

Have you ever wanted to change the outline colour of the lovely yellow box that pops up when you hit TAB in Storyline? You know the one... it shows which object has focus for those who are using their keyboard to navigate a course.

By default, it looks like this:

While that is a good colour and is accessible against most backgrounds, at times it is less than ideal.

In this tutorial, we will look at how to change the colour of the focus outline that appears when you press tab when viewing a Storyline course.

Click here to see the tutorial, here to see a demo and here to download the source file.

Let me know if you have any questions, comments or are stuck with implementing any of this. I'm happy to help where I can.

9 Replies

Phil Mayor
Hero

4 months ago02/03/19 at 12:22 pm (UTC)

Thank you Matthew as comprehensive as ever!

4 months ago02/03/19 at 8:41 pm (UTC)

Thanks Phil.

Nancy Woinoski
Hero

3 months ago02/05/19 at 12:51 am (UTC)

This is cool Matthew, but yellow is the highest visibility colour which is why it is used for the focus indicator. Not sure if changing it would violate any accessibilty standards.

3 months ago02/05/19 at 1:10 am (UTC)

You are right, but we also need to consider the colours that it is shown against. I'm working on a course at the moment that uses a lot of yellow and the outline gets lost, so changing it improves the accessibility.

3 months ago02/05/19 at 3:41 pm (UTC)

Funny, I am working on a course with a lot of yellow right now and didn't even consider how the focus indicator looks against it. Thanks for the reminder and I am definitely going to try your method.

Amy Hengst

3 months ago02/08/19 at 6:58 pm (UTC)

This is cool, I have been trying to learn some Javascript but was understanding there were limitations that you couldn't get document elements from within SL, only adjust variables. Is there new JS support in SL or maybe I just don't know enough JS yet to really get it?

Luckily I was able to use Storyline features alone in my recent course functionality.

3 months ago02/08/19 at 9:27 pm (UTC)

It can be tricky to interact with a lot of the document elements, however, you can change them by using a similar approach to the above. Essentially, I'm adding new CSS to the file at runtime and forcing it to overwrite the default CSS.