Forum Discussion

COLINGRANT-a3ad's avatar
COLINGRANT-a3ad
Community Member
2 years ago
Solved

Subtitle fonts have a black outline?

The subtitles that Storyline generates have a black outline, no matter what color I choose for the font or the background. See the attached example (I know it's ugly; I chose the background so we could see the black outline). Does any one know if this can be fixed? I don't want ANY outline. THANKS!

 

advice
storyline 360
  • SamHill's avatar
    SamHill
    2 years ago

    This would have been added for accessibility I think. To ensure the text contrast with whatever colour background it appeared on. In order to change this, you would need to remove the text-decoration definition from the CSS.

    .caption > div > p{
     text-shadow: unset;
}

    In order to add that so that it is available within your Storyline course, you would need to add the following JavaScript to the timeline starts trigger on your Slide Master(s)

    // Create a new <style> element
var style = document.createElement('style');
// Define the CSS rule
style.innerHTML = '.caption > div > p { text-shadow: unset; }';
// Append the <style> element to the <head> of the document
document.head.appendChild(style);

    I use this to increase the minimum font-size of the captions, as they can be quite small. 

2 Replies

  • SamHill's avatar
    SamHill
    Super Hero
    2 years ago

    This would have been added for accessibility I think. To ensure the text contrast with whatever colour background it appeared on. In order to change this, you would need to remove the text-decoration definition from the CSS.

    .caption > div > p{
     text-shadow: unset;
}

    In order to add that so that it is available within your Storyline course, you would need to add the following JavaScript to the timeline starts trigger on your Slide Master(s)

    // Create a new <style> element
var style = document.createElement('style');
// Define the CSS rule
style.innerHTML = '.caption > div > p { text-shadow: unset; }';
// Append the <style> element to the <head> of the document
document.head.appendChild(style);

    I use this to increase the minimum font-size of the captions, as they can be quite small.