CSS pour les ShoutOuts classiques
Aperçu rapide
Les feuilles de style en cascade (CSS) vous permettent d'appliquer la personnalisation avancée aux ShoutOuts classiques, y compris les éléments tels que la police, l'arrière-plan et la bordure.
Le CSS peut être utilisé pour personnaliser le ShoutOut :
- Boutons d'action et de fermeture
- En-tête de texte et ruban
- Texte
- bouton « X »
Pour en savoir plus sur l'utilisation du nouvel éditeur visuel pour ShoutOuts sans avoir besoin de CSS, lisez le guide ShoutOuts : guide des premiers pas.
Comment ça marche
La feuille de style en cascade (CSS) est une langue de feuille de style utilisée pour décrire le formatage d'un document écrit dans une langue de balisage. Lorsque vous écrirez en CSS, vous devrez consulter les différents composants (connus techniquement comme des éléments) du ShoutOut classique.
Lorsque vous tapez dans la fenêtre CSS personnalisé, WalkMe affiche des options automatiques pour les sélecteurs, les propriétés et les valeurs.
La configuration des composants de la bulle
Chaque ShoutOut comprend un certain nombre de composants (éléments) qui peuvent être personnalisés avec le CSS.
Par exemple, vous pouvez cibler la section du titre d'un ShoutOut en utilisant cette classe :
- .wm-title
Voir la liste complète des cours.
CSS global vs local
Le CSS peut être appliqué globalement ou localement. L'utilisation de la console CSS locale facilite la personnalisation d'un ShoutOut individuel.
Si vous personnalisez un seul ShoutOut au niveau global, vous devez saisir l'ID du ShoutOut avant la classe qui identifie la section du ballon.
Exemple CSS local :
- .wm-title
Exemple CSS global :
- #wm-shoutout-XXX .wm-title
Modifier le CSS local
- Ouvrez le menu Options de ShoutOut
- Accéder à l'onglet Interaction
- Cliquez sur Modifier le CSS
- Saisissez le CSS personnalisé dans la console CSS
- Cliquez sur Save (Enregistrer).
Modifier le CSS global
- Cliquez sur Modifier le CSS global dans le menu des paramètres de l'éditeur WalkMe
- Saisissez le CSS personnalisé dans l'Éditeur CSS
- Cliquez sur Save (Enregistrer).
- Cliquez sur Publier les paramètres
Trouver l'identifiant WalkMe
- Survoler l'élément dans l'éditeur
- Cliquez sur le menu Options
- Cliquez sur Copier l'ID
Utilisation d' !important
Par défaut, la conception du thème WalkMe prévaut sur toute autre modification de la conception.
Pour que le CSS soit appliqué, la règle CSS doit contenir "!important" afin de s'assurer qu'elle remplace le style par défaut.
Par exemple :
#wm-shoutout-XXXX .wm-title {
color: #000 !important;
}
Les composants configurables
| div | Fonctionnalités modifiables | |
| 1 | .wm-outer-div | Cet élément est le ruban ShoutOut. Vous serez en mesure de modifier :
|
| 2 | .wm-ribbon | Cet élément est le ruban ShoutOut. Vous serez en mesure de modifier :
|
| 3 | .wm-title | Cet élément est l'en-tête ShoutOut. Vous serez en mesure de modifier :
|
| 4 | .wm-template-text | Cet élément est le texte ShoutOut. Vous serez en mesure de modifier :
|
| 5 | .wm-blue-btn | Cet élément est le bouton Action. Vous serez en mesure de modifier :
|
| 6 | .wm-close-link | Cet élément est le bouton Fermer. Vous serez en mesure de modifier :
|
| 7 | .walkme-x-button | Cet élément est le bouton "X". Vous serez en mesure de modifier :
|
Personnalisations CSS courantes
Modifier la largeur d'une bulle ShoutOut
.wm-shoutout-XXXX.wm-outer-div {
width: XXXpx !important;
}
Ruban ShoutOut Central
#wm-shoutout-XXXXX .wm-main-ribbon.wm-template-main-bg,
.wm-ribbon-edge.left.wm-template-main-bg, .wm-ribbon-edge.right.wm-template-main-bg {
background-color: #XXXXXX !important;
}
Extrémité gauche du ruban ShoutOut
#wm-shoutout-XXX .wm-ribbon-triangle.left.top.wm-main-border-right-color, .wm-ribbon-ripple.left.wm-main-border-right-color {
border-color : transparent #XXXXXX transparent transparent !important ;
}
#wm-shoutout-XXXXX .wm-main-border-bottom-color {
couleur de la bordure : transparent transparent #XXXXXX !important;
}
Extrémité droite du ruban ShoutOut
#wm-shoutout-XXX .wm-ribbon-triangle.right.top.wm-main-border-top-color, .wm-ribbon-ripple.right.wm-main-border-top-color.wm-main-border-left-color {
couleur de la bordure : #XXXXXX transparent transparent !important ;
}
#wm-shoutout-XXX .wm-ribbon-triangle.right.bottom.wm-main-border-left-color {
couleur de la bordure : transparent transparent transparent #XXXXXX !important ;
}
Modèle trapézoïdal
#wm-shoutout-XXXXX .wm-trapezoid {
border-top : 40px solid #XXXXXX !important ;
}
#wm-shoutout-XXXXX .wm-main-border-bottom-color {
couleur de la bordure : transparent transparent #XXXXXX !important;
}
Modèle carré
#wm-shoutout-XXXXX .wm-icon-square {
border-color: #XXXXXX !important;
}