Paramètres Admin – Thèmes

Vous pouvez utiliser des thèmes personnalisés pour personnaliser l'apparence de vos tableaux de bord, présentations et explorations Looker intégrés. Vous pouvez utiliser des thèmes pour personnaliser la famille de polices, la couleur du texte, la couleur de l'arrière-plan, la couleur du bouton, la couleur des tuiles et d'autres éléments visuels.

Par exemple, vous pouvez créer un pour modifier l'apparence de votre tableau de bord intégré.

Pour savoir comment définir un thème par défaut pour vos tableaux de bord et vos explorations, ou sur l'application d'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.

Vous pouvez définir des thèmes pour les tableaux de bord intégrés, les explorations intégrées et la fenêtre de modification des cartes d'un tableau de bord intégré sur la page Thèmes de la section Plate-forme du panneau Administration.

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

Thème par défaut

Le thème par défaut de Looker est créé automatiquement dans votre instance. Il ne peut pas être supprimé ni modifié. Le thème Looker est utilisé par défaut, sauf si un administrateur Looker spécifie un autre thème comme thème par défaut.

Les paramètres du thème Looker, que vous pouvez afficher 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 à la fois aux tableaux de bord et aux explorations intégrés.

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 UI arabe, Noto Sans Devanagari UI, Noto Sans Hebrew, Noto Sans Thaï UI, Helvetica, Arial, sans-serif Ces polices sont diffusées par l'application Looker. Nous vous recommandons de les utiliser, car elles seront disponibles à la fois dans les navigateurs et lors de l'affichage des images. Looker utilise la première police de la liste des familles de polices qui prend en charge un caractère. Par conséquent, les polices ayant la priorité la plus élevée ou celles spécialisées doivent être indiquées en premier. Looker utilise les variantes "UI" des polices lorsqu'elles sont disponibles afin que les caractères soient 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
Couleur de l'arrière-plan #f6f8fa

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
Alignement du titre Centre

Commandes du tableau de bord

Nom de paramètre Valeur
Afficher le titre du tableau de bord Oui
Afficher la barre de filtres 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

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

Vous trouverez ci-dessous des exemples de tableau de bord, de fenêtre de modification d'une vignette de tableau de bord et d'une 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 de 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 Exploration avec le thème Looker

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

Comment les thèmes et les paramètres d'intégration sont-ils appliqués ?

Vous pouvez modifier l'apparence d'un tableau de bord intégré ou d'une exploration à partir du thème par défaut à l'aide de thèmes personnalisés et d'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 par 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 de thème par défaut, tandis 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 ceux des autres thèmes ou des paramètres d'intégration. Les autres paramètres du thème personnalisé et d'intégration continueront d'être 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'affiche 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 tous les thèmes personnalisés appliqués.

Créer un thème personnalisé

Pour créer un thème personnalisé, sélectionnez Ajouter un thème :

Le bouton Ajouter un thème s'affiche en haut de la page Thèmes.

Ensuite, ajoutez des spécifications de style et de couleur pour chaque paramètre souhaité sur la page Nouveau thème.

À 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 les paramètres décrits dans les sections suivantes. Sélectionnez Enregistrer le thème pour conserver les modifications et enregistrer le 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, ceux-ci 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 incorporés et aux explorations intégrées.

Couleur clé: les tableaux de bord utilisent cette couleur pour les boutons primaires et les commandes de filtrage. Les explorations utilisent cette couleur pour les liens et les icônes du sélecteur de champ, les boutons principaux, les bannières et les accents.

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

