Les composants standards des Knowledge Places

Rechercher
Imprimer

Les composants standards des Knowledge Places

Les Knowledge Places incluent plusieurs composants standards qui sont construits dynamiquement par le metaLMS :

Le design de ces composants standards peut être personnalisé en utilisant des règles CSS.

Pour définir ces règles CSS :

  • Connectez vous au CMS Knowledge Place
  • Cliquez sur le menu Réglages
  • Définissez les règles CSS dans le champ Personnaliser CSS de l’onglet Général
  • Cliquez sur le bouton Sauvegarder les changements

Ces règles CSS doivent utiliser des sélecteurs CSS correspondant aux éléments des composants que vous souhaitez personnaliser.

Vous pouvez utiliser les outils de développement de votre navigateur pour identifier les sélecteurs CSS à utiliser.

Si vous le souhaitez, vous pouvez définir des règles CSS spécifiques à une Knowledge Place en particulier, en ajoutant un sélecteur de classe aux sélecteurs CSS de ces règles CSS.

Ce sélecteur de classe doit utiliser comme nom de classe le slug de la Page Connexion de la Knowledge Place pour laquelle vous souhaitez définir des règles CSS personnalisées.

Cette page fournit des exemples de règles CSS pour chacun des composants standards que vous pouvez personnaliser.  

Le Bouton de Navigation

Le Bouton de Navigation est un bouton flottant affiché en bas à droite de l’écran dès que l’Utilisateur se connecte à une Knowledge Place ou navigue vers une Page Visiteur.

Le metaLMS construit automatiquement le Bouton de Navigation en fonction de la navigation de l’Utilisateur dans la Knowledge Place.

Le Bouton de Navigation se compose d’un Bouton Principal et de Boutons Secondaires qui sont affichés lorsque l’Utilisateur clique sur le Bouton Principal.

Bouton Principal

Le Bouton Principal du Bouton de Navigation est identifié par la classe kc_fab_main_btn.

Dans l’exemple ci-dessous, la règle CSS définir une couleur de fond et afficher le Bouton Principal sur la gauche de l’écran :

.kc_fab_main_btn {
background-color: #194995 !important;
left: 16px !important;
}

Dans l’exemple ci-dessous, cette règle CSS est personnalisée pour une Knowledge Place dont la Page Connexion est définie avec le slug « onboarding ».

.onboarding.kc_fab_main_btn {
background-color: #194995 !important;
left: 16px !important;
}

Boutons secondaires

Dans l’exemple ci-dessous, les règles CSS définissent la couleur de fond et la police des Boutons Secondaires.

.sub_fab_btn {
background-color: #E65422 !important;
}
.sub_fab_btns_wrapper button[data-link-title]:after {
background-color: #E65422 !important;
font-family: « Open Sans »;
}

Les Boîtes de Dialogue, Alertes et Notifications

Les Knowledge Places peuvent afficher des Boîtes de Dialogue, des Alertes et des Notifications dans plusieurs cas, tels que la demande de modification de mot de passe ou la confirmation de la navigation en mode Tuteur.

Dans l’exemple ci-dessous, les règles CSS personnalisent l’entête et les boutons des Boîtes de Dialogue.

.ajs-header {
background-color: #8E1E07 !important;
color: white !important;
}
.ajs-dialog {margin-top: 15% !important;}
.ajs-dialog, .ajs-footer {
background-color: #F5F1E9 !important;
color: #808080 !important;
}
.ajs-content {
color: #666 !important;
}
.ajs-ok {
background-color: #FF9201 !important;
border: none !important;
border-color: transparent !important;
color: black;
border-radius: 4px;
}
.ajs-ok:hover {
background-color: #876C4E !important;
color: white !important;
}

Les Composants Web

Les Knowledge Places peuvent utiliser des Composants Web tels que le Moteur de Recherche, les Statistiques ou l’Inscription eBoutique.

Les couleurs utilisées par ces Composants Web peuvent être personnalisées en utilisant les variables CSS ci-dessous.

  • kps-primary-color : couleur principale
  • kps-primary-light-color : couleur principale claire
  • kps-primary-background-color : couleur de fond principale
  • kps-accent-color : couleur d’accentuation
  • kps-accent-background-color : couleur de fond d’accentuation
  • kps-background-color : couleur de fond
  • kps-background-color-even : couleur de fond des lignes paires
  • kps-background-color-odd : couleur de fond des lignes impaires
  • kps-valid-color : couleur de validité
  • kps-hover-color : couleur de survol
  • kps-warn-color : couleur d’avertissement

Dans l’exemple ci-dessous, la règle CSS définit des valeurs spécifiques pour toutes ces variables.

:root {
–kps-primary-color: darkgreen;
–kps-primary-light-color: honeyDew;
–kps-primary-background-color: #D0E3DA;
–kps-accent-color: #82B600;
–kps-accent-background-color: black;
–kps-background-color: #FFF9E0;
–kps-background-color-even: #FFF9E0;
–kps-background-color-odd: #F5F1E9;
–kps-valid-color: #5EFFB2;
–kps-hover-color: blue;
–kps-warn-color: red;
}