Can you have multiple Focus colors?
September 15, 2021 12:00 AM
My team is currently working on a template for an eLearning course in which using one focus color won't work due to the color scheme of the design. We're using navy blue and white. When we test colour contrast, we're not able to find a color that works against a navy blue and white background.
Has anyone figured out a way to incorporate two focus colors? We have one set at the title level and I'm curious we we can create some sort of action to display a second color. Any advice/direction would be appreciated!
Discussion (4)
Thank you! I know we aren't able to do that on the fly. I was curious if there's any type of coding we can embed to change the focus color for specific links and such.
According to Support, you cannot change focus colors on the fly within a course.
I too had difficult finding a single focus colour that met WCAG criteria and matched against the brand colours our company uses.
I even wrote a PowerShell script that analyzed all 16.7 million colours against our brand colours, calculating the colour contrast ratio of each to no avail. See sample image:
But if you go into the trivantis-focus.css file, you can update it to 2 colours.
Now when you open trivantis-focus.css the text is all on one big wrapped line, so its difficult to read.
Use something like DirtyMarkup to format it nicely.
Then you'll find about 10 different css groups associated with focus colour, they all look like
border-color: #FF8000;outline: #FF8000;
-webkit-box-shadow: inset 0 0 6px 1px rgba(255, 128, 0, 1), 0 0 6px 1px rgba(255, 128, 0, 0.8);
-moz-box-shadow: inset 0 0 6px 1px rgba(255, 128, 0, 1), 0 0 6px 1px rgba(255, 128, 0, 0.8);
box-shadow: inset 0 0 6px 1px rgba(255, 128, 0, 1), 0 0 6px 1px rgba(255, 128, 0, 0.8);
Which gives you:
But if you change it to something like:
border-color: #FF8000;outline: 1px transparent solid;
-webkit-box-shadow: 0 0 0 1px rgba(255, 128, 0, 1), 0 0 0 3px rgba(255, 255, 255, 1), 0 0 5px 5px rgba(255, 128, 0, 1);
-moz-box-shadow: 0 0 0 1px rgba(255, 128, 0, 1), 0 0 0 3px rgba(255, 255, 255, 1), 0 0 5px 5px rgba(255, 128, 0, 1);
box-shadow: 0 0 0 1px rgba(255, 128, 0, 1), 0 0 0 3px rgba(255, 255, 255, 1), 0 0 5px 5px rgba(255, 128, 0, 1);
You could sandwich together another colour to look like:
It'd be great if we could get that functionality built into Lectora and add a 2nd focus colour to the Title Options. Something like:
This way whether your background is lighter or darker one of the focus colours should be visible.
Hope this helps
Cheers
Trev
Hi Trev,
My apologies, I didn't realize you responded to my question MONTHS ago! Is the information you're sharing helpful for Lectora desktop or Lectora Online? The box you've shared looks similar to desktop.