Modifier l’apparence de la plateforme avec du CSS personnalisé

Les propriétaires de la plateforme peuvent utiliser du CSS personnalisé pour personnaliser l’apparence de leur plateforme sur l’application Web. Ces personnalisations s’appliquent à l’interface de la plateforme et à la page de connexion.

Pour activer ce paramètre facultatif, contactez votre Account Manager.

Cette fonctionnalité ne fait pas partie de la solution Extended Academies.

Comprendre la coexistence avec le widget HTML

Le widget HTML complémente le HTML personnalisé de l’option HTML personnalisé/CSS.

• Vos blocs HTML personnalisés actuels resteront à leur place (en haut de la page) lorsque le nouveau widget sera déployé.
• Vous pouvez continuer à utiliser vos anciens blocs, ou transférer leur contenu dans le widget HTML.

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 sous-groupes, jusqu’à ce qu’elles atteignent un groupe avec ses propres paramètres personnalisés CSS ou HTML.

• Si vous ne voyez pas  Paramètres dans la barre de gauche, remplacez la première étape par :
  1. Sur la page d’accueil, dans la barre de gauche, cliquez sur le groupe plateforme (avec une couronne jaune en bas à droite de son icône).
  2. En haut à droite de la section principale, cliquez sur  Paramètres.

1. Dans la barre de gauche, survolez le groupe plateforme (avec une couronne dorée), et cliquez sur Paramètres.
2. Dans la barre de gauche, cliquez sur Identité visuelle.
3. Dans le champ CSS personnalisé pour le groupe, ajoutez, modifiez ou supprimez le code CSS.
4. Dans le champ HTML personnalisé pour le groupe, ajoutez, modifiez ou supprimez le code HTML.
5. Cliquez en dehors du champ pour enregistrer.
6. 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 :

• HTML Color Codes
• W3Schools: CSS Reference

Recommandations générales

1. Testez le code sur votre environnement de test.
2. Copiez-collez le code dans votre environnement de production.
3. Sauvegardez une copie du code dans un fichier à part.

Les styles z-index en ligne ne sont pas autorisés pour des raisons de sécurité. Ils sont automatiquement supprimés lors de l'affichage du contenu, mais restent inchangés dans les données d’entrée utilisateur enregistrées.

Extraits de code

Vous trouverez dans cette section des extraits de code pour :

• modifier la police ;
• 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 la police

Le code suivant modifie la police de la plateforme.

body {
  font-family: 'Your Font', sans-serif !important;
}

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


[lang=fr].widget_fr
    display


[lang=en].widget_en
    display


.test-widget
 background-color#EEE
 padding20px
 width200px
 margin
 text-align

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"></div>
    <div class="widget_role widget_admin"></div>
    <div class="widget_role widget_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ément widget_learner.
• Un utilisateur avec le rôle d'administrateur verra le contenu dans l'élément widget_admin.
• Un utilisateur avec le rôle de propriétaire verra le contenu dans l'élément widget_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 {
  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;
}