Matthew Bibby
Matthew Bibby

Change the Focus Outline Colour in Storyline

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.

Matthew BibbyMatthew Bibby

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:

white

While that is a good colour and is accessible against most backgrounds, at times it is less than ideal. For example, if you are using a brown background, it's going to look a little interesting:

brown

Or, maybe you are using a lot of yellow in your course and want to avoid situations like this:

yellow

Or, maybe your boss just wants to make sure that the focus colour works well with your corporate colour scheme:

purple

Or they just really like whatever this colour is:

green-1

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.

Legend Appreciation Moment

First, let's take a moment to appreciate Zsolt Olaf and give thanks for all of the assistance he provides in the E-Learning Heroes forums. When trying to figure out how to change the focus colour in Storyline, I got stuck. I reached out to Zsolt for help and he kindly pointed me in the right direction.

He is a clever man. You should read his book.

Before We Get Started

It is important to note that this change will only work in the HTML5 output of Storyline. It won't change things in the Flash output.

That probably isn't a big deal as many people are now publishing primarily for HTML5. But if you are publishing to Flash, then this won't help you. Oh... and if you don't already know, Flash will soon be a thing of the past (🎉) so you should be aware of what that means for you.

How This Works

Making this change is really quite simple.

All that you need to do is pop the below JavaScript into an Execute JavaScript trigger that runs on Timeline Start.

The code will take care of the rest.

As we (presumably) want this change to happen everywhere in the module, it's a good idea to add the Execute JavaScript trigger to your Slide Master.

That way it'll run each time a new slide loads. So if one resumes the module after taking a break, we can be confident that the colour of the focus outline will be changed.

For example, let's assume that you want to change the colour of the focus outline to red. Here is the code you need:

if (/_html5.html/.test(window.location.href)) {
 if (!window.changeFocusColor){
 var sheet = document.createElement('style');
 sheet.innerHTML = ".tab-focus-box{border: 3px solid red !important;}";
 document.body.appendChild(sheet);
 window.changeFocusColor = true;
 }
}

Which will change the focus outline colour to:

red-outline

If that all makes sense, then you can ditch this tutorial now and get on with more important things. Like, I dunno, riding your bicycle, telling your grandma that you love her or figuring out how many marshmallows you can fit in your mouth at once...

But if you'd like to dig deeper into how this works and to explore a few more examples, keep reading.

And no, I don't mind if you eat those marshmallows while doing so.

What Does All That Code Mean?

Let's step through it line by line.

