Cet article est aussi disponible en :
Avec les plans Corporate et Enterprise Owl, il est possible d'éditer le CSS de votre contenu d'apprentissage.

Vous pouvez modifier les polices, les couleurs, la forme des boutons et le fond de vos tests et cours créés avec Easy LMS. Une façon de le faire est d'ajuster les paramètres sur l'onglet Styling, mais vous pouvez vouloir faire encore plus de changements que ceux directement disponibles.

L'accès au CSS vous permet de modifier la présentation du contenu en ligne, comme les couleurs, les polices, la taille des polices, la forme des boutons, etc. Pour avoir accès à cette fonctionnalité, vous devez disposer d'un plan d'entreprise

En fonction de vos compétences en matière de CSS, vous pouvez apporter de nombreuses modifications à l'interface de vos tests. Nous avons eu des clients qui ont changé l'apparence de la barre de minutage, ajouté des transitions animées flashy et d'autres choses intéressantes grâce à des CSS personnalisés.

Quiz, évaluations et cours

Si vous souhaitez personnaliser le CSS pour votre Quiz, évaluation ou cours, envoyez-nous un message. Si la modification est simple (comme la modification de la taille de la police), nous pouvons l'effectuer immédiatement.

Si vous avez besoin d'autres modifications, nous vous enverrons un fichier 📂 à personnaliser afin que vous puissiez nous le renvoyer, et nous appliquerons ensuite les modifications à votre compte. Veuillez envoyer votre demande par le biais du chat.

Les modifications apportées au CSS peuvent être appliquées, notamment à un questionnaire , à une évaluation ou à un cours, ou à l'ensemble de votre compte (si vous souhaitez utiliser les mêmes paramètres pour chaque élément de contenu que vous créez). Le CSS peut être enregistré sous forme de liste dans un document de type bloc-notes et nous être envoyé. Nous le mettrons ensuite en œuvre dans votre compte.

Examens

Vous pouvez modifier le CSS de votre examen directement à partir de votre compte. Allez à votre examen > Créer > Styliser > CSS personnalisé:



Sur l'onglet** du gestionnaire de fichiers , vous pouvez également télécharger vos polices et images pour les utiliser sur la feuille de style CSS (voir cet article pour en savoir plus) :



Pour vous donner un exemple, voici le lien vers un examen qui a été conçu avec les paramètres disponibles dans le tableau de bord :
https://www.onlineexambuilder.com/general-knowledge-exam-no-css/exam-319288

Et c'est le même examen, mais maintenant avec un style CSS personnalisé :
https://www.onlineexambuilder.com/general-knowledge-exam-css/exam-276765

Tous les changements effectués sur l'onglet Stylisme seront appliqués à votre examen à partir de ce moment, même s'il s'agit d'un examen existant ou s'il est intégré à un site web.

Feuille de triche CSS personnalisée

Nos chers concepteurs ont partagé avec vous quelques bribes de code que vous pouvez utiliser pour créer votre feuille CSS. Découvre-les ci-dessous.

1. Examen, quiz et évaluation

Changer la famille des polices

Toutes les polices de Google sont désormais disponibles pour les examens.
Si vous souhaitez modifier le type de police de votre évaluation et de votre questionnaire, veuillez consulter la liste des Web Safe Fonts ou les Google Fonts. N'oubliez pas d'importer la police dans le gestionnaire de fichiers (dans Examens > Stylisme) puis de copier-coller le chemin de la police dans votre feuille CSS.

Rubriques

Cela inclut les questions.

h1, h2, h3, h4, h5, h6, caption, *[class*=heading_h], .examquestion>strong [font-family : Géorgie, serif;}

Corps du texte

Cela inclut les réponses.

body { font-family : Arial, Helvetica, sans-serif;}

Boutons

.container .button, .container input [type=submit], .container input [type=button], .container button, .container .gameisrunning .continue [font-family : Arial, Helvetica, sans-serif;}

Tout (même police de caractères)

body, h1, h2, h3, h4, h5, h6, caption, *[class*=heading_h], .examquestion>strong, .container .button, .container input [type=submit], .container input [type=button], .container button, .container .gameisrunning .continue [font-family : Arial, Helvetica, sans-serif;}

Changement de la taille de la police

Rubriques

h1 { font-size : 28px;}h2, caption, .heading_h2, .examquestion>strong { font-size : 21px;}h3, .heading_h3 { font-size : 16.8px;}h4 { font-size : 15.4px;}h5 { font-size : 14px;}h6 { font-size : 11.2px;}

