Paramètres administrateur – Thèmes

Vous pouvez utiliser des thèmes personnalisés pour personnaliser l'apparence de vos tableaux de bord, Looks 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 thème "sombre" 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 vignettes d'un tableau de bord intégré depuis 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 Looker est créé automatiquement sur votre instance. Vous ne pouvez pas le supprimer ni le modifier. Le thème Looker est utilisé comme thème par défaut, sauf si un administrateur Looker en spécifie un autre.

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 de celui-ci, sont regroupés dans les sections suivantes:

Thème

Nom du paramètre Valeur
Nom Looker

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.

Nom du 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 accents.
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 du rendu 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 Aucune

Page du tableau de bord

Nom du paramètre Valeur
Collection de couleurs Aucune
Couleur de l'arrière-plan #f6f8fa

Vignettes du tableau de bord

Nom du paramètre Valeur
Couleur des titres #3a4245
Couleur du texte #3a4245
Couleur du corps de texte Aucune
Couleur de l'arrière-plan #ffffff
Alignement du titre Centre

Commandes du tableau de bord

Nom du paramètre Valeur
Afficher le titre du tableau de bord Oui
Afficher la barre de filtres Oui

Page "Découvrir"

Nom du 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 du 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

Un 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é à l'aide du 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 par rapport au 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 des paramètres 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é 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 continuent d'être appliqué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 icônes et les liens de sélecteur de champs, les boutons principaux, les bannières et les accents.

Couleur du texte: code couleur hexadécimal 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 vignettes, les vignettes de texte et les légendes dans les 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 courante compatible avec le Web, 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-dessous, pour indiquer l'URL de la définition de la police souhaitée.

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 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 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 environnement intégré, le texte de l'exploration apparaît dans la police 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:

Une exploration intégrée avec la couleur #e82042 appliquée au bouton Ajouter, au bouton Accéder à LookML, au bouton du menu Outils et aux titres des analyses de démarrage rapide.

Une fois qu'une exploration est exécutée, le contour et le texte du bouton Exécuter apparaissent dans la couleur 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 de vignette 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, c'est-à-dire un ensemble de palettes de couleurs assorties 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 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 de l'arrière-plan: code hexadécimal de la couleur de l'arrière-plan du tableau de bord et de l'arrière-plan des vignettes 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 l'une des 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 couleur hexadécimal pour les é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 tuiles dans des 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 éventuellement ajuster la taille de police des vignettes du tableau de bord à partir d'un ensemble de tailles prédéfinies (en pixels).

Ombre de la boîte: créez une ombre autour des vignettes 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 de la boîte s'affiche à droite.

Taille de l'écart entre deux colonnes: vous pouvez 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'écart entre les lignes: vous pouvez éventuellement ajuster la taille de l'espace entre les lignes des vignettes 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.

Display Filters Bar: 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/Masquer les filtres est désélectionnée et désactivée. L'icône des filtres du tableau de bord est alors masquée.

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 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 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 présentation 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 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 présentation intégrée.

Afficher le bouton d'exécution: désactivez cette option pour masquer le bouton d'exécution sur une présentation intégrée. 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.

Afficher le bouton Actions: désactivez cette option pour masquer le menu Actions d'exploration en forme de roue dentée dans une présentation intégrée.

Copie d'un thème

Pour copier un thème existant, sélectionnez le menu du thème, puis cliquez sur Copier le thème.

Lorsque vous créez une copie d'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 veillez à supprimer les parenthèses.

Vous pouvez modifier les autres paramètres comme 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 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é 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éfinition d'un thème par défaut pour les tableaux de bord incorporés et les explorations

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 incorporé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 explorations et les tableaux de bord incorporés dans votre instance Looker, sauf si vous spécifiez des paramètres différents pour un tableau de bord ou une exploration individuels. 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.

Application d'un thème à des explorations et des tableaux de bord incorporé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 incorporé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 votre URL d'exploration intégrée : none https://example.cloud.looker.com/embed/explore/model_name/explore_name?theme=red

L'élément thématique 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 individuels de thème du tableau de bord

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 une version du signe # encodée au format URL (%23). Par exemple, ces deux arguments d'URL spécifient la couleur rouge:

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

Voici quelques éléments à 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 remplacera les paramètres de cet élément dans tout autre thème. L'argument _theme est donc un moyen pratique d'affiner des 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 de ce tableau de bord, mais conserver 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 en URL l'argument _theme.
  • 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.