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

1. Ouvrez le menu Options de ShoutOut
2. Accéder à l'onglet Interaction
3. Cliquez sur Modifier le CSS
4. Saisissez le CSS personnalisé dans la console CSS
5. Cliquez sur Save (Enregistrer).

Modifier le CSS global

1. Cliquez sur Modifier le CSS global dans le menu des paramètres de l'éditeur WalkMe
2. Saisissez le CSS personnalisé dans l'Éditeur CSS
3. Cliquez sur Save (Enregistrer).
4. Cliquez sur Publier les paramètres

Trouver l'identifiant WalkMe

1. Survoler l'élément dans l'éditeur
2. Cliquez sur le menu Options
3. 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

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;
}