Corps du texte

corps { taille de la police : 13px;}

Boutons

.container .button, .container input [type=submit], .container input [type=button], .container button, .container .gameisrunning .continue [font-size : 13px;}

Questions

#questioncontainer h1 {font-size : 28px;}

Réponses

.answers label, .answers label span, .answerinput * { taille de la police : 13px;}

Ajout d'une image de fond

Pour les examens, vous pouvez le faire directement via le tableau de bord sur Styling > Thème > Fond de photo foncé.

Toutefois, pour les évaluations et les quiz , vous avez besoin des lignes de code suivantes :

html { background : url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]') no-repeat center center fixed ; background-size : cover;}html body { background : none rgba(59,59,59,0.7);}

Pour ajouter une image de fond, vous devez d'abord télécharger cette image sur nos serveurs. Vous pouvez le faire en les ajoutant au gestionnaire de fichiers dans l'un de vos examens. Après les y avoir téléchargées, un chemin d'accès CSS sera généré à l'adresse Styling > CSS personnalisé. Vous pouvez ensuite copier-coller ce chemin d'accès à l'image dans votre feuille CSS.


2. Cours

Changer la famille des polices

Si vous souhaitez modifier le type de police de votre cours, veuillez consulter la liste des Web Safe Fonts, ou voir Google Fonts. N'oubliez pas d'importer la police dans le gestionnaire de fichiers (dans Examens > Stylisme) puis de copier-coller le chemin de la police dans votre feuille CSS.

Rubriques

h1, h2, h3, h4, h5, h6, caption, *[class*=heading_h], .examquestion>strong [font-family : "Droid Serif", serif;}

Corps du texte

body { font-family : "Open Sans", sans-serif;}

Boutons

button, .button { font-family : "Open Sans", sans-serif;}

Tout (même police de caractères)

body, h1, h2, h3, h4, h5, h6, caption, *[class*=heading_h], .examquestion>strong, button, .button {font-family : "Open Sans", sans-serif;}

Changement de la taille de la police

Rubriques

La taille des titres est différente selon la taille de l'écran.

Tablette et bureau

@media only screen and (min-width : 40.0625em) { h1 { font-size : 2.55556rem ; } h2 { font-size : 2.11111rem ; } h3 { font-size : 1.66667rem ; } h4 { font-size : 1.11111rem ; } h5 { font-size : 1rem ; } h6 { font-size : 1rem ; }}

Mobile

h1 { font-size : 1.88889rem;}h2 { font-size : 1.55556rem;}h3 { font-size : 1.22222rem;}h4 { font-size : .77778rem;}h5 { font-size : 1rem;}h6 { font-size : 1rem;}

Toutes les tailles d'écran

h1 { font-size : 1.88889rem;}h2 { font-size : 1.55556rem;}h3 { font-size : 1.22222rem;}h4 { font-size : .77778rem;}h5 { font-size : 1rem;}h6 { font-size : 1rem;}@media only screen and (min-width : 40.0625em) { h1 { font-size : 2.55556rem ; } h2 { font-size : 2.11111rem ; } h3 { font-size : 1.66667rem ; } h4 { font-size : 1.11111rem ; } h5 { font-size : 1rem ; } h6 { font-size : 1rem ; }}

Corps du texte

p, li, th, td, label, input, select, textarea, .qtype, .errorMessage, .assessboard p, .assessboard li, .contentcontainer .col12 .singleaxisscorecard p, .contentcontainer .col12 .singleaxisscorecard li {font-size : 1rem;}

Boutons

button, .button { taille de la police : .88889rem;}

Questions

#questioncontainer h1 {font-size : 28px;}

Réponses

.answers label>span, .answers label { taille de la police : .8rem;}

Ajout d'un contexte

body [background : url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]') centre sans répétition fixé ; taille du fond : couverture;}

Pour ajouter une image de fond, vous devez d'abord télécharger cette image sur nos serveurs. Vous pouvez le faire en les ajoutant au gestionnaire de fichiers dans l'un de vos examens. Après les avoir téléchargées, un chemin d'accès CSS sera généré dans l'onglet Stylisme > CSS personnalisé. Vous pouvez ensuite copier-coller ce chemin d'accès à l'image dans votre feuille CSS.

Pour une meilleure lisibilité, vous pouvez ajouter une couleur de superposition entre l'image de fond et le contenu. Changez le dernier chiffre pour l'opacité ; 0,5 signifie une transparence de 50%).

Pour une superposition noire :

.off-canvas-wrap { background : rgba(0, 0, 0, 0.5);}

