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

  • Mise à jour

Le propriétaire de la plateforme peut ajouter du CSS pour personnaliser l’apparence de la plateforme. Pour activer cette fonctionnalité, contactez votre Account Manager.

⚠️ 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 toutes les 3 semaines,
  • et adapter le code aux changements visuels de la plateforme, et assurer le support vis-à-vis de ses propres utilisateurs.

Le code s’ajoute au niveau d’un groupe, et s’applique sur le groupe et tous les groupes enfants.

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.

Ajouter, modifier ou supprimer du code CSS personnalisé

  1. Depuis la page d’accueil, dans la barre de gauche, cliquez sur le groupe plateforme.
  2. En haut à droite, cliquez sur ... → Paramètres.
  3. Dans la colonne de gauche, cliquez sur Avancé.
  4. Descendez jusqu’à la section Web platform Custom CSS.
  5. Ajoutez, modifiez ou supprimez le code CSS.
  6. Cliquez en dehors du champ pour sauvegarder les modifications.
  7. Rafraîchissez la page de votre navigateur pour voir les modifications.

Exemples de CSS

Pour modifier le CSS de la plateforme, vous devez identifier l’élément ("element") et la propriété ("property") de ce que vous souhaitez modifier.

  • Element: .collapsing-panel
  • Property: background

Les modifications simples ressembleront donc à ceci :

element {
  property: value;
}

Autres ressources:

Modifier les boutons

Le code suivant modifie la couleur des boutons.

button.button-regular.high-impact {
    background: #692193!important;
}

Le code suivant modifie la coleur 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

.group-list {
    background: #3B2F87!important;
}

.collapsing-panel {
    background: #3B2F87!important;
}

.section.top.is-selected {
    background-color: #EBE9FA!important;
}
Visitez notre blog pour plus de ressources sur le Collaborative Learning.