Thèmes pour les tableaux de bord, les Looks et les explorations intégrés

Vous pouvez définir des thèmes sur la page Thèmes de la section Plate-forme du panneau Admin. Vous pouvez utiliser des thèmes personnalisés pour personnaliser la famille de polices, la couleur du texte, la couleur d'arrière-plan, la couleur des boutons, la couleur des vignettes et d'autres éléments visuels pour les tableaux de bord, les présentations et les explorations intégrés, ainsi que la fenêtre de modification des vignettes dans un tableau de bord intégré et les interfaces d'analyse conversationnelle.

Cette page décrit les éléments suivants :

Pour savoir comment définir un thème par défaut pour vos tableaux de bord et vos explorations, ou comment appliquer un thème à un tableau de bord ou une exploration spécifique, consultez la page de documentation Premiers pas avec l'intégration : appliquer des thèmes personnalisés.

Exigences d'instance pour utiliser des thèmes intégrés

Notez les exigences suivantes pour gérer les thèmes intégrés sur une instance Looker :

  • Si votre instance est une instance Looker (version d'origine), la fonctionnalité qui vous permet de personnaliser les thèmes des tableaux de bord, des Looks et des explorations intégrés doit être activée par Looker. Contactez un spécialiste des ventes Google Cloud pour mettre à jour votre licence pour cette fonctionnalité.
  • Si votre instance est une instance Looker (Google Cloud Core), les thèmes intégrés sont disponibles pour les éditions Enterprise et Embed, mais pas pour l'édition Standard.
  • L'utilisateur Looker doit disposer du rôle d'administrateur ou d'un rôle contenant l'autorisation manage_themes.

À propos de la page Thèmes

Vous pouvez gérer les thèmes de votre instance sur la page Thèmes de la section Plate-forme du panneau d'administration Admin.

Si la fonctionnalité en preview Thèmes des tableaux de bord internes est activée sur votre instance, la page Thèmes affiche les onglets Internes et Intégrés pour gérer les thèmes des tableaux de bord Looker et du contenu intégré, respectivement.

Thème par défaut

Le thème par défaut de Looker est créé automatiquement sur votre instance et ne peut pas être supprimé ni modifié. Le thème Looker est utilisé par défaut, sauf si un administrateur Looker définit un autre thème par défaut.

Les paramètres du thème Looker, que vous pouvez voir en sélectionnant le bouton Afficher à côté du thème ou en créant une copie du thème, sont regroupés dans les sections suivantes :

Thème

Nom de paramètre Valeur
Nom Looker

Général

Les paramètres de cette section s'appliquent aux tableaux de bord intégrés, aux explorations intégrées et aux interfaces Conversational Analytics.

Nom de paramètre Valeur Remarques
Couleur principale #1A73E8 Les tableaux de bord utilisent cette couleur pour les boutons principaux et les commandes de filtrage.

Les explorations utilisent cette couleur pour les boutons principaux, les bannières et les mises en exergue.
Couleur du texte #3e3f40
Couleur de l'arrière-plan #f6f8fa
Famille de polices Roboto, Noto Sans JP, Noto Sans CJK KR, Noto Sans Arabic UI, Noto Sans Devanagari UI, Noto Sans Hebrew, Noto Sans Thai UI, Helvetica, Arial, sans-serif Ces polices sont fournies par l'application Looker et sont recommandées car elles seront disponibles à la fois dans les navigateurs et lors du rendu des images. Looker utilise la première police de la liste de familles de polices qui prend en charge un caractère. Les polices spécialisées ou de priorité plus élevée doivent donc être listées en premier. Looker utilise les variantes "UI" des polices lorsqu'elles sont disponibles, de sorte que les caractères sont légèrement modifiés pour mieux s'adapter aux limites des composants visuels.
Source de la police Aucun

Page du tableau de bord

Nom de paramètre Valeur
Collection de couleurs Aucun
Taille de police des titres None
Marge supérieure None
Marge inférieure None
Marges latérales None

Vignettes du tableau de bord

Nom de paramètre Valeur
Couleur des titres #3a4245
Couleur du texte #3a4245
Couleur du corps de texte Aucun
Couleur de l'arrière-plan #ffffff
Couleur d'arrière-plan du texte None
Alignement du titre Centre
Taille de police des titres Aucun
Ombre de la case Aucun
Taille de l'écart entre deux colonnes Aucun
Taille de l'écart entre deux lignes Aucun
Bordure arrondie Aucun

Commandes du tableau de bord

Nom de paramètre Valeur
Afficher l'en-tête du tableau de bord Oui
Afficher le titre du tableau de bord Oui
Centrer le titre du tableau de bord Non
Afficher la barre de filtres Oui
Activer/Désactiver les filtres d'affichage Oui

Page "Découvrir"

Nom de paramètre Valeur
Afficher l'en-tête Oui
Afficher le titre Oui
Afficher la dernière exécution Oui
Afficher le fuseau horaire Oui
Afficher le bouton d'exécution Oui
Afficher le bouton "Paramètres" Oui
Afficher l'indicateur de dernière mise à jour du tableau de bord Oui
Afficher l'icône d'actualisation des données Oui
Afficher le bouton "Plus d'options" Oui

Page "Look"

Nom de paramètre Valeur
Afficher l'en-tête Oui
Afficher le titre Oui
Afficher la dernière exécution Oui
Afficher le fuseau horaire Oui
Afficher le bouton d'exécution Oui
Afficher le bouton "Paramètres" Oui

Voici des exemples de tableau de bord, de fenêtre de modification d'une vignette de tableau de bord et d'exploration avec le thème Looker.

Exemple de tableau de bord avec le thème Looker

Tableau de bord Looker intégré utilisant le thème Looker par défaut.

Exemple de fenêtre de modification d'une vignette de tableau de bord avec le thème Looker

Boîte de dialogue "Modifier la vignette" dans un tableau de bord Looker intégré utilisant le thème Looker par défaut.

Exemple de page "Explorer" avec le thème Looker

Exploration Looker intégrée utilisant le thème Looker par défaut.

Application des thèmes et des paramètres d'intégration

Vous pouvez modifier l'apparence d'un tableau de bord ou d'une exploration intégrés par rapport au thème par défaut en utilisant des thèmes personnalisés et des arguments d'URL. Lors de l'affichage d'un tableau de bord ou d'une exploration intégrés, Looker applique les paramètres dans l'ordre suivant :

  1. Commence avec les paramètres du thème par défaut
  2. Applique les paramètres du thème personnalisé spécifié dans l'argument theme de l'URL, le cas échéant.
  3. Applique les propriétés spécifiées dans l'argument d'URL _theme, le cas échéant (pour les tableaux de bord uniquement).

Chaque élément remplace les éléments précédents, ce qui signifie que les paramètres d'intégration remplacent les paramètres du thème par défaut, et que les thèmes personnalisés remplacent les paramètres d'intégration et les thèmes par défaut.

Toutefois, dans le cas de l'argument d'URL _theme, seuls les éléments spécifiés dans l'argument _theme remplacent les éléments des autres thèmes ou des paramètres d'intégration. Les autres paramètres du thème personnalisé et des intégrations seront toujours utilisés. Par exemple, si vous ajoutez l'argument _theme={"show_filters_bar":false} dans l'URL d'un tableau de bord intégré, la barre de filtres ne s'affichera pas, même si vous avez activé l'option Afficher les filtres dans les paramètres d'intégration ou dans un thème personnalisé. Toutefois, les autres paramètres du thème personnalisé ou des paramètres d'intégration seront toujours utilisés.

Les téléchargements de tableaux de bord afficheront tout thème personnalisé appliqué.

Créer un thème personnalisé

Pour créer un thème personnalisé pour les tableaux de bord, les présentations et les explorations intégrés, sur la page d'administration Thèmes, sélectionnez l'onglet Intégrer, puis cliquez sur Ajouter un thème.

Ensuite, sur la page Nouveaux thèmes, ajoutez des spécifications de style et de couleur pour chacun des paramètres que vous souhaitez personnaliser.

À l'exception du titre du thème, qui doit être unique, tous les champs sont automatiquement renseignés avec les valeurs du thème par défaut. Vous pouvez modifier n'importe quel paramètre, comme décrit dans les sections suivantes. Sélectionnez Enregistrer le thème pour conserver vos modifications et enregistrer votre nouveau thème.

Thème

Nom : le nom du thème doit être unique et ne peut contenir que des caractères alphanumériques et des traits de soulignement. Si vous saisissez des espaces dans le nom du thème, ils seront remplacés par des traits de soulignement lorsque vous enregistrerez le thème.

Général

Les paramètres de cette section s'appliquent à la fois aux tableaux de bord et aux explorations intégrés.

Couleur principale : les tableaux de bord utilisent cette couleur pour les boutons principaux et les commandes de filtrage. Les explorations utilisent cette couleur pour les liens et les icônes du sélecteur de champs, les boutons principaux, les bannières et les mises en exergue.

Couleur du texte : code hexadécimal de la couleur du texte dans les explorations et les tableaux de bord.

Couleur d'arrière-plan : code couleur hexadécimal de l'arrière-plan des pages d'exploration et de tableau de bord.

Famille de polices : nom de la famille de polices. Cette police sera utilisée pour tout le texte du tableau de bord, y compris les titres des tuiles, les tuiles de texte et les légendes des visualisations. Cette police sera également utilisée pour tout le texte d'une exploration. Si le nom de la police contient un espace, placez-le entre guillemets, par exemple "Open Sans".

  • Si vous utilisez une police Web courante, il vous suffit de saisir son nom dans le champ Famille de polices et de laisser le champ Source de la police vide. Si vous souhaitez utiliser une police moins courante, saisissez son nom dans le champ Famille de polices, puis utilisez le champ Source de la police, décrit ci-après, pour fournir une URL vers la définition de la police que vous souhaitez utiliser.

Source de la police : laissez ce champ vide, sauf si vous souhaitez utiliser une police personnalisée (une police qui n'est pas une police Web sécurisée courante). La source de la police doit être une URL complète commençant par https et pointant vers la valeur url spécifiée dans l'argument src de @font-face. Nous vous recommandons d'utiliser un fichier au format Web Open Font (.woff), car les fichiers .woff2 ne sont pas compatibles avec Internet Explorer 11.

  • Par exemple, pour PT Sans Narrow, vous pouvez saisir "PT Sans Narrow" dans le champ Famille de polices, puis https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff dans le champ Source de la police.

Exemple d'exploration intégrée avec un thème personnalisé

L'exemple suivant montre une exploration intégrée avec un thème personnalisé. La couleur principale est définie sur #e82042 et la famille de polices sur Verdana.

Lorsque vous exécutez une exploration dans un paramètre intégré, le texte de l'exploration s'affiche dans la police spécifiée pour Famille de polices, à savoir Verdana. Les couleurs d'accentuation, les boutons et les liens s'affichent dans la couleur clé spécifiée, #e82042 :

Exploration intégrée avec la couleur #e82042 appliquée au bouton "Ajouter", au bouton "Accéder à LookML", au bouton du menu en forme de roue dentée et aux titres des analyses de démarrage rapide.

Une fois l'exploration exécutée, le contour et le texte du bouton Exécuter s'affichent dans la couleur principale spécifiée, #e82042 :

Exploration intégrée avec la couleur #e82042 appliquée au bouton "Exécuter".

Exemple de fenêtre de modification de tuile de tableau de bord intégré avec un thème personnalisé

En plus des éléments d'exploration décrits dans la section précédente, lorsque vous modifiez une vignette de tableau de bord, la bannière s'affiche dans la nuance spécifiée dans le paramètre Couleur principale (#e82042) et la police spécifiée dans le paramètre Famille de polices (Verdana) :

Boîte de dialogue "Modifier la vignette" dans un tableau de bord Looker intégré, avec la couleur #e82042 appliquée à la bannière et la famille de polices Verdana appliquée à tout le texte de la page.

Page du tableau de bord

Collection de couleurs : vous pouvez éventuellement choisir une collection de couleurs, c'est-à-dire un ensemble de palettes coordonnées qui fonctionnent bien ensemble. Lorsque vous attribuez une collection de couleurs à un tableau de bord, toutes les séries de données de toutes les vignettes du tableau de bord sont colorées en fonction des palettes de la collection, ce qui garantit que les couleurs des séries de données sont coordonnées sur l'ensemble du tableau de bord.

  • Lorsque vous attribuez une collection de couleurs à un thème intégré, la collection de couleurs du thème remplace toute collection de couleurs précédemment attribuée à une vignette. Toutefois, la collection de couleurs d'un thème ne remplace pas les couleurs personnalisées attribuées à une série de données, ni la mise en forme conditionnelle appliquée à une visualisation de tableau.

Couleur d'arrière-plan : code couleur hexadécimal pour l'arrière-plan du tableau de bord et l'arrière-plan des vignettes de texte.

Marge supérieure : vous pouvez définir une valeur spécifique pour la marge en haut d'un tableau de bord. Choisissez parmi les options prédéfinies dans un menu déroulant. Les marges sont mesurées en pixels (px).

Marge inférieure : vous pouvez définir une valeur spécifique pour la marge en bas d'un tableau de bord. Choisissez parmi les options prédéfinies dans un menu déroulant. Les marges sont mesurées en pixels (px).

Marges latérales : vous pouvez définir une valeur spécifique pour la marge sur les côtés d'un tableau de bord. Choisissez parmi les options prédéfinies dans un menu déroulant. Les marges sont mesurées en pixels (px).

Vignettes de tableau de bord

Couleur du titre : code hexadécimal de la couleur des éléments suivants :

Couleur du texte : code hexadécimal de la couleur des éléments suivants :

Couleur du corps du texte : code hexadécimal de la couleur des éléments suivants :

  • Corps du texte, à l'exception du texte des en-têtes de niveau 2 et 3, dans les vignettes Markdown.
  • Corps du texte dans les vignettes de texte

Couleur d'arrière-plan : code couleur hexadécimal de l'arrière-plan de toutes les vignettes, à l'exception des vignettes de texte. (Les tuiles de texte utilisent la même couleur d'arrière-plan que le tableau de bord, qui est définie à l'aide de l'option Couleur d'arrière-plan dans la section Page du tableau de bord.)

Alignement du titre : définissez l'alignement des titres des tuiles sur la gauche, la droite ou le centre.

Taille de police du titre : vous pouvez ajuster la taille de police des tuiles du tableau de bord en choisissant parmi un ensemble de tailles prédéfinies en pixels.

Ombre de la boîte : créez une ombre autour des tuiles du tableau de bord à l'aide de la syntaxe CSS. Vous pouvez sélectionner une ombre de boîte prédéfinie ou en créer une personnalisée. Pour créer une ombre de boîte personnalisée, saisissez le horizontal-offset vertical-offset blur-radius spread-radius color de votre choix, puis sélectionnez Saisir un style personnalisé pour appliquer vos paramètres. Un aperçu des paramètres d'ombre de la zone s'affiche à droite.

Taille de l'écart entre deux colonnes : vous pouvez ajuster la taille de l'espace entre les colonnes de tuiles du tableau de bord à partir d'un ensemble de tailles prédéfinies en pixels.

Taille de l'écart entre deux lignes : vous pouvez ajuster la taille de l'espace entre les lignes de tuiles du tableau de bord à partir d'un ensemble de tailles prédéfinies en pixels.

Bordure arrondie : vous pouvez ajuster la bordure arrondie des tuiles du tableau de bord pour créer des angles droits ou arrondis.

Commandes du tableau de bord

Afficher l'en-tête du tableau de bord : désactivez cette option pour masquer l'intégralité de l'en-tête du tableau de bord, y compris tous les filtres et commandes du tableau de bord. Lorsque cette option est désactivée, toutes les autres options de contrôle du tableau de bord sont désélectionnées et désactivées.

Afficher le titre du tableau de bord : cochez la case pour afficher le titre du tableau de bord.

Centrer le titre du tableau de bord : cochez cette case pour centrer le titre du tableau de bord. Lorsque cette option n'est pas activée, le titre du tableau de bord est aligné à gauche. Cette option n'est disponible que si l'option Afficher le titre du tableau de bord a été activée.

Afficher la barre de filtres : cochez la case pour afficher la barre de filtres en haut du tableau de bord. Lorsque cette option n'est pas sélectionnée, l'option Afficher le bouton d'activation des filtres est désélectionnée et désactivée, ce qui masque l'icône des filtres du tableau de bord.

Bouton d'activation/de désactivation des filtres d'affichage : cochez la case pour afficher l'icône des filtres du tableau de bord.

Afficher l'indicateur de dernière mise à jour du tableau de bord : cochez la case pour afficher l'indicateur de dernière mise à jour du tableau de bord.

Afficher l'icône d'actualisation des données : cochez la case pour afficher l'icône d'actualisation des données du tableau de bord.

Afficher le bouton "Autres options" : cochez la case pour afficher le menu à trois points du tableau de bord. Lorsque cette option est désactivée, les options du menu du tableau de bord ne sont pas disponibles.

Page "Découvrir"

Dans un thème personnalisé, vous pouvez ajuster les éléments suivants sur les pages d'exploration intégrées :

Afficher l'en-tête : désactivez cette option pour masquer l'intégralité de l'en-tête d'une exploration intégrée, y compris le titre, l'indicateur de dernière exécution, le fuseau horaire des données, le bouton Exécuter et le menu en forme de roue dentée Actions d'exploration.

Afficher le titre : désactivez cette option pour masquer le titre d'une exploration intégrée.

Afficher la dernière exécution : désactivez cette option pour masquer le temps écoulé depuis la dernière exécution de l'exploration.

Fuseau horaire d'affichage : désactivez cette option pour masquer le fuseau horaire des données dans une exploration intégrée.

Afficher le bouton d'exécution : désactivez cette option pour masquer le bouton Exécuter dans une exploration intégrée.

Bouton "Afficher les actions" : désactivez cette option pour masquer le menu en forme de roue dentée "Actions sur les explorations" dans une exploration intégrée.

Page "Look"

Dans un thème personnalisé, vous pouvez ajuster les éléments suivants sur les Looks intégrés :

Afficher l'en-tête : désactivez cette option pour masquer l'intégralité de l'en-tête d'un Look intégré, y compris le titre, l'indicateur de dernière exécution, le fuseau horaire des données, le bouton Exécuter et le menu en forme de roue dentée Actions d'exploration.

Afficher le titre : désactivez cette option pour masquer le titre d'un Look intégré.

Afficher la dernière exécution : désactivez cette option pour masquer le temps écoulé depuis la dernière exécution du Look.

Afficher le fuseau horaire : désactivez cette option pour masquer le fuseau horaire des données d'un Look intégré.

Afficher le bouton d'exécution : désactivez cette option pour masquer le bouton d'exécution sur un Look intégré. Lorsque l'option Afficher les filtres sur les Looks intégrés est désactivée, cette option n'affiche pas le bouton Exécuter.

Bouton d'action Afficher : désactivez cette option pour masquer le menu en forme de roue dentée Actions sur les explorations dans un Look intégré.

Copier un thème

Vous pouvez copier un thème existant en sélectionnant le menu du thème, puis Copier le thème.

Lorsque vous copiez un thème, le nom du nouveau thème est par défaut celui du thème copié, suivi de "(copie)". Veillez à remplacer manuellement ce nom par un nouveau nom unique ne contenant que des caractères alphanumériques et des traits de soulignement, et à supprimer les parenthèses.

Vous pouvez modifier les autres paramètres comme vous le feriez pour créer un thème. Pour obtenir une description des paramètres, consultez les paramètres de thème décrits précédemment. N'oubliez pas de sélectionner Enregistrer pour conserver tous les paramètres de votre thème.

Modifier un thème

Le thème Looker est créé automatiquement sur votre instance et ne peut pas être modifié. (Si vous souhaitez modifier le thème Looker, vous pouvez créer une copie du thème, puis modifier la copie.)

Pour tous les autres thèmes, vous pouvez sélectionner le bouton Modifier associé pour modifier les paramètres du thème.

Vous pouvez modifier les paramètres comme vous le feriez pour créer un thème. Pour obtenir une description des paramètres, consultez les paramètres de thème décrits précédemment. N'oubliez pas de sélectionner Enregistrer pour conserver vos modifications.

Supprimer un thème

Vous pouvez supprimer n'importe quel thème, à l'exception du thème Looker ou du thème défini par défaut. Pour supprimer un thème, sélectionnez le menu du thème, puis Supprimer le thème.

Après avoir supprimé un thème, tout tableau de bord intégré dont ce thème est spécifié dans l'URL utilisera le thème par défaut.

Définir un thème par défaut pour les tableaux de bord et les explorations intégrés

Les thèmes personnalisés ne sont pas compatibles avec les Looks intégrés. Les thèmes personnalisés ne sont disponibles que pour les tableaux de bord et les explorations intégrés.

Pour spécifier le thème par défaut des tableaux de bord et des explorations intégrés sur votre instance, sélectionnez le menu d'un thème, puis Définir par défaut.

Le thème par défaut est utilisé pour les tableaux de bord et les explorations intégrés sur votre instance Looker, sauf si vous spécifiez des paramètres différents pour un tableau de bord ou une exploration individuels. Pour en savoir plus sur l'application des thèmes et des paramètres d'intégration à un tableau de bord ou une exploration intégrés, consultez la section Application des thèmes et des paramètres d'intégration sur cette page.

Appliquer un thème à des tableaux de bord et des explorations intégrés spécifiques

Les thèmes personnalisés ne sont pas compatibles avec les Looks intégrés. Les thèmes personnalisés ne sont disponibles que pour les tableaux de bord et les explorations intégrés.

Si vous souhaitez qu'un tableau de bord ou une exploration utilise un thème autre que celui par défaut, vous pouvez spécifier un autre thème dans l'URL du tableau de bord ou de l'exploration intégrés. Pour ce faire, ajoutez le paramètre theme= avec le nom du thème à la fin de l'URL d'intégration. Par exemple, si vous avez un thème appelé "Red", vous devez ajouter theme=Red à la fin de l'URL de votre tableau de bord intégré :

https://example.cloud.looker.com/embed/dashboards/246?theme=red

Pour les explorations, vous devez ajouter theme=Red à la fin de l'URL d'exploration intégrée : none https://example.cloud.looker.com/embed/explore/model_name/explore_name?theme=red

L'élément de thème dans l'URL n'est pas sensible à la casse. Vous pouvez donc utiliser theme=Red ou theme=red.

Utiliser l'argument d'URL _theme pour appliquer des éléments de thème de tableau de bord individuels

Vous pouvez utiliser l'argument d'URL _theme pour personnaliser des éléments de thème individuels pour votre tableau de bord intégré, tels que tile_background_color et show_title.

Voici le format de l'argument d'URL _theme :

_theme={"<property>":value}

Par exemple, vous pouvez utiliser _theme={"show_filters_bar":false} pour masquer la barre de filtres de votre tableau de bord intégré. L'URL complète peut se présenter comme suit :

https://example.cloud.looker.com/embed/dashboards/236?_theme={"show_filters_bar":false}

Utilisez une virgule pour spécifier plusieurs propriétés de thème :

_theme={"show_title":false,"show_filters_bar":false,"text_tile_text_color":"blue"}

Les valeurs de couleur doivent être placées entre guillemets et peuvent être exprimées par le nom de la couleur ou par le code couleur hexadécimal. Si vous utilisez un code hexadécimal, veillez à utiliser la version encodée en URL du signe #, qui est %23. Par exemple, ces deux arguments d'URL spécifient la couleur rouge :

_theme={"title_color":"red","text_tile_text_color":"%23FF0000"}

Voici quelques points à prendre en compte lorsque vous utilisez l'objet _theme pour un tableau de bord intégré :

  • Tout élément spécifié dans l'argument d'URL _theme remplace les paramètres de cet élément dans tout autre thème. L'argument _theme est donc un moyen pratique d'affiner les thèmes ou d'intégrer des paramètres. Par exemple, supposons que vous disposiez d'un thème personnalisé qui masque la barre de filtres, mais que vous ayez un tableau de bord où l'affichage de la barre de filtres serait pertinent. Vous pouvez utiliser le thème personnalisé pour votre tableau de bord, puis ajouter l'argument _theme={"show_filters_bar":true} dans l'URL du tableau de bord intégré pour afficher la barre de filtres sur ce tableau de bord, tout en conservant tous les autres paramètres du thème personnalisé. Pour en savoir plus sur l'application des thèmes et des paramètres d'intégration à un tableau de bord intégré, consultez la section Application des thèmes et des paramètres d'intégration sur cette page.
  • Pour les scripts de programmation, vous devez encoder l'argument _theme au format URL.
  • L'argument _theme n'est pas appliqué lors de la diffusion de tableaux de bord intégrés au format PDF.
  • L'argument _theme est appliqué si vous téléchargez le tableau de bord au format PDF.