Couleur de l'arrière-plan: code hexadécimal de la couleur de l'arrière-plan des pages d'exploration et du 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 cartes, les cartes de texte et les légendes des visualisations. Cette police sera également utilisée pour l'ensemble du texte d'une exploration. S'il y a un espace dans le nom de la police, utilisez des guillemets autour du nom, comme « Open Sans ».

  • Si vous utilisez une police Web courante, vous pouvez simplement saisir son nom dans le champ Famille de polices et laisser le champ Source de la police vide. Si vous souhaitez utiliser une police moins courante, saisissez son nom dans le champ Font Family (Famille de polices), puis utilisez le champ Font Source (Source de police), décrit ci-dessous, 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 (qui n'est pas une police courante adaptée au Web). 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 de police ouverte (.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 police.

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

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

Lorsque vous exécutez une exploration dans un paramètre intégré, le texte de l'exploration s'affiche dans la famille de polices spécifiée, Verdana. Les couleurs d'accentuation, les boutons et les liens apparaissent 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 une exploration exécutée, le contour et le texte du bouton Run (Exécuter) s'affichent dans la couleur de clé spécifiée, #e82042 :

Une exploration intégrée avec la couleur #e82042 appliquée au bouton Exécuter.

Exemple de fenêtre de modification d'une carte de tableau de bord intégrée avec un thème personnalisé

En plus des éléments Explorer 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 clé (#e82042) et dans 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 également choisir une collection de couleurs, qui est 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 la série de données les couleurs 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 tuile. 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 de couleur hexadécimal de l'arrière-plan du tableau de bord et de l'arrière-plan des cartes de texte.

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

Marge inférieure: vous pouvez éventuellement 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 éventuellement définir une valeur spécifique pour les marges latérales d'un tableau de bord. Choisissez l'une des 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 :

Text Color (Couleur du texte) : code couleur hexadécimal pour les éléments suivants:

  • Texte sur le tableau de bord, y compris les légendes dans les visualisations
  • Sous-titres et corps du texte, à l'exception du texte de niveau 1 des tuiles Markdown
  • En-tête de niveau 1, en-tête de niveau 2 et texte normal dans les vignettes de texte
  • Icônes de carte dans les visualisations à valeur unique

Text Body Color (Couleur du corps du texte) : code couleur hexadécimal des éléments suivants:

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

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

Alignement du titre: définissez l'alignement des titres des vignettes à gauche, à droite ou au centre.

Taille de police du titre : vous pouvez ajuster la taille de police des cartes du tableau de bord à partir d'un ensemble de tailles prédéfinies en pixels.

Ombre de boîte : créez une ombre autour des cartes du tableau de bord à l'aide de la syntaxe CSS. Vous pouvez sélectionner une ombre de zone prédéfinie ou en créer une personnalisée. Pour créer une ombre de zone personnalisée, saisissez l'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 portée s'affiche à droite.

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

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

Angle de bordure: vous pouvez ajuster l'arrondi de bordure des vignettes du tableau de bord afin de créer des angles carrés 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 l'ensemble des filtres et des commandes du tableau de bord. Lorsque cette option est désactivée, toutes les autres options 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 que le titre du tableau de bord soit centré sur celui-ci. 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 cette case pour afficher la barre de filtres en haut du tableau de bord. Lorsque cette option n'est pas sélectionnée, l'option Display Filters Activer/Désactiver est désélectionnée et désactivée, masquant l'icône des filtres du tableau de bord.

Afficher/Masquer les filtres: cochez cette 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 cette case pour afficher l'indicateur de dernière mise à jour du tableau de bord.

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

Afficher le menu du tableau de bord: cochez la case pour afficher le menu à trois points du tableau de bord. Lorsque cette option est désélectionnée, les options de 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 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 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 la durée d'exécution de l'exploration.

Afficher le fuseau horaire : 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 sur une exploration intégrée.

Afficher le bouton Actions: désactivez cette option pour masquer le menu représenté par une roue dentée des actions d'exploration sur 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'une vue 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 présentation intégrée.

Afficher la dernière exécution: désactivez cette option pour masquer la durée d'exécution de la présentation.

Afficher le fuseau horaire : désactivez cette option pour masquer le fuseau horaire des données dans une vue intégrée.

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

Afficher le bouton "Actions" : désactivez cette option pour masquer le menu d'options "Explorer les actions" dans une vue intégrée.

Copier un thème

Pour copier un thème existant, sélectionnez 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 nom unique composé uniquement de caractères alphanumériques et de traits de soulignement, et à supprimer les parenthèses.

Vous pouvez modifier les autres paramètres comme vous le feriez lorsque vous créez un thème. Pour obtenir une description des paramètres, reportez-vous aux paramètres du thème décrits précédemment. Veillez à 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 plutôt en créer une copie, puis la modifier.)

Pour tous les autres thèmes, vous pouvez sélectionner le bouton Modifier associé afin de mettre à jour les paramètres du thème.

Vous pouvez modifier les paramètres comme vous le feriez lorsque vous créez un thème. Pour obtenir une description des paramètres, reportez-vous aux paramètres du thème décrits précédemment. N'oubliez pas de sélectionner Enregistrer pour conserver les 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 et cliquez sur Supprimer le thème.

Lorsque vous supprimez un thème, tout tableau de bord intégré dont le thème est spécifié dans son URL utilise 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 sont disponibles uniquement pour les tableaux de bord intégrés et les explorations intégrées.

Pour spécifier le thème par défaut des tableaux de bord intégrés et des explorations de 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 de votre instance Looker, sauf si vous spécifiez des paramètres différents pour un tableau de bord ou une exploration spécifique. Consultez la section Application des thèmes et des paramètres d'intégration de cette page 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.

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 sont disponibles uniquement pour les tableaux de bord intégrés et les explorations intégrées.

Si vous souhaitez qu'un tableau de bord ou une exploration utilise un thème autre que le thème par défaut, vous pouvez spécifier un thème différent dans l'URL du tableau de bord intégré ou de l'exploration. 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 votre thème s'appelle "Rouge", vous devez ajouter theme=Red à la fin de l'URL de votre tableau de bord d'intégration:

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

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

L'élément de thème de 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 entre guillemets et peuvent être exprimées à l'aide du nom de la couleur ou du code 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 ayez un thème personnalisé qui masque la barre de filtres, mais que vous disposiez d'un tableau de bord dans lequel il serait judicieux d'afficher la barre de filtres. 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 dans ce tableau de bord, tout en conservant tous les autres paramètres du thème personnalisé. Consultez la section Application des thèmes et des paramètres d'incorporation sur cette page pour en savoir plus sur l'application des thèmes et des paramètres d'intégration à un tableau de bord intégré.
  • Pour les scripts de programmation, vous devez encoder l'argument _theme sous forme d'URL.
  • L'argument _theme n'est pas appliqué lors de l'envoi 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.