Vous pouvez personnaliser le style de votre boîte de dialogue de chat en définissant des variables CSS.
Style général
Les variables CSS suivantes fournissent des options de style générales :
| Propriétés | Règle d'entrée | Valeur par défaut | Description |
|---|---|---|---|
df-messenger-font-family |
Facultatif | "Google Sans", "Helvetica Neue", sans-serif | Famille de polices à utiliser dans l'ensemble du widget. |
df-messenger-font-size |
Facultatif | 14 px | Taille du texte à utiliser dans l'ensemble du widget. |
df-messenger-font-color |
Facultatif | #1f1f1f | Couleur de texte à utiliser dans l'ensemble du widget. |
df-messenger-primary-color |
Facultatif | #0b57d0 | Couleur principale des éléments du widget (comme l'arrière-plan de la barre de titre, l'arrière-plan du bouton d'action, etc.). |
df-messenger-focus-color |
Facultatif | #1e88e5 | Couleur de l'anneau de sélection autour des éléments. |
df-messenger-focus-color-contrast |
Facultatif | blanc | Couleur de l'anneau de sélection autour des éléments lorsqu'ils se trouvent dans un parent avec une couleur d'arrière-plan (comme la barre de titre). |
df-messenger-chat-border |
Facultatif | aucun | Bordure de la boîte de dialogue. |
df-messenger-chat-border-radius |
Facultatif | 0 | Rayon de bordure de la boîte de dialogue. |
Style pour df-messenger-chat-bubble
Lorsque vous utilisez l'élément df-messenger-chat-bubble, vous pouvez fournir les variables CSS suivantes :
| Propriétés | Règle d'entrée | Valeur par défaut | Description |
|---|---|---|---|
df-messenger-chat-window-height |
Facultatif | 480 px | Hauteur de la fenêtre de chat. |
df-messenger-chat-window-width |
Facultatif | 320 px | Largeur de la fenêtre de chat. |
df-messenger-chat-window-offset |
Facultatif | 16 px | Distance entre la bulle de chat et la fenêtre de chat. |
df-messenger-chat-window-box-shadow |
Facultatif | aucun | Ombre de la fenêtre de chat. |
df-messenger-chat-collapse-icon-size |
Facultatif | non défini | Taille de l'icône du bouton de réduction dans la barre de titre. |
df-messenger-chat-bubble-icon-size |
Facultatif | 36 px | Taille de l'icône de la bulle de chat. |
df-messenger-chat-bubble-close-icon-size |
Facultatif | 24 px | Taille de l'icône Fermer de la bulle de chat. |
df-messenger-chat-bubble-close-icon-transform-rotate |
Facultatif | -90deg | Rotation de l'icône Fermer de la bulle de chat, qui pivote à 0 degré lors de la fermeture du chat. |
df-messenger-chat-bubble-icon-color |
Facultatif | blanc | Couleur de l'icône et de l'icône Fermer de la bulle de chat. |
df-messenger-chat-bubble-size |
Facultatif | 64 px | Taille de la bulle de chat. |
df-messenger-chat-bubble-background |
Facultatif | #0b57d0 | Arrière-plan de la bulle de chat. |
df-messenger-chat-bubble-border-radius |
Facultatif | 32 px | Rayon de bordure de la bulle de chat. |
df-messenger-chat-bubble-border |
Facultatif | aucun | Bordure de la bulle de chat. |
df-messenger-chat-border-minimized |
Facultatif | aucun | Bordure du chat sous forme réduite. |
df-messenger-chat-border-radius-minimized |
Facultatif | 0 | Rayon de la bordure du chat sous forme réduite. |
Style de la barre de titre
Pour la barre de titre, vous pouvez fournir les variables CSS suivantes :
| Propriétés | Règle d'entrée | Valeur par défaut | Description |
|---|---|---|---|
df-messenger-titlebar-background |
Facultatif | #0b57d0 | Arrière-plan de la barre de titre. |
df-messenger-titlebar-padding |
Facultatif | 0 15px | Marge intérieure de la barre de titre. |
df-messenger-titlebar-border |
Facultatif | aucun | Bordure de la barre de titre. |
df-messenger-titlebar-border-bottom |
Facultatif | aucun | Bordure inférieure de la barre de titre. |
df-messenger-titlebar-title-align |
Facultatif | start | Alignement du texte du titre dans la barre de titre. Les valeurs autorisées sont start, center ou end. |
df-messenger-titlebar-font-color |
Facultatif | blanc | Couleur du texte dans la barre de titre. |
df-messenger-titlebar-letter-spacing |
Facultatif | Normal | Espacement entre les lettres du texte dans la barre de titre. |
df-messenger-titlebar-title-font-size |
Facultatif | 18 px | Taille du texte du titre dans la barre de titre. |
df-messenger-titlebar-title-font-family |
Facultatif | "Google Sans", "Helvetica Neue", sans-serif | Famille de polices du texte du titre dans la barre de titre. |
df-messenger-titlebar-title-font-weight |
Facultatif | 400 | Épaisseur de la police du texte du titre dans la barre de titre. |
df-messenger-titlebar-title-line-height |
Facultatif | Normal | Hauteur de la ligne du texte du titre dans la barre de titre. |
df-messenger-titlebar-title-letter-spacing |
Facultatif | Normal | Espacement des lettres du texte du titre dans la barre de titre. |
df-messenger-titlebar-subtitle-font-color |
Facultatif | blanc | Couleur du texte du sous-titre dans la barre de titre. |
df-messenger-titlebar-subtitle-font-size |
Facultatif | 18 px | Taille du texte du sous-titre dans la barre de titre. |
df-messenger-titlebar-subtitle-font-family |
Facultatif | "Google Sans", "Helvetica Neue", sans-serif | Famille de polices du texte du sous-titre dans la barre de titre. |
df-messenger-titlebar-subtitle-font-weight |
Facultatif | 400 | Épaisseur de la police du texte du sous-titre dans la barre de titre. |
df-messenger-titlebar-subtitle-line-height |
Facultatif | Normal | Hauteur de la ligne du texte du sous-titre dans la barre de titre. |
df-messenger-titlebar-subtitle-letter-spacing |
Facultatif | Normal | Espacement des lettres du texte du sous-titre dans la barre de titre. |
df-messenger-titlebar-title-order |
Facultatif | ligne | Éléments de commande dans la barre de titre. Les valeurs autorisées sont row ou row-reverse. Cette valeur n'est effective que si l'attribut chat-title-icon a été spécifié. |
df-messenger-titlebar-icon-width |
Facultatif | 18 px | Largeur de l'icône dans la barre de titre. Cette valeur n'est appliquée que si chat-title-icon a été spécifié. |
df-messenger-titlebar-icon-height |
Facultatif | 18 px | Hauteur de l'icône dans la barre de titre. Cette valeur n'est appliquée que si chat-title-icon a été spécifié. |
df-messenger-titlebar-icon-padding |
Facultatif | 0 12px 0 0 | Marge intérieure autour de l'icône dans la barre de titre. Cette valeur n'est appliquée que si chat-title-icon a été spécifié. |
Style de la fenêtre de chat
Pour la fenêtre de chat, vous pouvez fournir les variables CSS suivantes :
| Propriétés | Règle d'entrée | Valeur par défaut | Description |
|---|---|---|---|
df-messenger-chat-background |
Facultatif | #fafafa | Arrière-plan de la boîte de dialogue de l'agent où les messages sont affichés. |
df-messenger-chat-padding |
Facultatif | 10 px | Marge intérieure de la boîte de dialogue de l'agent où les messages sont affichés. |
df-messenger-messagelist-border |
Facultatif | aucun | Bordure de la liste des messages. |
df-messenger-message-border |
Facultatif | aucun | Bordure des messages de la boîte de dialogue de l'agent. |
df-messenger-message-font-size |
Facultatif | 14 px | Taille du texte des messages de la boîte de dialogue de l'agent. |
df-messenger-message-font-family |
Facultatif | "Google Sans", "Helvetica Neue", sans-serif | Famille de polices des messages de la boîte de dialogue de l'agent. |
df-messenger-message-font-weight |
Facultatif | Normal | Épaisseur de la police des messages de la boîte de dialogue avec l'agent. |
df-messenger-message-bot-background |
Facultatif | #ecf3fe | Arrière-plan des messages envoyés par l'agent. |
df-messenger-message-bot-border |
Facultatif | aucun | Bordure des messages envoyés par l'agent. |
df-messenger-message-bot-font-color |
Facultatif | #1f1f1f | Couleur du texte des messages envoyés par l'agent. |
df-messenger-message-bot-font-weight |
Facultatif | Normal | Épaisseur de la police des messages envoyés par l'agent. |
df-messenger-message-user-background |
Facultatif | #e1e3e1 | Arrière-plan des messages envoyés par l'utilisateur. |
df-messenger-message-user-border |
Facultatif | aucun | Bordure des messages envoyés par l'utilisateur. |
df-messenger-message-user-font-color |
Facultatif | #1f1f1f | Couleur du texte des messages envoyés par l'utilisateur. |
df-messenger-message-user-font-weight |
Facultatif | Normal | Épaisseur de la police des messages envoyés par l'utilisateur. |
df-messenger-message-spacing |
Facultatif | 10 px | Espace entre deux messages. |
df-messenger-message-border-radius |
Facultatif | 8 px | Rayon de la bordure des messages, s'applique à tous les angles. |
df-messenger-message-bot-border-top-left-radius |
Facultatif | 8 px | Rayon de la bordure supérieure gauche pour les messages de l'agent, remplace le rayon générique. S'applique uniquement au premier message d'une pile. |
df-messenger-message-bot-border-top-right-radius |
Facultatif | 8 px | Rayon de la bordure supérieure droite pour les messages de l'agent, remplace le rayon générique. S'applique uniquement au premier message d'une pile. |
df-messenger-message-bot-border-bottom-left-radius |
Facultatif | 8 px | Rayon de la bordure inférieure gauche pour les messages de l'agent, remplace le rayon générique. S'applique uniquement au dernier message d'une pile. |
df-messenger-message-bot-border-bottom-right-radius |
Facultatif | 8 px | Rayon de la bordure en bas à droite pour les messages de l'agent, remplace le rayon générique. S'applique uniquement au dernier message d'une pile. |
df-messenger-message-user-border-top-left-radius |
Facultatif | 8 px | Rayon de la bordure en haut à gauche pour les messages utilisateur, remplace le rayon générique. S'applique uniquement au premier message d'une pile. |
df-messenger-message-user-border-top-right-radius |
Facultatif | 8 px | Rayon de la bordure en haut à droite pour les messages utilisateur, remplace le rayon générique. S'applique uniquement au premier message d'une pile. |
df-messenger-message-user-border-bottom-left-radius |
Facultatif | 8 px | Rayon de la bordure en bas à gauche pour les messages utilisateur, remplace le rayon générique. S'applique uniquement au dernier message d'une pile. |
df-messenger-message-user-border-bottom-right-radius |
Facultatif | 8 px | Rayon de la bordure en bas à droite pour les messages utilisateur, remplace le rayon générique. Actif uniquement si user-actor-image est défini. S'applique uniquement au dernier message d'une pile. |
df-messenger-message-stack-spacing |
Facultatif | 10 px | Espace entre deux messages consécutifs. |
df-messenger-message-bot-stack-border-top-left-radius |
Facultatif | 8 px | Rayon de la bordure supérieure gauche pour les messages d'agent consécutifs, remplace le rayon supérieur gauche de l'agent. Actif uniquement si bot-actor-image est défini. S'applique uniquement au premier message d'une pile. |
df-messenger-message-bot-stack-border-top-right-radius |
Facultatif | 8 px | Rayon de la bordure supérieure droite pour les messages consécutifs de l'agent, remplace le rayon supérieur droit de l'agent. Actif uniquement si bot-actor-image est défini. S'applique uniquement au premier message d'une pile. |
df-messenger-message-bot-stack-border-bottom-left-radius |
Facultatif | 8 px | Rayon de la bordure en bas à gauche pour les messages consécutifs de l'agent, remplace le rayon en bas à gauche de l'agent. Actif uniquement si bot-actor-image est défini. S'applique uniquement au dernier message d'une pile. |
df-messenger-message-bot-stack-border-bottom-right-radius |
Facultatif | 8 px | Rayon de la bordure inférieure droite pour les messages d'agent consécutifs, remplace le rayon inférieur droit de l'agent. Actif uniquement si bot-actor-image est défini. S'applique uniquement au dernier message d'une pile. |
df-messenger-message-user-stack-border-top-left-radius |
Facultatif | 8 px | Rayon de la bordure en haut à gauche pour les messages consécutifs de l'utilisateur, remplace le rayon en haut à gauche de l'utilisateur. Actif uniquement si user-actor-image est défini. |
df-messenger-message-user-stack-border-top-right-radius |
Facultatif | 8 px | Rayon de la bordure en haut à droite pour les messages consécutifs de l'utilisateur, remplace le rayon en haut à droite de l'utilisateur. Actif uniquement si user-actor-image est défini. S'applique uniquement au premier message d'une pile. |
df-messenger-message-user-stack-border-bottom-left-radius |
Facultatif | 8 px | Rayon de la bordure en bas à gauche pour les messages utilisateur consécutifs. Remplace le rayon en bas à gauche de l'utilisateur. Actif uniquement si user-actor-image est défini. S'applique uniquement au dernier message d'une pile. |
df-messenger-message-user-stack-border-bottom-right-radius |
Facultatif | 8 px | Rayon de la bordure en bas à droite pour les messages consécutifs de l'utilisateur, remplace le rayon de l'utilisateur en bas à droite. Actif uniquement si user-actor-image est défini. S'applique uniquement au dernier message d'une pile. |
df-messenger-message-user-writing-image-width |
Facultatif | 24 px | Largeur de l'image affichée pendant que l'agent écrit, active uniquement si bot-writing-image est défini. |
df-messenger-message-bot-writing-image-height |
Facultatif | 24 px | Hauteur de l'image affichée pendant que l'agent écrit, active uniquement si bot-writing-image est défini. |
df-messenger-message-bot-writing-font-color |
Facultatif | #1f1f1f | Couleur du texte affiché pendant que l'agent écrit. |
df-messenger-message-bot-writing-font-weight |
Facultatif | Normal | Épaisseur de la police du texte affiché pendant que l'agent écrit. |
df-messenger-message-bot-writing-font-size |
Facultatif | 14 px | Taille du texte affiché pendant que l'agent écrit. |
df-messenger-message-bot-writing-border |
Facultatif | aucun | Bordure du message affiché pendant que l'agent écrit. |
df-messenger-message-bot-writing-background |
Facultatif | #ecf3fe | Arrière-plan du message affiché pendant que l'agent écrit. |
df-messenger-message-bot-writing-padding |
Facultatif | 12 px | Marge intérieure du message affiché pendant que l'agent écrit. |
df-messenger-message-bot-writing-spacing |
Facultatif | 10 px | Espace entre le message affiché pendant que l'agent écrit et le message précédent. |
df-messenger-message-bot-writing-border-radius |
Facultatif | 8 px | Rayon de la bordure du message affiché pendant que l'agent écrit. |
df-messenger-chat-scroll-button-align |
Facultatif | centre | Alignement du bouton "Aller en bas". Les valeurs autorisées incluent flex-start, center et flex-end. |
df-messenger-chat-scroll-button-container-padding |
Facultatif | 8 px | Marge intérieure du conteneur autour du bouton "Accéder au bas de la page". |
df-messenger-chat-scroll-button-text-display |
Facultatif | intégrée | Affichage du texte à côté de l'icône dans le bouton "Aller en bas". Utilisez none pour masquer le texte. |
df-messenger-chat-scroll-button-font-size |
Facultatif | 14 px | Taille du texte du bouton "Aller en bas". |
df-messenger-chat-scroll-button-font-color |
Facultatif | blanc | Couleur du texte du bouton "Aller en bas". |
df-messenger-chat-scroll-button-background |
Facultatif | #0b57d0 | Arrière-plan du bouton "Aller en bas". |
df-messenger-chat-scroll-button-border-radius |
Facultatif | 999px | Rayon de la bordure du bouton "Accéder au bas de la page". |
df-messenger-chat-messagelist-scroll-shadow-background |
Facultatif | radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), transparent) bottom |
Ombre affichée en bas de la liste des messages lorsque l'utilisateur n'a pas fait défiler la liste jusqu'en bas. Définissez la valeur sur none pour la désactiver. |
Style des images d'acteurs
Les images d'acteur s'affichent à côté des messages du bot ou de l'utilisateur. Vous pouvez fournir les variables CSS suivantes pour personnaliser l'apparence des images d'acteurs :
| Propriétés | Règle d'entrée | Valeur par défaut | Description |
|---|---|---|---|
df-messenger-message-actor-spacing |
Facultatif | 16 px | Distance entre l'image de l'acteur et les messages. |
df-messenger-message-bot-actor-order |
Facultatif | ligne | Ordre de l'image de l'acteur et des messages. Utilisez row pour placer l'image de l'acteur à gauche et les messages à droite, ou row-reverse pour placer l'image de l'acteur à droite et les messages à gauche. Cette option n'est utilisée que si l'attribut bot-actor-image est défini. |
df-messenger-message-user-actor-order |
Facultatif | row-reverse | Ordre de l'image de l'acteur et des messages. Utilisez row-reverse pour placer l'image de l'acteur à droite et les messages à gauche, ou row pour placer l'image de l'acteur à gauche et les messages à droite. Cette option n'est utilisée que si l'attribut user-actor-image est défini. |
df-messenger-message-actor-direction |
Facultatif | colonne | Doit être l'opposé de df-messenger-message-bot-actor-order et df-messenger-message-user-actor-order. Utilisez column lorsqu'ils sont basés sur row, ou row lorsqu'ils sont basés sur column. |
df-messenger-message-actor-align |
Facultatif | démarrage flexible | Alignement de l'acteur par rapport aux messages. Utilisez flex-start pour placer l'image de l'acteur en haut, center pour la centrer ou flex-end pour la placer en bas. Cette option n'est utilisée que si les attributs bot-actor-image ou user-actor-image sont définis. |
df-messenger-message-actor-border-radius |
Facultatif | 999px | Rayon de la bordure de l'image de l'acteur. |
df-messenger-message-actor-padding |
Facultatif | 8 px | Marge intérieure de l'image de l'acteur. |
df-messenger-message-actor-image-size |
Facultatif | 24 px | Taille de l'image de l'acteur. |
df-messenger-message-bot-actor-background |
Facultatif | blanc | Arrière-plan de l'image de l'acteur de l'agent. |
df-messenger-message-bot-actor-border |
Facultatif | aucun | Bordure de l'image de l'acteur de l'agent. |
df-messenger-message-bot-actor-offset |
Facultatif | 0 | Décalage pour déplacer l'image de l'acteur de l'agent. |
df-messenger-message-user-actor-background |
Facultatif | blanc | Arrière-plan de l'image de l'acteur de l'utilisateur. |
df-messenger-message-user-actor-border |
Facultatif | aucun | Bordure de l'image de l'acteur de l'utilisateur. |
df-messenger-message-user-actor-offset |
Facultatif | 0 | Décalage pour déplacer l'image de l'acteur de l'utilisateur. |
Style pour les entrées utilisateur
Vous pouvez fournir les variables CSS suivantes pour les entrées utilisateur :
| Propriétés | Règle d'entrée | Valeur par défaut | Description |
|---|---|---|---|
df-messenger-send-icon-color |
Facultatif | #0b57d0 | Couleur de l'icône d'envoi dans l'entrée utilisateur. |
df-messenger-send-icon-color-hover |
Facultatif | #0b57d0 | Couleur de l'icône d'envoi dans la saisie utilisateur lorsque l'utilisateur pointe dessus. |
df-messenger-send-icon-color-active |
Facultatif | #0b57d0 | Couleur de l'icône d'envoi dans l'entrée utilisateur lorsque du texte peut être envoyé. |
df-messenger-send-icon-offset-x |
Facultatif | 0 | Décalage horizontal de l'icône d'envoi dans l'entrée utilisateur. |
df-messenger-send-icon-offset-y |
Facultatif | -4px | Décalage vertical de l'icône d'envoi dans la saisie utilisateur. |
df-messenger-input-background |
Facultatif | blanc | Arrière-plan de l'entrée utilisateur. |
df-messenger-input-padding |
Facultatif | 8 px | Padding global entre le champ de saisie utilisateur (y compris le bouton d'envoi de message) et le conteneur. |
df-messenger-input-inner-padding |
Facultatif | 0px 48px 0px 0 | Marge intérieure entre le champ de saisie utilisateur (sans le bouton d'envoi de message) et le conteneur. |
df-messenger-input-border |
Facultatif | aucun | Bordure de l'entrée utilisateur. |
df-messenger-input-border-top |
Facultatif | 1px solid #e0e0e0 | Bordure supérieure de l'entrée utilisateur. |
df-messenger-input-border-bottom |
Facultatif | aucun | Bordure inférieure du champ de texte de l'entrée utilisateur. |
df-messenger-input-font-family |
Facultatif | "Google Sans", "Helvetica Neue", sans-serif | Famille de polices de l'entrée utilisateur. |
df-messenger-input-font-color |
Facultatif | #1f1f1f | Couleur du texte de l'entrée utilisateur. |
df-messenger-input-font-size |
Facultatif | 14 px | Taille du texte de l'entrée utilisateur. |
df-messenger-input-font-weight |
Facultatif | Normal | Épaisseur de la police de l'entrée utilisateur. |
df-messenger-input-box-border |
Facultatif | aucun | Bordure de la zone de saisie utilisateur. |
df-messenger-input-box-focus-border |
Facultatif | aucun | Bordure de la zone de saisie de l'utilisateur lorsqu'elle est sélectionnée. |
df-messenger-input-box-border-radius |
Facultatif | 0 | Rayon de la bordure de la zone de saisie utilisateur. |
df-messenger-input-box-padding |
Facultatif | 12px 0 | Marge intérieure de la zone de saisie utilisateur. |
df-messenger-input-box-focus-padding |
Facultatif | 12px 0 | Marge intérieure de la zone de saisie de l'utilisateur lorsqu'elle est sélectionnée. |
df-messenger-input-gutter |
Facultatif | stable | Gouttière de la barre de défilement de l'entrée utilisateur. |
df-messenger-input-info-font-size |
Facultatif | 14 px | Taille du texte des messages d'information dans l'entrée utilisateur. |
df-messenger-input-info-font-weight |
Facultatif | Normal | Épaisseur de police des messages d'information dans la saisie utilisateur. |
df-messenger-input-info-padding |
Facultatif | 14px 16px | Marge intérieure des messages d'information dans la saisie utilisateur. |
df-messenger-input-info-line-height |
Facultatif | 20 px | Hauteur de ligne des messages d'information dans la saisie utilisateur. |
df-messenger-input-long-text-warning-display |
Facultatif | aucun | Si la valeur est définie sur block, un message d'avertissement s'affiche une fois que l'entrée dépasse 256 caractères. Actif uniquement si l'attribut max-query-length est plus élevé (par exemple, désactivé). Documentation supplémentaire. |
df-messenger-input-warning-background |
Facultatif | #fef7e0 | Arrière-plan du message d'avertissement dans l'entrée utilisateur. |
df-messenger-input-warning-color |
Facultatif | #410e0b | Couleur du texte du message d'avertissement dans l'entrée utilisateur. |
df-messenger-input-warning-icon-color |
Facultatif | #e37400 | Couleur de l'icône dans le message d'avertissement de l'entrée utilisateur. |
df-messenger-input-error-background |
Facultatif | #f9dedc | Arrière-plan du message d'erreur dans la saisie utilisateur. |
df-messenger-input-error-color |
Facultatif | #410e0b | Couleur du texte du message d'erreur dans la saisie de l'utilisateur. |
df-messenger-input-error-icon-color |
Facultatif | #b3261e | Couleur de l'icône dans le message d'avertissement de l'entrée utilisateur. |
Style de la superposition d'authentification
Lorsque vous utilisez une configuration authentifiée, vous pouvez fournir les variables CSS suivantes pour la superposition :
| Propriétés | Règle d'entrée | Valeur par défaut | Description |
|---|---|---|---|
df-messenger-auth-background |
Facultatif | rgba(204, 204, 204, .8) |
Arrière-plan de la boîte de dialogue de l'agent lorsque l'authentification est affichée. |
df-messenger-auth-button-background |
Facultatif | #0b57d0 | Arrière-plan du bouton d'authentification. |
df-messenger-auth-button-font-family |
Facultatif | "Google Sans", "Helvetica Neue", sans-serif | Famille de polices du bouton d'authentification. |
df-messenger-auth-button-font-color |
Facultatif | blanc | Couleur du texte du bouton d'authentification. |
df-messenger-auth-button-font-size |
Facultatif | 14 px | Taille du texte du bouton d'authentification. |
df-messenger-auth-button-border |
Facultatif | aucun | Bordure du bouton d'authentification. |
df-messenger-auth-button-border-radius |
Facultatif | 8 px | Rayon de la bordure du bouton d'authentification. |
Style des commentaires
Lorsque la fonctionnalité de commentaires sur les réponses est activée, vous pouvez fournir les variables CSS suivantes pour les commandes de commentaires.
| Propriétés | Règle d'entrée | Valeur par défaut | Description |
|---|---|---|---|
df-messenger-message-feedback-icon-distance |
Facultatif | 8 px | Distance entre les boutons J'aime et Je n'aime pas. |
df-messenger-message-feedback-icon-font-color |
Facultatif | #444746 | Couleur des boutons J'aime et Je n'aime pas. |
df-messenger-message-feedback-icon-font-color-active |
Facultatif | #444746 | Couleur des boutons J'aime et Je n'aime pas lorsqu'ils sont actifs. |
df-messenger-message-feedback-icon-border |
Facultatif | aucun | Bordure des boutons J'aime et Je n'aime pas. |
df-messenger-message-feedback-icon-border-radius |
Facultatif | 0 | Rayon de la bordure des boutons J'aime et Je n'aime pas. |
df-messenger-message-feedback-icon-background |
Facultatif | aucun | Arrière-plan des boutons J'aime et Je n'aime pas. |
df-messenger-message-feedback-icon-background-hover |
Facultatif | aucun | Arrière-plan des boutons J'aime et Je n'aime pas lorsque l'utilisateur pointe dessus. |
df-messenger-message-feedback-icon-padding |
Facultatif | 0 | Marge intérieure des boutons J'aime et Je n'aime pas. |
df-messenger-message-rich-feedback-spacing |
Facultatif | 10 px | Espacement des éléments dans les commentaires enrichis. |
df-messenger-message-rich-feedback-padding |
Facultatif | 0 | Marge intérieure des commentaires enrichis. |
df-messenger-message-rich-feedback-background |
Facultatif | aucun | Contexte des commentaires détaillés. |
df-messenger-message-rich-feedback-border-radius |
Facultatif | 0 | Rayon de courbure (angle de bordure) des commentaires enrichis. |
df-messenger-message-rich-feedback-border |
Facultatif | aucun | Bordure des commentaires enrichis. |
df-messenger-rich-feedback-offset-left |
Facultatif | 0 | Décalage du feedback enrichi sur le côté gauche. |