if (/_html5.html/.test(window.location.href)) {

First, we are checking if the HTML5 output is being viewed.

The above code will check the URL that is being viewed to see if it ends in _html5.html. If it does, the code will continue running. If it doesn't (because the Flash output is being viewed) then nothing will happen.

Next, the code will check if this change has already occurred:

 if (!window.changeFocusColor){

This if statement will check whether or not a global variable called changeFocusColor is true. If it is, that means that the colour of the focus outline has already been changed. If not, then the code will continue to do its thing.

Then, we will add a new style sheet to the page so that we can manipulate how our focus outline looks:

 var sheet = document.createElement('style');

And populate this style sheet with the CSS that we need:

 sheet.innerHTML = ".tab-focus-box{border: 3px solid red !important;}";

In this line of code, there are three values that you can mess around with. They are:

You can change these values to suit your needs.

For example, you might replace that line of code with something like this:

 sheet.innerHTML = ".tab-focus-box{border: 2px dotted #737373 !important;}";

This would result in a focus outline that is a little thinner than normal (2px instead of 3px) with a dotted, dark grey border:

gray-dotted

If you want to know more about the options when styling a border, check out this article.

And as for that !important part of the code? That's because we want to make sure that this change isn't overwritten by any of the default Storyline styles. Because what we are doing is IMPORTANT!

Next, we will append this style information to the end of the document body:

 document.body.appendChild(sheet);

And finally, we can set the global variable that we discussed earlier so we know that the focus outline has been changed:

 window.changeFocusColor = true;

This will prevent the code from making this change each time a new slide starts.

How Do I Add This to The Master Slide?

By clicking some stuff with your mouse!

First, go to View > Slide Master:

slide-master

Then select the first master slide:

slide-master-select

And then add an Execute JavaScript trigger that'll run when the Timeline starts:

slide-master-trigger

Clicking on the Script button shown in the above image will open the area where you can paste our code and hit OK:

slide-master-code-1

Then you can jump out of the Master View and all will be well in the world:

slide-master-close

Demo

Here is a demo that shows how this works in Storyline (please click on the below demo before hitting TAB):

Files You Might Need:

Here is a cheat sheet that shows how to change the focus outline colour.

Here is the .story file that was used in this example.

Here is a SCORM package that you can use to test this in your LMS.

Frequently Asked Questions:

Q. When I preview my course, this doesn't work. What's up with that?
A. JavaScript doesn't work when previewing. You need to publish your course and open the HTML5 output in a modern browser. Alternatively, you can upload the course to your server or LMS and test it there.

Q. It's really annoying though. Because every time I preview my course I get this silly warning on every slide. How can I avoid this?

js-preview

A. Just remove the Execute JavaScript trigger until you have finished developing your course.

Q. But what if I forget to add it back in later?
A. Then the focus outline will remain yellow!

Q. Wow. How helpful...
A. That's not a question. It's a judgement. And I don't appreciate that sarcastic tone. I recommend you step away from your computer, pick up some post-it notes and write "Remember to set up the focus outline trigger before publishing the course" and "Please be nice to Matthew. He's a sensitive fellow."

Q. Are you really that sensitive?
A. No, I'm just messing with you.

Q. Will this work in Articulate Review?
A. Yes.

Q. Does this work in the Flash output?
A. No.

Q. Will this work in Articulate Mobile Player?
A. No. The Articulate Mobile Player is scared of JavaScript.

Q. Will this work in the HTML5 output?
A. Yes.

Q. Do you know how to spell the word color?
A. Yes, it's spelt colour. But sometimes I might write color just to confuse you.

Q. What about grey?
A. British English FTW!

Q. What does FTW mean?
A. For the win. Unless you are a biker, then it has a different meaning.

Q. What version of Storyline did you use to create this demo?
A. Storyline 360, build 3.19.16600.0.

Q. How many marshmallows can you fit in your mouth at once?
A. It depends. Are they on fire at the time?

Q. Please don't answer a question with another question.
A. Why not?

Q. Does this work in SL2?
A. I doubt it. The code would need to be modified to work in SL2.

Q. What about SL1?
A. Just let it go. No one uses SL1 anymore.

Q. Do Articulate support this approach?
A. No, they don't provide support for this stuff. So if you run into any issues leave a comment below (or contact me privately) and I'll help you.

Q. Can I change the focus outline colour multiple times in a course?
A. Sure. you can simply add a modified version of the above code to an Execute JavaScript trigger on an individual slide. For example:

if (/_html5.html/.test(window.location.href)) {
 var sheet = document.createElement('style');
 sheet.innerHTML = ".tab-focus-box{border: 6px dashed green !important;}";
 document.body.appendChild(sheet);
}

This will change the focus outline to a 6px dashed green line. As it doesn't rely on the global variable we've been using to determine if the focus outline has already been changed, the code will run each time it is triggered. This means that you can change the focus outline as many times as you like.

Q. My question isn't listed here, what should I do?
A. Eat more marshmallows. Or you could leave a comment.

If you found this tutorial helpful and think others in your network will also, please share using the share buttons below. Thanks!

Matthew Bibby
Author

Matthew Bibby

I'm Matt. I'm an eLearning Consultant. I help people like you develop memorable, engaging and profitable training programs. What do you need a hand with?

Comments