- Utiliser SafetyCulture
- Formation (modification)
- CSS personnalisé pour les thèmes de cours
CSS personnalisé pour les thèmes de cours
En savoir plus sur les CSS personnalisés et sur la façon dont vous pouvez les appliquer à vos thèmes de formations à partir de l'application Web.
Pourquoi utiliser des feuilles de style CSS personnalisées pour les thèmes de cours ?
La fonctionnalité Formation de la plateforme SafetyCulture offre un large éventail d'options de personnalisation pour vos supports de formation. Vous pouvez gérer les thèmes de cours pour sélectionner des schémas de couleurs, ajouter des logos, et plus encore pour créer un contenu attrayant. Si vous avez des connaissances et de l'expérience en matière de codage, vous pouvez personnaliser vos thèmes de cours au-delà des options disponibles que nous fournissons avec des feuilles de style CSS personnalisées pour créer une impression inoubliable pour votre équipe.
L'application de feuilles de style CSS personnalisées dans la fonctionnalité Formation n'est pas du ressort de notre service de support technique. Nous ne sommes donc pas en mesure de vous fournir des conseils ou de vous aider dans la configuration et le dépannage.
Étant donné que le CSS personnalisé est une solution basée sur le code, nous ne pouvons pas non plus garantir sa fonctionnalité ou sa compatibilité totale avec la fonctionnalité Formation. Cela inclut l'interaction avec notre conception réactive et sa performance dans tous les cours.
Exemple de code CSS
Pour vous aider à commencer à utiliser des CSS personnalisées pour les thèmes de cours, nous vous proposons des exemples de code que vous pouvez utiliser comme références pour mettre en forme les éléments suivants dans un cours :
Polices et textes
Boutons
En-têtes et bordures
Contenu et interactions spécifiques aux différents types de diapositives.
Nous vous encourageons à tester le thème de vos cours à l'aide de notre exemple de code CSS et à le modifier pour qu'il corresponde à la marque de votre organisation.
Polices et textes
/* POLICE - Vous pouvez changer ceci en trouvant une police à importer sur Google */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=Poppins&display=swap');
h1 {
font-family : 'Poppins', sans-serif ;
colour : var(--text-color) ;
font-size : 28px ;
font-weight : 600 ;
}
h2 {
font-family : 'Poppins', sans-serif ;
color : var(--text-color) ;
font-size : 22px ;
}
h3, h4, h5 {
font-family : 'Noto Sans', sans-serif ;
color : var(--text-color) ;
font-size : 16px ;
}
body {
font-family : 'Noto Sans', sans-serif ;
color : var(--text-color) ;
font-size : 16px ;
}
Variables de racines
:root {
--main-color : #6559FF ;
--accent-color : #FFD700 ;
--text-color : #293745 ;
}
Boutons
/* BOUTONS */
.btn.btn {
background-color : var(--main-color) ;
couleur : #ffffff ;
border-radius : 8px ;
font-size : 15px ;
}
/* BUTTONS */
.btn.btn {
background-color : var(--main-color) ;
colour : #ffffff ;
border-radius : 8px ;
font-size : 15px ;
}
.btn.btn:active {
background-color: #564BE7;
color: #ffffff;
border-radius: 8px;
}
Bordure inférieure
/* BORDURE INFÉRIEURE */
.block-h-lg {
border-bottom : 5px solid black ;
border-image : linear-gradient(90deg, rgba(101,89,255,1) 33%, rgba(20,202,255,1) 33%, rgba(20,202,255,1) 65%, rgba(255,215,0,1) 65%, rgba(255,215,0,1) 100%) ;
border-image-slice : 30 ;
}
En-tête de leçon
/* EN-TÊTE DE LEÇON */
#indicator {
color: #6559FF;
background: #ffffff;
}
#lesson-header-nav {
background-color : var(--main-color) ;
colour : #ffffff ;
font-size : 13px ;
}
#lesson-header-nav-menu-btn {
border-color : #ffffff ;
colour : #ffffff ;
}
#lesson-header-title-content {
border-bottom : 0px solid transparent ;
font-family : 'Noto Sans' ;
font-size : 15px ;
}
#slides {
font-family : 'Noto Sans', sans-serif ;
color : var(--text-color) ;
font-size : 16px ;
border-bottom : 0px solid ;
}
.slide-footer .slide-footer-prompt-content {
font-style : shadow ;
}
Diapositive de réponse
/* DIAPOSITIVE DE RÉPONSE */
#slide-answer {
color : var(--main-color) ;
}
Liste déroulante
/* LISTE EXPANSABLE */
.slide-expandable-list .item.active .item-button {
background-color : #564BE7 ;
colour : #ffffff ;
}
.slide-expandable-list .btn.btn-solid {
border-radius : 3px ;
}
Vrai ou faux
/* VRAI OU FAUX */
.slide-game-true-or-false .game-statement {
background-color : var(--main-color) ;
colour : #ffffff ;
font-size : 14px ;
}
Choix multiples
/* CHOIX MULTIPLE */
.selectable.active .btn {
background-color: var(--text-color);
color: #ffffff;
}
.slide-multiple-choice-game.state-complete .selectable.correct .btn {
background-color: var(--text-color);
color: #ffffff;
}
.slide-multiple-choice-game.state-complete .selectable.incorrect .btn {
background-color : #3030 ;
color : var(--text-color) ;
}
Chat à choix multiples
/* MULTIPLE CHOICE CHAT */
/* Bulle de questions */
.quote.quote-dk {
background-color : #dbdff7 ;
color : var(--main-color) ;
}
.quote.quote-dk:after {
border-color : #dbdff7 transparent transparent ;
}
/* Bulles de choix */
.quote.quote-lt {
background-color : var(--main-color) ;
colour : #ffffff ;
}
.quote.quote-lt:after {
border-color : var(--main-color) transparent transparent ;
}
/* Bulle active */
.quote.active {
background-color: #14caff;
color: #ffffff;
}
.quote.active:after {
border-color : #14caff transparent transparent ;
}
/* Bulle de réponse correcte */
.slide-chat.state-complete .chat-msg.correct {
background-color: #14caff;
color: #ffffff;
}
.slide-chat.state-complete .chat-msg.correct:after {
border-color : #14caff transparent transparent ;
}
Révéler
/* RÉVÉLER */
.slide-reveal .btn-reveal-title.flippable {
background : #14caff ;
color : var(--text-color) ;
}
.slide-reveal .btn-reveal.active .btn-reveal-desc.flippable {
background: #e8faff;
color: #14caff;
}
.slide-reveal .btn-reveal-desc, .slide-reveal .btn-reveal-title {
pointer-events : none ;
}
Bulle de dialogue
/* BULLE DE DIALOGUE */
/* dark */
.slide-speech-bubble .quote.pull-left.quote-dk:after {
border-color: transparent transparent transparent;
}
/* léger */
.slide-speech-bubble .quote.pull-left.quote-lt {
background: #f9f9f9;
border-left: 8px solid #14caff;
margin: 1.5em 10px;
padding: -5em 1px;
quotes: "\201C""\201D""\2018""\2019";
}
.slide-speech-bubble .quote.pull-left.quote-lt:before {
color: #ffd700;
content: open-quote;
font-size: 130px;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
.slide-speech-bubble .quote.pull-left.quote-lt:after {
border-color: transparent transparent transparent;
color: #ffd700;
content: close-quote;
font-size: 130px;
line-height: 0.3em;
margin-left: 1.4em;
vertical-align: -0.4em;
}
Curseur d'image
/* CURSEUR D'IMAGE */
.slide-image-slider .style-default .caption-content {
background-color : #dbdff7 ;
color : var(--main-color) ;
}
Boutons curseurs
/* BOUTONS DU CURSEUR */
.slide-image-slider .btn-down {
border-radius : 50% ;
color : #ffd700 ;
}
.slide-image-slider .btn-up {
border-radius : 50% ;
color : white ;
}
.slide-image-slider .btn-down:hover {
border-radius : 50% ;
color : white ;
}
.slide-image-slider .btn-down:active {
border-radius : 50% ;
color : #14caff ;
}
.slide-image-slider .btn-up:hover {
border-radius : 50% ;
color : #14caff ;
}
.slide-image-slider .btn-up:active {
border-radius : 50% ;
color : #14caff ;
}
.slide-text-sequence .btn-down {
border-radius : 50% ;
color : #ffd700 ;
}
.slide-text-sequence .btn-up {
border-radius : 50% ;
color : #ffd700 ;
}
.slide-text-sequence .btn-down:hover {
border-radius : 50% ;
color : #14caff ;
}
.slide-text-sequence .btn-down:active {
border-radius : 50% ;
color : #14caff ;
}
.slide-text-sequence .btn-up:hover {
border-radius : 50% ;
color : #14caff ;
}
.slide-text-sequence .btn-up:active {
border-radius : 50% ;
color : #14caff ;
}
Défilement
/* MÉLANGE DE DÉFILEMENT */
.pswp__top-bar {
color : #293745 ;
}
.pswp--notouch .pswp__hint:before {
content : "Appuyer sur ESC pour quitter" ;
color : black ;
}
Invite de l'État
<.state-prompt .slide-footer .slide-footer-prompt, .state-intro .slide-footer .slide-footer-prompt {
font-family : 'Noto Sans' ;
font-size : 14px ;
border-bottom : 0px solid transparent ;
}
Ressources publiques CSS
Si vous avez besoin de conseils supplémentaires, voici quelques ressources en ligne utiles qui peuvent vous aider à commencer avec le code CSS :
Cette page vous a-t-elle été utile?
Merci pour votre commentaire.