Paramètres Admin – 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 des boutons, 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 comment appliquer un thème à un tableau de bord ou à une exploration spécifiques, 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 et les explorations intégrés, ainsi que pour la fenêtre d'édition des tuiles d'un tableau de bord intégré. Pour ce faire, accédez à la page Thèmes dans la section Plate-forme du panneau Admin.

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

• Conditions requises
• Le thème Looker par défaut
• Application des thèmes aux tableaux de bord et aux explorations intégrés
• Créer, copier, modifier et supprimer un thème personnalisé
• Définir un thème par défaut pour les tableaux de bord et les explorations
• Appliquer un thème autre que celui par défaut à des tableaux de bord et des explorations sélectionnés
• Appliquer l'argument d'URL _theme pour sélectionner des éléments du thème du tableau de bord

Conditions requises

Pour gérer les thèmes sur votre instance Looker, vous devez remplir les conditions suivantes :

• Si votre instance est une instance Looker (version initiale), 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.
• Votre utilisateur Looker doit disposer du rôle Administrateur ou de l'autorisation manage_themes.

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é par défaut, sauf si un administrateur Looker spécifie un autre thème par défaut.

Les paramètres du thème Looker, que vous pouvez consulter 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
• Général
• Page "Tableau de bord"
• Vignettes du tableau de bord
• Commandes du tableau de bord
• Page "Explorer"
• Page Look

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.

Page du tableau de bord

Vignettes du tableau de bord

Commandes du tableau de bord

Page "Découvrir"

Page "Look"

Vous trouverez ci-dessous des exemples de tableau de bord, de fenêtre d'édition d'une tuile de tableau de bord et d'Explorer avec le thème Looker.

Exemple de tableau de bord avec le thème Looker

Exemple de fenêtre d'édition d'une tuile de tableau de bord avec le thème Looker

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

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 à partir du thème par défaut en utilisant des thèmes personnalisés et des arguments d'URL. Lorsque vous affichez un tableau de bord ou 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. Cela signifie que les paramètres d'intégration remplacent les paramètres de 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 d'intégration 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 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é, sélectionnez Ajouter un thème :

Ensuite, ajoutez les 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 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 clé : 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 champ, les boutons principaux, les bannières et les mises en exergue.

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

Couleur de l'arrière-plan : code couleur hexadécimal de l'arrière-plan des pages "Explorer" et des tableaux 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, 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 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 courante et sécurisée). Font Source 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 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 police Font Family spécifiée, Verdana. Les couleurs d'accentuation, les boutons et les liens s'affichent dans la couleur clé spécifiée, #e82042 :

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

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

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

Page du tableau de bord

Collection de couleurs : vous pouvez éventuellement 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 tuiles du tableau de bord sont colorées selon les palettes de la collection. Les couleurs des séries de données sont ainsi 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 remplacera 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 couleur hexadécimal pour l'arrière-plan du tableau de bord et des blocs 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 les marges latérales 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 :

• Titre du tableau de bord
• Titres des vignettes de tableau de bord
• Titres et texte de niveau 1 des blocs Markdown
• Couleur du texte des visualisations à valeur unique

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

• Texte du tableau de bord, y compris les légendes des visualisations
• Sous-titres et corps de texte des vignettes Markdown, à l'exception du texte de titre de niveau 1
• Titre de niveau 1, titre de niveau 2 et texte normal sur les vignettes de texte
• Icônes de cartes dans les visualisations à valeur unique

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 de niveau 3, dans les vignettes Markdown.
• Corps du texte dans les vignettes de texte

Couleur d'arrière-plan : code couleur hexadécimal pour l'arrière-plan de toutes les tuiles, à l'exception des tuiles 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 à gauche, à droite ou au centre.

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

Box Shadow : créez une ombre autour des tuiles du tableau de bord à l'aide de la syntaxe CSS. Vous pouvez sélectionner une ombre prédéfinie ou en créer une personnalisée. Pour créer une ombre personnalisée, saisissez la valeur horizontal-offset vertical-offset blur-radius spread-radius color souhaitée, 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 ajuster la taille de l'espace entre les colonnes des 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 des tuiles du tableau de bord à partir d'un ensemble de tailles prédéfinies en pixels.

Rayon de la bordure : vous pouvez ajuster le rayon de la bordure 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 afficher le titre du tableau de bord centré sur le 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.

Activer/Désactiver l'affichage des filtres : 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 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 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.

Titre à afficher : 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 date de 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 un Explore intégré.

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 d'exploration" dans une exploration intégrée.

Page "Look"

Dans un thème personnalisé, vous pouvez ajuster les éléments suivants dans 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 d'engrenage Actions d'exploration.

Titre à afficher : 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 la date de la dernière exécution du Look.

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

Afficher le bouton d'exécution : désactivez cette option pour masquer le bouton "Exécuter" dans 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 "Afficher les actions" : désactivez cette option pour masquer le menu en forme de roue dentée "Explorer les actions" sur un Look intégré.

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 défini par défaut sur le nom du thème copié, suivi de "(copie)". Veillez à modifier manuellement ce nom en un nouveau nom unique ne contenant que des caractères alphanumériques et des traits de soulignement, et supprimez les parenthèses.

Vous pouvez modifier le reste des paramètres comme vous le feriez lorsque vous créez un thème. Pour obtenir une description des paramètres, consultez les paramètres de 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 dans votre instance et ne peut pas être modifié. (Si vous souhaitez modifier le thème Looker, vous pouvez en créer une copie, puis la modifier.)

Pour tous les autres thèmes, vous pouvez sélectionner le bouton Modifier associé pour 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, consultez les paramètres de thème décrits précédemment. Veillez à 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 de celui qui est défini par défaut. Pour supprimer un thème, sélectionnez son menu, puis Supprimer le thème.

Après avoir supprimé un thème, tout tableau de bord intégré dont l'URL spécifie ce thème 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 à votre instance, sélectionnez le menu d'un thème, puis Définir comme thème par défaut.

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

Appliquer un thème à des tableaux de bord et des explorations spécifiques 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.

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 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é "Rouge", 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égrer : 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 entre guillemets et peuvent être exprimées avec le nom de la couleur ou avec 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, les deux arguments d'URL suivants 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 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 ayez un tableau de bord où 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 sur ce tableau de bord, tout en conservant tous les autres paramètres du thème personnalisé. Pour savoir comment les thèmes et les paramètres d'intégration sont appliqués à un tableau de bord intégré, consultez la section Comment les thèmes et les paramètres d'intégration sont appliqués sur cette page.
• Pour les scripts de programmation, vous devez encoder l'argument _theme sous forme d'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.