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, de l'arrière-plan, des boutons, 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 en savoir plus sur la définition d'un thème par défaut pour vos tableaux de bord et vos explorations, ou pour l'application d'un thème à un tableau de bord ou à une exploration spécifiques, consultez la page de documentation Premiers pas avec l'intégration : application de thèmes personnalisés.
Vous pouvez définir des thèmes pour les tableaux de bord et les explorations intégrés, ainsi que 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 Admin.
Cette page décrit les éléments suivants :
- Le thème par défaut de Looker
- Application des thèmes aux tableaux de bord et aux explorations intégrés
- Créer, copier, modifier et supprimer un thème personnalisé
- Comment définir un thème par défaut pour les tableaux de bord et les explorations
- Comment appliquer un thème autre que celui par défaut aux tableaux de bord et aux explorations sélectionnés
- Comment appliquer l'argument d'URL
_themepour sélectionner des éléments de thème du tableau de bord
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é comme thème par défaut, sauf si un administrateur Looker en définit un autre comme 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 de présentation
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 intégré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 CJK KR, Noto Sans Arabic UI, Noto Sans Devanagari UI, Noto Sans Hebrew, Noto Sans thaï UI, Helvetica, Arial, sans-serif | Ces polices sont diffusées par l'application Looker. Elles sont recommandées, car elles seront disponibles 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, donc les polices de priorité supérieure ou spécialisées doivent être listées en premier. Looker utilise les variantes de polices de l'« UI » 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, la fenêtre de modification d'une vignette de tableau de bord et une exploration avec le thème Looker.
Exemple de tableau de bord avec le thème Looker
Exemple de fenêtre de modification de vignette 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 intégré ou d'une exploration à partir du 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 intégré ou d'une exploration, Looker applique les paramètres dans l'ordre suivant:
- Commence avec les paramètres du thème par défaut
- Applique les paramètres du thème personnalisé spécifié dans l'argument
themede l'URL, le cas échéant. - S'applique aux 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 les éléments 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 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'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 thèmes personnalisés appliqués s'affichent lorsque vous téléchargez des tableaux de bord.
Créer un thème personnalisé
Pour créer un thème personnalisé, sélectionnez Ajouter un thème:
Ensuite, ajoutez des caractéristiques 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 n'importe lequel des paramètres, qui sont 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, ceux-ci sont remplacés par des traits de soulignement lorsque vous enregistrez le thème.
Général
Les paramètres de cette section s'appliquent à la fois aux tableaux de bord intégrés et aux explorations intégrées.
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 accents.
Couleur du texte: code hexadécimal du texte des explorations et des tableaux de bord.
Couleur d'arrière-plan: code hexadécimal de la couleur de l'arrière-plan des pages "Explorer" et "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 tout le texte d'une exploration. Si le nom de la police comporte un espace, placez-le entre guillemets, par exemple "Open Sans".
- Si vous utilisez une police Web sécurisée 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-dessous afin de fournir une URL permettant d'accéder à 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 Web courante). Le champ 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 ouvert (.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.woffdans le champ Source de la police.
Exemple d'une exploration intégrée avec un thème personnalisé
L'exemple suivant montre une exploration intégrée associée à un thème personnalisé. La couleur clé 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 apparaît dans la famille de polices spécifiée : Verdana. Les couleurs d'accentuation, les boutons et les liens s'affichent dans la couleur clé spécifiée, #e82042:
Après l'exécution d'une exploration, le contour du bouton Run (Exécuter) et le texte apparaissent dans la Key Color (Couleur clé) indiquée, #e82042:
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 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 le ton spécifié dans le paramètre Couleur clé (#e82042) et dans la police spécifiée dans le paramètre Famille de polices (Verdana):
Page du tableau de bord
Collection de couleurs: si vous le souhaitez, vous pouvez choisir une collection de couleurs (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 selon les 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é, celle-ci remplace toute collection de couleurs précédemment attribuée à une carte. 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 d'arrière-plan: le code couleur hexadécimal de l'arrière-plan du tableau de bord et de l'arrière-plan des vignettes de texte.
Margin Top (Marge supérieure) : vous pouvez définir une valeur spécifique de 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 définir une valeur spécifique de 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).
Margin Côtés: vous pouvez définir une valeur spécifique de marge sur les côtés 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 des éléments suivants:
- Titre du tableau de bord
- Titres des vignettes du tableau de bord
- Titres et texte de l'en-tête de niveau 1 des tuiles Markdown
- Couleur du texte des visualisations à valeur unique
Couleur du texte: code couleur hexadécimal des éléments suivants:
- Texte du tableau de bord, y compris les légendes dans les visualisations
- Sous-titres et corps du texte des tuiles Markdown, à l'exception du texte de l'en-tête de niveau 1
- Titre de niveau 1, niveau 2 et texte normal sur les tuiles de texte
- Icônes en mosaïque dans les visualisations à valeur unique
Couleur du corps du texte: code couleur hexadécimal 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 tuiles de texte
Couleur d'arrière-plan: code hexadécimal de la couleur de l'arrière-plan de toutes les tuiles, à l'exception des tuiles 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 des titres: définissez l'alignement des titres des tuiles à gauche, à droite ou au centre.
Taille de police du titre: vous pouvez 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 case: créez une ombre autour des vignettes du tableau de bord à l'aide de la syntaxe CSS. Vous pouvez sélectionner une ombre de rectangle prédéfinie ou en créer une personnalisée. Pour créer une ombre de zone personnalisée, saisissez l'élément horizontal-offset vertical-offset blur-radius spread-radius color souhaité, puis sélectionnez Saisir un style personnalisé pour appliquer vos paramètres. Un aperçu des paramètres d'ombre de la zone est affiché à droite.
Taille de l'écart entre les 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 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 pour 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 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 cette 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 cette case pour afficher la barre de filtres en haut du tableau de bord. Si cette option n'est pas sélectionnée, l'option Display Filters Toggle (Activer/Désactiver les filtres d'affichage) est désélectionnée et désactivée, ce qui masque l'icône des filtres du tableau de bord.
Activer/Désactiver les filtres d'affichage: 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 Explorer 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 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 d'actions: désactivez cette option pour masquer le menu en forme de 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 des 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 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 la durée d'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.
Afficher le bouton Actions: désactivez cette option pour masquer le menu en forme de roue dentée des actions d'exploration sur un Look intégré.
Copie d'un thème
Vous pouvez copier un thème existant en sélectionnant le menu du thème, puis l'option 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)". Assurez-vous de remplacer ce nom manuellement par un nouveau nom unique ne comportant 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 vous le feriez lorsque vous créez un thème. Pour obtenir une description des paramètres de thème, consultez ceux décrits précédemment. N'oubliez pas de sélectionner Enregistrer pour conserver tous les paramètres de votre thème.
Modification d'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 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 de thème, consultez ceux décrits précédemment. Veillez à sélectionner Enregistrer pour conserver vos mises à jour.
Supprimer un thème
Vous pouvez supprimer n'importe quel thème, à l'exception de celui de Looker ou de celui qui est actuellement défini par défaut. Pour supprimer un thème, sélectionnez le menu qui lui est associé, puis cliquez sur Supprimer le thème.
Une fois que vous avez supprimé un thème, tout tableau de bord intégré pour lequel ce 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 intégrés et les explorations
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 intégrés et des explorations sur votre instance, sélectionnez le menu d'un thème, puis cliquez sur Définir par défaut.
Le thème par défaut est utilisé pour les tableaux de bord intégrés et les explorations sur 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 Comment les thèmes et les paramètres d'intégration sont appliqués 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é ou à une exploration.
Application d'un thème à des tableaux de bord intégrés et des explorations 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 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 vous avez un thème appelé "Rouge", vous devez ajouter theme=Red à la fin de l'URL du 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'exploration intégrée :
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 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 de couleur hexadécimal. Si vous utilisez un code hexadécimal, veillez à utiliser une version encodée au format URL du signe #, à savoir %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
_themeremplace les paramètres de cet élément dans tout autre thème. L'argument_themeest 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 dans lequel l'affichage de la barre de filtres serait judicieux. 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 Comment les thèmes et les paramètres d'intégration sont appliqués 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
_themeen URL. - L'argument
_themen'est pas appliqué lors de la diffusion de tableaux de bord intégrés au format PDF. - L'argument
_themeest appliqué si vous téléchargez le tableau de bord au format PDF.