Thaleia Hub

Comment personnaliser les "Écrans de présentation" ?

Bonjour à toutes et à tous.

Thaleia vous propose de personnaliser la production de vos “Écrans de personnalisation” avec quelques manipulations. Voici la procédure à réaliser pour modifier les couleurs de vos contenus et d’utiliser un Logo personnalisé pour vos modules de formation.

1 - Sur la page d’accueil de Thaleia : rendez-vous sur Produire / Écrans de présentation

2 - Cliquez sur le bouton “Personnalisation” situé en bas de la page.

3 - Cliquez sur le bouton associé à la ligne “Télécharger l’archive qui contient les fichiers de personnalisation par défaut”

4 - Téléchargez le dossier compressé proposé Resources_cannelle_content-customization-html.zip

5 - Décompressez ce dossier compressé. Vous retrouvez un dossier engine à l’intérieur

6 - Dans ce dossier engine Dirigez vous vers le dossier js

7 - le dossier js contient un fichier colors.js

8 - Pour modifier les couleurs de vos écrans de présentations, il suffit de modifier les valeurs de BaseColor et SecondaryColor dans le fichier colors. Ces couleurs doivent être indiqué avec leur code hexadécimal.

Si vous avez besoin de plus de précisions sur ce sujet, je vous invite à vous rendre sur http://www.color-hex.com/ afin de récupérer le code hexadecimal de la couleur souhaitée.
Il est important de renseigner des couleurs ayant un contraste important avec le blanc afin de rester le plus lisible possible.
Pour l’exemple voici les deux couleurs choisis :

9 - sauvegarder votre fichier colors.js.

10 - pour mettre à jour votre logo : rendez-vous dans le dossier img du dossier engine

11 - Vous trouverez ici un fichier logo.jpg (assurez vous d’être en mesure de voir les extensions de fichiers).

12 - Il suffit de remplacer l’image présente ici par votre propre image en la renommant logo.jpg

13 - Vous en avez maintenant terminé avec la personnalisation basique de vos modules Thaleia.

14 - Pour modifier les polices d’écritures, vous devez tout d’abord disposez de vos polices dans les formats Webfonts qui sont les suivants :

  • maPolice.eot
  • maPolice.svg
  • maPolice.ttf
  • maPolice.woff
  • maPolice.woff2

Il est recommandé de placer ces fichiers dans le dossier fonts du dossier engine.

Nous gérons ensuite différentes finesses de polices d’écriture, voici la liste classé de la plus grasse à la plus fine :

  • Black
  • Bold
  • Medium
  • Regular
  • Light
  • Italic

Vous pourrez trouver dans le dossier css un fichier customization.css qui vous permet de définir vos propres styles CSS, qui prendront priorité sur les styles par défaut de Thaleia.