Pour une superposition blanche :

.off-canvas-wrap { background : rgba(255, 255, 255, 0.5);}



Redimensionner l'image

Pour utiliser un logo dans un cours, vous devrez probablement le redimensionner. Veuillez donc utiliser cet outil pour redimensionner le logo avant de le télécharger sur Amazon: Online Image Resizer.

Téléchargez l'image. Vous pouvez la recadrer si nécessaire, mais si vous n'en avez pas besoin, passez directement à l'étape 4. Mettez le nombre "108" dans la dernière case, et gardez la case cochée, comme ceci :



Téléchargez maintenant le logo. Le format PNG est votre meilleur choix.

Téléchargez le logo

Pour utiliser le logo, vous devez télécharger cette image sur nos serveurs. Veuillez les ajouter à un examen > Stylisme > Gestionnaire de fichiers et copier-coller le chemin d'accès CSS en bas du sous-onglet CSS personnalisé pour l'utiliser dans votre cours.

Calculer la bonne largeur

Dans le CSS, vous devrez spécifier la hauteur et la largeur du logo que vous ajoutez. Vous devez respecter le rapport hauteur/largeur du logo, vous avez donc besoin d'une calculatrice pour le faire: Easy Aspect Ratio Calculator. Voici comment l'utiliser :

Trouvez d'abord les dimensions actuelles de votre image. Allez sur le logo que vous venez de télécharger dans votre explorateur, faites un clic droit dessus et cliquez sur Propriétés. Sélectionnez l'onglet Détails. Vous verrez vos dimensions apparaître en haut de l'écran :
2. Allez sur le calculateur en ligne. Entrez la largeur et la hauteur de l'image (celle qui se trouve dans les propriétés), sélectionnez Nouvelle hauteur, et entrez la nouvelle hauteur (voir ci-dessous après la taille du fond, la deuxième valeur est la hauteur que vous souhaitez).
Le calculateur vous dira quelque chose comme "Voici ! La nouvelle largeur", et votre nombre est là ! Arrondissez ce nombre à la valeur la plus proche (les demi-pixels n'existent pas).

Logo sur le côté gauche (à côté du bouton de menu)

Veuillez noter que l'image ci-dessous a été stylisée directement à partir du bouton de menu, et qu'une couleur de fond solide a été ajoutée au logo avec un rembourrage à l'intérieur. Si vous souhaitez que cela soit différent, vous devez jouer avec la taille de l'arrière-plan et la position de l'arrière-plan (voir l'exemple ci-dessous).

.tab-bar::after [background-image : url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]') ; background-repeat : no-repeat ; background-position : right top ; background-size : 156px 51px ; content : "" ; display : block ; position : relative ; float : left ; width : 156px ; height : 51px;}@media only screen and (min-width : 64.063em) { .tab-bar::after { background-size : 165px 54px ; width : 165px ; height : 54px ; }}@media only screen and (max-width : 40em) { .tab-bar::after { width : 138px ; height : 45px ; background-size : 138px 45px ; }}}

Logo sur le côté droit

Veuillez noter que l'image ci-dessous a été conçue de manière à présenter un léger rembourrage sur les côtés et le dessus. Si vous ne souhaitez pas cela, vous pouvez régler la hauteur de l'image à 54px pour le bureau et 45px pour le mobile et régler la position de fond à en haut à droite à la place (voir l'exemple ci-dessus). L'image prendra toute la hauteur de la barre supérieure et collera aux bords de la fenêtre.

.tab-bar {image de fond : url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]') ; position du fond : top 10px right 10px ; background-repeat : no-repeat ; background-size : 117px 40px;}@media only screen and (max-width : 40em) { .tab-bar {position du fond : à droite 10px au centre ; taille du fond : 102px 35px ; }}

Logo en bas à gauche ou à droite

Ajustez la largeur, la hauteur et la taille du fond en fonction des dimensions de votre image.

Dans l'exemple ci-dessous, le logo est aligné à droite. Pour l'aligner à gauche, changez droite : 0 en gauche : 0.

Si vous avez besoin que le logo soit un peu plus éloigné du bord, écrivez des choses comme droit : 10px et fond : 10px.

.main-section .ui-page::after [content : '' ; display : block ; width : 102px ; height : 35px ; background-image : url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]') ; background-size : 102px 35px ; background-repeat : no-repeat ; background-position : center ; position : absolute ; right : 0 ; bottom : 0 ; indice z : 99;}
Cet article a-t-il répondu à vos questions ?
Annuler
Merci !