Cet article est aussi disponible en :
Cet article est traduit à l’aide d’un outil de traduction automatique. Il peut contenir des erreurs ou présenter quelques incohérences. Nous pensons néanmoins qu'il est utile que vous puissiez lire cet article d'aide dans votre langue maternelle. N’hésitez pas à nous indiquer en bas de l'article si celui-ci vous a été utile ou si vous avez d'autres commentaires.

Avec les plans Corporate et Enterprise Owl, il est possible de modifier le CSS de votre contenu d'apprentissage.

Vous pouvez modifier les polices, les couleurs, la forme des boutons et l'arrière-plan de vos tests et de vos cours formations créés avec Easy LMS. Une façon de le faire est d'ajuster les paramètres de l'onglet Stylisation mais il se peut que vous souhaitiez apporter des modifications plus importantes que celles qui sont directement disponibles.

L'accès au CSS vous permet de modifier la manière dont le contenu en ligne est présenté, comme les couleurs, les polices, la taille des caractères, la forme des boutons, etc. Pour avoir accès à cette fonctionnalité, vous devez disposer d'un plan Plan d'entreprise ou Enterprise Owl.

En fonction de vos compétences en CSS, vous pouvez apporter de nombreuses modifications à l'interface de vos tests. Certains de nos clients ont modifié l'apparence de la barre de minuterie, ajouté des transitions animées et d'autres éléments intéressants grâce à des CSS personnalisés.
Quiz, Évaluations, et Formations

Si vous voulez personnaliser le CSS de votre site Web, vous pouvez le faire à partir de votre site Web Quiz, Évaluationou Formationenvoyez-nous un message. Si le changement est simple (comme la modification de la taille de la police), nous pouvons le faire immédiatement.

Les changements dans le CSS peuvent être appliqués, notamment à un Quiz, Évaluation, ou Formationou à 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 bloc-notes et nous être envoyé. Nous l'implémenterons ensuite dans votre compte.
Examens

Vous pouvez modifier le CSS de votre Examen directement depuis votre compte. Allez sur votre Examen > Créer > Styles > CSS personnalisé:



Dans le Gestionnaire de fichiers vous pouvez également télécharger vos polices de caractères et vos images pour les utiliser dans la feuille de style CSS cet article pour en savoir plus) :



Pour vous donner un exemple, voici le lien vers une Examen qui a été stylisée avec les paramètres disponibles dans le tableau de bord :
https://www.onlineexambuilder.com/ocean-sailor-exam/exam-70792



Et voici le même site Examen, mais avec un style CSS personnalisé
https://www.onlineexambuilder.com/ocean-sailor-exam-css/exam-93757



Toutes les modifications apportées dans l'onglet Styling seront désormais appliquées à votre Examen, même s'il s'agit d'un site existant ou s'il est intégré à un site web.

Aide-mémoire sur le CSS personnalisé

Nos designers bien-aimés ont partagé quelques extraits de code que vous pouvez utiliser pour créer votre feuille CSS. Consultez-les ci-dessous.
1. Examen , Quiz, et Évaluation
Changement de la famille de polices

Toutes les polices Google sont désormais disponibles pour Examens.
Si vous souhaitez modifier le type de police de vos fichiers Évaluation et Quizveuillez consulter une liste de Web Safe Fonts, ou consultez la liste de Google Fonts. N'oubliez pas d'importer la police dans le Gestionnaire de fichiers (dans Examens > Styling) puis de copier-coller le chemin de la police dans votre feuille CSS.

Titres

Cela comprend les questions.

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

Texte du corps

Ceci 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 (la même police)

