CustomCSS

The CustomCSS feature allows you to declare stylesheet rules in the Storyline player.

This means you can easily change the visual appearance of the player's graphical elements, as well as any elements you've added using Nuggets.

Presentation

The feature offers 2 methods for visually modifying HTML elements:

• newFontFace: adds a new @font-face declaration to install a font in your Storyline projects;

• newRule: adds a new style declaration.

All style definitions will be declared in the main initialization trigger.

Add a font

About embedding a font

Nuggets offers several ways of incorporating a font into a Storyline project.

• If you opt for a font supplied by Google, can link it from the Internet, and have no blockage on your computer network (consult your IT department), use the GoogleFonts feature.

• Alternatively, you can import the font as explained in this article.

Let's move on to the creation of the necessary elements.

How to start

To be able to use a font, you need to implement it by importing the eot, svg, ttf and woff formats of the font into the Storyline player. The font will then be displayed in the best possible conditions, whatever the browser and terminal - computer, tablet or smartphone.

Let's create a folder and put the different file formats in it. Then create a new file :

1. Right-click in the folder's open window,
2. select New,
3. then Text Document and
4. rename it 'index.html'.

For now, this file only serves to validate the entry point for the address entered in the 'Insert Web Object' panel.

Loaded by default by the Storyline player, we're going to use it to eliminate the latency that can occur when fonts are loaded.

Let's open the index.html file and write a @font-face rule for each font in the folder. By linking the font with a rule, this will force each format to be loaded.

HTML

<style>
    @font-face {
        font-family: "myfont";
            src: url("myfont.eot");
            src: url("myfont.woff") format("woff"),
                 url("myfont.otf") format("opentype"),
                 url("myfont.svg") format("svg");
    }
    // Don't forget to update the name with the name of your font.
  </style>

Note that the font is not yet usable at this stage. It will be once it has been declared in the main initialisation trigger, which we'll see below.

The fonts folder is ready, let's add it.

Embedding

In order to trigger the loading of the index.html file as soon as possible and automatically load the different font formats, we're going to embed the folder in the same slide as the Nuggets library, and more specifically on the Nuggets loader Slide Master.

Click on the 'View' tab, then 'Slide Master', and select the 'Nuggets loader' master. Insert a Web Object and target the font folder.

Confirm and return to Storyline's STORY view.

Declaration

Go to the slide implementing the library and open the JavaScript Editor to modify the JavaScript script for the main initialisation trigger.

The declaration accepts several arguments.

JavaScript

CustomCSS.newFontFace('folder', 'name', 'font', 'style', 'weight');

• folder : the folder name in which the font is placed. It will be used as a Web Object ;
• name : the name of the font for the CSS attribute font-family ;
• font : the font name if the file name is different from name (optional) ;
• style : the style for the CSS attribute font-style (set to normal if omitted) ;
• weight : the style for the CSS attribute font-weight (set to normal if omitted).

The font is now ready to be used in a project.

Add a style declaration

Style declarations are made using the CustomCSS.newRule method, to which a character string is passed.

JavaScript

CustomCSS.newRule(`
    .caption p { 
        font-family: 'myfont';
    }
`);

Nuggets offers a number of features that encapsulate several style definitions, such as Caption and Lightbox. Refer to their help and/or their code for more information.

See also the articles in the Features section to find out more.