Thaleia Hub

Personnalisation graphique de Thaleia XL

En plus de refaire une beauté à votre outil de création de contenus pédagogiques préférés, notre équipe de talentueux (et incroyablement séduisants) développeurs en a profité pour vous simplifier le processus de personnalisation de Thaleia XL !
Je me permets donc de devenir leur porte-parole d’un instant, et je vais vous guider vers ces nouveaux horizons :earth_asia:

1. Comment récupérer et changer l’archive de personnalisation :blue_book:

  • Sur la page d’accueil de Thaleia, rendez-vous sur l’écran « Produire » puis sur « Ecrans de présentation » et cliquez sur le bouton « Personnalisation » situé en bas de page.

  • Cliquez sur le bouton associé à la ligne « Télécharger l’archive qui contient les fichiers de personnalisation par défaut », et téléchargez le dossier compressé proposé « Resources_cannelle_content-customization-html.zip ».

  • Décompressez ce dossier. Vous trouverez un dossier « engine » à l’intérieur de celui-ci. Naviguez du dossier « engine » vers le dossier « css ». A l’intérieur du dossier « css » se trouve un fichier « customization.css », c’est dans celui-ci que tout se configurera.

  • Effectuez vos modifications en vous aidant de cette documentation, et recompressez le dossier « engine ».

  • Retournez dans le menu « Personnalisation » du menu « Ecrans de présentation » de Thaleia.
    Cliquez sur « Importer une archive » et sélectionnez le dossier que vous venez de compresser.

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

    image

2. Personnaliser les couleurs :rainbow:

Les couleurs se définissent par paire : une couleur et sa couleur de remplissage. Ce qui peut correspondre à une couleur de fond et à la couleur du texte qui sera affichée par dessus.
Pour simplifier la gestion des couleurs nous avons opté pour deux paires de couleurs : un bloc primaire et un bloc secondaire.

  • Le bloc primaire s’applique principalement aux éléments du conteneur (la barre de navigation en haut et les boutons d’action en bas) et est représenté au travers des deux variables suivantes :

    • –primary-color
    • –on-primary-color
  • Le bloc secondaire est utilisé lors du survol des éléments susmentionnés ainsi que dans le contenu des écrans.

    • –secondary-color
    • –on-secondary-color

Pour modifier les couleurs prédéfinies il vous suffira donc de remplacer le code actuel par celui voulu. Pour plus d’informations je vous invite à vous rendre sur ce site https://www.color-hex.com/ si vous ne l’avez pas déjà fait.

3. Changer le logo de formation :zap:

Le logo correspond aux variables « --logo » et « --logo-ie11 »

  :root {
    --logo: url(../img/logo.jpg);
    --logo-ie11: url(./engine/img/logo.jpg);
  }

Il vous suffit de mettre votre fichier dans le répertoire « engine/img/ » et de mettre à jour ces deux valeurs.

Attention, « --logo-ie11 » a besoin d’une adresse commençant par « ./ » tandis que « --logo » commencera par « …/ »

4. Affichage des images :eyeglasses:

Nous vous proposons trois modes d’affichage des images :

  • cover : l’image est redimensionnée pour être aussi grande que possible et pour conserver ses proportions. L’image couvre toute la largeur ou la hauteur du conteneur et les parties qui dépassent sont rognées si les proportions du contenur sont différentes (il n’y a aucun espace libre sur lequel on verrait la couleur d’arrière-plan).

  • contain : L’image est redimensionnée afin qu’elle soit la plus grande possible et qu’elle conserve ses proportions. L’image est contrainte dans le conteneur. Les zones éventuellement vides sont remplies avec la couleur d’arrière-plan.

  • 50% 50% : Définit la largeur et la hauteur de l’image d’arrière-plan en pourcentage de l’élément parent. La première valeur définit la largeur, la deuxième valeur définit la hauteur. Si une seule valeur est donnée, la seconde est réglée sur “auto”

Par défaut, le mode « cover » est choisi. Vous pouvez changer celui-ci dans la variable « --image-display-mode ».



Vous voulez aller encore plus loin dans la personnalisation de vos modules ? Changer la favicon, changer la taille de police ou modifier certains effets ? C'est super ! Dans ce cas-là, ce pdf est fait pour vous !

Personnalisation graphique.pdf (562,3 Ko)

On vous souhaite tout le meilleur pour faire des personnalisations à la hauteur de vos rêves !
A très bientôt,
Joanna et l’équipe Solunea

1 Like