Vous devez donc indiquer dans ce fichier que vous voulez utiliser votre propre police, et remplacer les styles suivants avec vos propres noms de fichier (sans modifier les autres identifiants, tels que rubik, rubikregular… : ils sont utilisés pour référencer les polices dans les fichiers HTML) :
@font-face { font-family: 'rubik'; src: url('../font/rubik-black-webfont.eot'); src: url('../font/rubik-black-webfont.eot?#iefix') format('embedded-opentype'), url('../font/rubik-black-webfont.woff2') format('woff2'), url('../font/rubik-black-webfont.woff') format('woff'), url('../font/rubik-black-webfont.ttf') format('truetype'), url('../font/rubik-black-webfont.svg#rubikblack') format('svg'); font-weight: 600; font-style: normal; } @font-face { font-family: 'rubik'; src: url('../font/rubik-bold-webfont.eot'); src: url('../font/rubik-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../font/rubik-bold-webfont.woff2') format('woff2'), url('../font/rubik-bold-webfont.woff') format('woff'), url('../font/rubik-bold-webfont.ttf') format('truetype'), url('../font/rubik-bold-webfont.svg#rubikbold') format('svg'); font-weight: 500; font-style: normal; } @font-face { font-family: 'rubik'; src: url('../font/rubik-italic-webfont.eot'); src: url('../font/rubik-italic-webfont.eot?#iefix') format('embedded-opentype'), url('../font/rubik-italic-webfont.woff2') format('woff2'), url('../font/rubik-italic-webfont.woff') format('woff'), url('../font/rubik-italic-webfont.ttf') format('truetype'), url('../font/rubik-italic-webfont.svg#rubikitalic') format('svg'); font-weight: 100; font-style: italic; } @font-face { font-family: 'rubik'; src: url('../font/rubik-light-webfont.eot'); src: url('../font/rubik-light-webfont.eot?#iefix') format('embedded-opentype'), url('../font/rubik-light-webfont.woff2') format('woff2'), url('../font/rubik-light-webfont.woff') format('woff'), url('../font/rubik-light-webfont.ttf') format('truetype'), url('../font/rubik-light-webfont.svg#rubiklight') format('svg'); font-weight: 200; font-style: normal; } @font-face { font-family: 'rubik'; src: url('../font/rubik-medium-webfont.eot'); src: url('../font/rubik-medium-webfont.eot?#iefix') format('embedded-opentype'), url('../font/rubik-medium-webfont.woff2') format('woff2'), url('../font/rubik-medium-webfont.woff') format('woff'), url('../font/rubik-medium-webfont.ttf') format('truetype'), url('../font/rubik-medium-webfont.svg#rubikmedium') format('svg'); font-weight: 400; font-style: normal; } @font-face { font-family: 'rubik'; src: url('../font/rubik-regular-webfont.eot'); src: url('../font/rubik-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../font/rubik-regular-webfont.woff2') format('woff2'), url('../font/rubik-regular-webfont.woff') format('woff'), url('../font/rubik-regular-webfont.ttf') format('truetype'), url('../font/rubik-regular-webfont.svg#rubikregular') format('svg'); font-weight: 300; font-style: normal; }

Par exemple, avec les fichiers suivants :

Voici ce qu’il faut indiquer dans le fichier engine/css/customization.css pour la finesse “Black” :
@font-face { font-family: 'rubik'; src: url('../font/Helvetica_Black.eot'); src: url('../font/Helvetica_Black.eot?#iefix') format('embedded-opentype'), url('../font/Helvetica_Black.woff2') format('woff2'), url('../font/Helvetica_Black.woff') format('woff'), url('../font/Helvetica_Black.ttf') format('truetype'), url('../font/Helvetica_Black.svg#rubikblack') format('svg'); font-weight: 600; font-style: normal; }

Attention : Si vous ne disposez pas de tous les formats de polices d’écritures ou de toutes les finesses, nous vous suggérons de supprimer les blocs de code qui y font références afin de ne pas mélanger les polices d’écritures.
Exemple : Je ne dispose pas de la police d’écriture en .woff2, je supprime donc toutes les lignes faisant référence à ce format dans fonts.css

Il suffit maintenant de copier ces polices d’écriture dans le dossier fonts situé dans le dossier engine,

si votre système d’exploitation vous propose de remplacer les polices, vous devez accepter.

15 - Pour appliquer la personnalisation à Thaleia : compressez le dossier engine.

16 - Retournez dans le menu “Personnalisation” du menu “Écrans de présentation” de Thaleia.

17 - Cliquez sur “Importer une archive”

18 - Choisissez d’importer le dossier que vous venez de compresser.

19 - Un message vous indiquera la bonne prise en compte de votre personnalisation.

20 - Vous pouvez personnaliser à nouveau ce fichier en cliquant sur “Télécharger l’archive” associé à la ligne ci-dessous :

Vous désirez pousser la personnalisation plus loin ? Vous avez des connaissances en CSS ? nous vous mettons à dispositions nos fichiers CSS et nos labels de players respectivement dans les dossier css et localisation du dossier engine afin d’améliorer la finesse de votre graphisme et du lecteur de contenu.

Voici le résultat obtenu :

Merci de ne pas tenir compte de mon “sens artistique” :smile:

Si des précisions supplémentaires sont nécessaires, n’hésitez pas à poser vos questions à la suite de ce message.

Usé Martin.