Le propriétaire de la plateforme peut ajouter du CSS pour personnaliser l’apparence de la plateforme sur l’application Web. Pour activer cette fonctionnalité, contactez votre Account Manager.
Cette fonctionnalité ne fait pas partie de la solution Extended Academies.
⚠️ 360Learning ne fournit pas d’aide à la mise en place du code CSS, ni à sa maintenance, et nous ne fournissons pas de support dessus.
Avant d’activer la fonctionnalité de code CSS personnalisé, nous vous recommandons :
- de mettre en place un processus de test et mise à jour du code avant de l’activer ;
- de faire appel à un·e développeur·se si vous prévoyez de faire des changements CSS importants sur votre plateforme.
Si vous décidez que le CSS personnalisé correspond à vos besoins, le propriétaire de la plateforme doit être préparé à :
- tester le code personnalisé à chaque mise à jour de la plateforme, qui a lieu toutes les 3 semaines ;
- et adapter le code aux changements visuels de la plateforme, et assurer le support vis-à-vis de ses propres utilisateurs.
Ajouter, modifier ou supprimer du code CSS personnalisé
Les administrateurs peuvent ajouter des règles personnalisées CSS ou HTML au niveau du groupe. Elles s’appliquent ensuite au groupe et se propagent à tous les groupes enfants, jusqu’à ce qu’elles atteignent un groupe avec ses propres paramètres personnalisés CSS ou HTML.
- Sur la page d’accueil, dans la barre de gauche, cliquez sur le groupe plateforme.
- En haut à droite, cliquez sur
Paramètres.
- Dans la barre de gauche, cliquez sur Identité visuelle.
- Dans le champ CSS personnalisé pour le groupe, ajoutez, modifiez ou supprimez le code CSS.
- Dans le champ HTML personnalisé pour le groupe, ajoutez, modifiez ou supprimez le code HTML.
- Cliquez en dehors du champ pour enregistrer.
- Rafraîchissez la page de votre navigateur pour voir les modifications.
Exemples de CSS
Pour adapter le CSS de la plateforme, vous devez connaître l’élément et la propriété que vous souhaitez modifier.
-
Element:
.collapsing-panel
-
Property:
background
Les modifications simples ressembleront donc à ceci :
element {
property: value;
}
Autres ressources :
Recommandations générales
- Testez le code sur votre environnement de test.
- Copiez-collez le code dans votre environnement de production.
- Sauvegardez une copie du code dans un fichier à part.
Extraits de code
Vous trouverez dans cette section des extraits de code pour :
- modifier les boutons ;
- modifier la barre latérale de navigation ;
- afficher du HTML/CSS personnalisé en fonction de la langue de la plateforme de l’utilisateur ;
- afficher du HTML/CSS personnalisé en fonction du rôle de l’utilisateur ;
- masquer la barre latérale de navigation.
Modifier les boutons
Le code suivant modifie la couleur des boutons.
button.button-regular.high-impact {
background: #692193!important;
}
Le code suivant modifie la couleur et la police des boutons.
button.button-regular.high-impact {
background: #692193!important;
font-family: Helvetica, sans-serif
}
Modifier la barre de navigation latérale de la page d’accueil
Le code suivant modifie la couleur des différents éléments de la barre latérale de navigation.
.group-list {
background: #3B2F87!important;
}
.collapsing-panel {
background: #3B2F87!important;
}
.section.top.is-selected {
background-color: #EBE9FA!important;
}
Afficher du HTML et CSS personnalisés en fonction de la langue de l'utilisateur
Le code suivant configure un bloc HTML et le CSS associé pour afficher un contenu spécifique en haut d'une page de groupe en fonction de la langue de l'utilisateur.
HTML
<div class="test-widget">
<div class="widget_lang widget_fr">French</div>
<div class="widget_lang widget_en">English</div>
</div>
CSS
.widget_lang {
display: none;
}
[lang=fr] .widget_fr {
display: block;
}
[lang=en] .widget_en {
display: block;
}
.test-widget {
background-color: #EEE;
padding: 20px;
width:200px;
margin: auto;
text-align: center;
}
Dans l'exemple ci-dessus :
- Un utilisateur avec la langue de la plateforme en français verra le contenu dans l'élément
widget-fr
. - Un utilisateur avec la langue de la plateforme en anglais verra le contenu dans l'élément
widget-en
. - La classe
.test-widget
applique un style de base au conteneur pour s'assurer qu'il est visuellement distinct et centré sur la page.
Afficher du HTML et CSS personnalisés en fonction du rôle de l'utilisateur
Le code suivant configure un bloc HTML et le CSS associé pour afficher un contenu spécifique en haut d'une page de groupe en fonction du rôle le plus élevé de l'utilisateur.
HTML
<div class="test-widget">
<div class="widget_role widget_learner">Learner</div>
<div class="widget_role widget_admin">Admin</div>
<div class="widget_role widget_owner">Owner</div>
</div>
CSS
.widget_role {
display: none;
}
[role-user=learner] .widget_learner {
display: block;
}
[role-user=admin] .widget_admin {
display: block;
}
[role-user=owner] .widget_owner {
display: block;
}
.test-widget {
background-color: #EEE;
padding: 20px;
width:200px;
margin: auto;
text-align: center;
}
Dans l'exemple ci-dessus :
- Un utilisateur avec le rôle d'
apprenant
verra le contenu dans l'élémentwidget_learner
. - Un utilisateur avec le rôle d'
administrateur
verra le contenu dans l'élémentwidget_admin
. - Un utilisateur avec le rôle de
propriétaire
verra le contenu dans l'élémentwidget_owner
. - La classe
.test-widget
applique un style de base au conteneur pour s'assurer qu'il est visuellement distinct et centré sur la page.
Masquer le fil d'actualité
Masquer le fil d’actualité partout dans la plateforme
Pour masquer le fil d’actualité dans la page d’accueil et les pages de groupe, utilisez le code CSS suivant :
#workspace-right-panel:has(.feed-list) {
display: none;
}
Masquer le fil d’actualités sur une page de groupe spécifique
Pour masquer le fil d’actualités d’une page de groupe spécifique, utilisez le code CSS suivant. Remplacez la mention <GROUP_ID>
par l’identifiant du groupe dans lequel vous souhaitez masquer le fil d’actualités.
#workspace-right-panel[data-group-id='<GROUP_ID>'] {
display: none;
}