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.

11 Replies
Amy Hengst

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.

Jackie W

This is great! We use a lot of white backgrounds and are looking to achieve Level 2.1 standards as it pertains to graphical objects and user interface components. Our team as asked multiple times about this as the yellow doesn't pass that standard. I had been looking for something to change within the published manifest file, but this is great!