CustomCSS

La fonctionnalité CustomCSS permet de déclarer des règles de feuille de style dans le lecteur Storyline.

Vous pouvez ainsi aisément changer l'aspect visuel des éléments graphiques du lecteur, mais aussi tout élément que vous aurez ajouté avec Nuggets.

Présentation

La fonctionnalité propose 2 méthodes pour modifier visuellement les éléments HTML :

  • newFontFace : ajoute une nouvelle déclaration @font-face pour installer une police de caractères dans vos projets Storyline ;

  • newRule : ajoute une nouvelle déclaration de style.

Toutes les définitions de styles seront déclarées dans le déclencheur principal d'initialisation.

Ajouter une police de caractères

A propos d'incorporer une police de caractères

Nuggets propose plusieurs façons d'intégrer une police de caractères dans un projet Storyline.

  • Si vous optez pour une police de caractères fournie par Google, que vous pouvez la lier depuis Internet, et n'avez pas de blocage sur votre réseau informatique (consultez votre DSI), utilisez la fonctionnalité GoogleFonts.

  • Sinon, vous pouvez importer la police de caractères en suivant les explications de cet article.


Passons à la création des éléments nécessaires.

Préparation

Pour pouvoir utiliser une police de caractères, vous devez l'implémenter en important les formats eot, svg, ttf et woff de la police de caractères dans le lecteur Storyline. La police de caractères s'affichera ainsi dans les meilleures conditions, quel que soit le navigateur et le terminal - ordinateur, tablette ou smartphone.

DROITS D'UTILISATION


Consultez les droits d'utilisation concernant les polices de caractères que vous utilisez.
Les polices de caractères proposées par Google sont sous Licence Apache 2.0 : elles sont libres de droits et peuvent être modifiées. Vous pouvez donc utiliser un outil tel que https://transfonter.org/ pour générer les formats de fichiers listés ci-dessus.

Créons un dossier et plaçons les différents formats de fichiers dedans. Créons ensuite à la racine de ce dossier un nouveau fichier :

  1. Clic droit dans la fenêtre Windows ouverte du dossier,
  2. sélectionnons Nouveau,
  3. puis Document texte et
  4. renommons-le 'index.html'.

Ce fichier a pour l'instant juste le rôle de valider le point d'entrée de l'adresse saisie dans le panneau Insérer un objet Web.

Chargé par défaut par le lecteur Storyline, nous allons l'utiliser pour éliminer le temps de latence qu'il peut y avoir lors du chargement des polices de caractères.

Ouvrons le fichier index.html et écrivons une règle @font-face pour chaque police de caractères présente dans le dossier. En liant la police avec une règle, cela forcera le chargement de chaque format.

HTML
<style>
    @font-face {
        font-family: "maPolice";
            src: url("maPolice.eot");
            src: url("maPolice.woff") format("woff"),
                 url("maPolice.otf") format("opentype"),
                 url("maPolice.svg") format("svg");
    }
    // Pensez à mettre à jour le nom avec celui de la police.
  </style>

Notez ici que la police de caractères n'est pas encore utilisable à ce stade. Elle le sera à partir du moment où l'on aura effectué sa déclaration dans le déclencheur principal d'initialisation que nous verrons plus bas.


Le dossier de polices de caractères est prêt, insérons-le.

Importation

Afin de déclencher le plus tôt possible le chargement du fichier index.html et automatiquement les différents formats de la police de caractères, nous allons intégrer le dossier dans la même diapositive que la librairie Nuggets, et plus précisément sur le Masque de diapositive de la librairie.

Cliquez sur l'onglet Affichage, puis Masque des diapositives, et sélectionnez le masque Nuggets loader. Insérez un objet Web et ciblez le dossier des polices de caractères.

PRATIQUE


Pour distinguer facilement les objets Web sur le calque de la diapositive, on les redimensionnera et positionnera afin de les voir tous en vue d'ensemble et de lire les adresses.


Validez et revenez à la vue STORY de Storyline.

Déclaration

Allez à la diapositive implémentant la librairie et ouvrez l'Éditeur JavaScript pour modifier le script JavaScript du déclencheur principal d'initialisation.

La déclaration accepte plusieurs arguments.

JavaScript
CustomCSS.newFontFace('dossier', 'nom', 'police', 'style', 'graisse');
  • dossier : le nom du dossier dans lequel la police de caractères est placée. Il sera utilisé en tant que Objet Web ;
  • nom : le nom de la police de caractères pour l'attribut CSS font-family ;
  • police : le nom de la police de caractères si le nom de fichier est différent de nom (optionnel) ;
  • style : le style pour l'attribut CSS font-style (définit à normal si omis) ;
  • empatement : le style pour l'attribut CSS font-weight (définit à normal si omis).

Référez-vous aux pages 'font-style' et 'font-weight' pour connaître les valeurs que vous pouvez utiliser.


La police de caractère est maintenant prête à être utilisée dans un projet.

Ajouter une déclaration de style

Les déclarations de style se font avec la méthode CustomCSS.newRule à laquelle on fait passer une chaîne de caractères.

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

PRATIQUE


Pour indenter le code CSS et insérer des retours à la ligne dans les chaînes de caractères sans casser le code, utilisez le caractère accent grave à la place de l'apostrophe ou du guillemet anglais. Il s'obtient en combinant les touches Alt Gr et 7 deux fois sur les claviers Azerty, ce qui insère les délimiteurs ouvrant et fermant.

Nuggets propose un lot de fonctionnalités qui encapsulent plusieurs définitions de style : Caption et Lightbox entre autre. Référez-vous à leur aide et/ou à leur code pour plus d'informations.

Consultez également les articles de la section Fonctionnalités pour en découvrir plus.