Recherche

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

  • Mise à jour

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.

⚠️ 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.

Comprendre la coexistence avec le widget HTML

Le nouveau widget HTML fonctionne en parallèle du code HTML/CSS personnalisé.

  • Vos blocs HTML personnalisés actuels resteront à leur place (en haut de la page) lorsque le nouveau widget sera déployé.
  • Vos blocs existants continueront de fonctionner. Déplacez leur contenu dans le widget HTML quand vous serez prêt.

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.

  1. Dans la barre latérale gauche, survolez le groupe plateforme (celui avec une couronne dorée), puis cliquez sur gear.svgParamètres.
    • Si settings.svgParamètres n’apparaît pas dans votre barre latérale, cliquez d’abord sur le groupe plateforme, puis cliquez sur settings.svgParamètres dans la section principale en haut à droite.
  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

La plupart des changements ressembleront à ceci.

element {
  property: value;
}

Autres ressources :

Recommandations générales

  1. Testez le code sur votre environnement de test.
  2. Copiez 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

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

Ce code change la couleur des éléments dans le panneau 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

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;
}
Visitez notre blog pour plus de ressources sur le Collaborative Learning.

Cet article vous a-t-il été utile ?

Utilisateurs qui ont trouvé cela utile : 8 sur 9


Vous avez d’autres questions ? Envoyer une demande