``` 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;}````
Modification de la taille de la police

En-têtes

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;}

Texte du corps

body { font-size: 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 * { font-size : 13px;}
Ajout d'une image de fond

Pour Examensvous pouvez le faire directement via le tableau de bord dans Styles > Thème > Arrière-plan photo foncé.

Cependant, pour Évaluations et 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 fixed ; background-size : cover;}html body { background : none rgba(59,59,59,0.7);}

Pour ajouter une image d'arrière-plan, vous devez d'abord télécharger cette image sur nos serveurs. Vous pouvez le faire en l'ajoutant au gestionnaire de fichiers dans l'un de vos fichiers Examens. Après les avoir téléchargées à cet endroit, un chemin CSS sera généré dans l'onglet Styles > CSS personnalisé personnalisé. Vous pouvez ensuite copier-coller ce chemin d'accès aux images et aux polices dans votre feuille de style CSS.

2. Formations
Changement de la famille de polices

Si vous souhaitez modifier le type de police de votre site Formation, veuillez consulter la liste des polices suivantes Web Safe Fonts, ou consultez la liste de Google Fonts. N'oubliez pas d'importer la police dans le Gestionnaire de fichiers (dans Examens > Styling) puis de copier-coller le chemin de la police dans votre feuille CSS.

Titres

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

Texte du corps

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

Boutons

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

Tout (la même police)

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

* **En-têtes**

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

**Tablette et ordinateur de 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; }}

Texte du corps

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 { font-size: .88889rem;}

Questions

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

Réponses

.answers label>span, .answers label { font-size: .8rem;}
Ajout d'un arrière-plan

Il n'est pas possible d'utiliser une CSS pour ajouter une image d'arrière-plan pour les éléments suivants Formations. Vous devez ajouter l'image d'arrière-plan directement à partir de l'onglet Stylisation de l'onglet Style. Pour en savoir plus, consultez le siteformation Options de stylisme pour Formations article.


Redimensionner l'image

Pour utiliser un logo sur un site Formation, vous devrez probablement le redimensionner. Par conséquent, veuillez 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 cela n'est pas nécessaire, passez directement à l'étape 4. Mettez le chiffre "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 > Styles > Gestionnaire de fichiers et copier-coller le chemin CSS en bas du sous-onglet Custom CSS pour l'utiliser dans votre Formation.

Calculer la bonne largeur

En CSS, vous devrez spécifier la hauteur et la largeur du logo que vous ajoutez. Vous devez respecter le rapport d'aspect du logo, et 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. Accédez au logo que vous venez de télécharger dans votre Explorateur, cliquez dessus avec le bouton droit de la souris et cliquez sur Propriétés. Sélectionnez l'onglet Détails. Vous verrez que vos dimensions sont indiquées en haut de la liste
Allez sur la calculatrice en ligne. Saisissez la largeur et la hauteur de l'image (celle qui figure dans les propriétés), sélectionnez Nouvelle hauteur, et saisissez la nouvelle hauteur (voir ci-dessous après background-size, la deuxième valeur est la hauteur que vous souhaitez).
La calculatrice dira quelque chose comme "Behold ! La nouvelle largeur", et votre nombre est là ! Arrondissez ce nombre à l'unité 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 unie a été ajoutée au logo avec un remplissage à l'intérieur. Si vous souhaitez que l'image soit différente, vous devez modifier les paramètres background-size et background-position (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é stylisée pour avoir un léger rembourrage sur le côté et en haut. Si vous ne souhaitez pas que cela se produise, vous pouvez définir la hauteur de l'image à 54px pour les ordinateurs de bureau et à 45px pour les téléphones mobiles et définir la position de l'arrière-plan à 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 { background-image : url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]') ; background-position : top 10px right 10px ; background-repeat : no-repeat ; background-size : 117px 40px;}@media only screen and (max-width : 40em) { .tab-bar { background-position : right 10px center ; background-size : 102px 35px ; }}
Logo en bas à gauche ou à droite

Ajustez la largeur, la hauteur et la taille d'arrière-plan en fonction des dimensions de votre image

Dans l'exemple ci-dessous, le logo est aligné sur la droite. Pour l'aligner à gauche, remplacez right : 0 par left : 0

Si vous souhaitez que le logo soit un peu plus éloigné du bord, écrivez des choses comme right : 10px et bottom : 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 ; z-index : 99;}```
Cet article a-t-il répondu à vos questions ?
Annuler
Merci !