您可以使用自定义主题来自定义嵌入式 Looker 信息中心、Look 和探索的外观。您可以使用主题来自定义字体系列、文字颜色、背景颜色、按钮颜色、图块颜色和其他视觉元素。
例如,您可以创建“深色”主题来更改嵌入式信息中心的外观。
如需了解如何为信息中心和探索设置默认主题,或者将主题应用于特定信息中心或探索,请参阅嵌入入门 - 应用自定义主题文档页面。
您可以从管理面板的平台部分内的主题页面为嵌入式信息中心、嵌入式探索以及嵌入式信息中心内的功能块定义修改窗口。
本页面介绍以下内容:
- Looker 默认主题
- 如何将主题应用于嵌入式信息中心和探索
- 如何创建、复制、修改和删除自定义主题
- 如何为信息中心和探索设置默认主题
- 如何向所选的信息中心和探索应用非默认主题
- 如何应用
_theme
网址参数以选择信息中心主题元素
默认主题
系统会在您的实例上自动创建 Looker 默认主题,该主题无法删除或修改。除非 Looker 管理员指定其他主题作为默认主题,否则系统会使用 Looker 主题作为默认主题。
Looker 主题设置分为以下几个部分:选择主题旁边的 View 按钮或创建主题的副本即可查看这些设置:
主题
设置名称 | 值 |
---|---|
名称 | Looker |
常规
本部分的设置同时适用于嵌入式信息中心和嵌入式探索。
设置名称 | 值 | Notes |
---|---|---|
按键颜色 | #1A73E8 |
信息中心会为主要按钮和过滤器控件使用此颜色。探索会为主要按钮、横幅和强调内容使用此颜色。 |
文本颜色 | #3e3f40 |
|
背景颜色 | #f6f8fa |
|
字体系列 | Roboto、Noto Sans JP、Noto Sans CJK KR、Noto Sans 阿拉伯语界面、Noto Sans Devanagari 界面、Noto Sans 希伯来语、Noto Sans 泰语界面、Helvetica、Crashlytics、sans-serif | 这些字体由 Looker 应用提供,我们建议使用,因为它们既可用于浏览器,也可用于渲染图片。Looker 会使用字体系列列表中支持某个字符的第一种字体,因此应首先列出优先级较高的字体或专用字体。Looker 会使用“界面”的字体变体(如果有),以便对字符略作修改,使其更好地适应视觉组件的边界。 |
字体来源 | 无 |
信息中心页面
设置名称 | 值 |
---|---|
颜色集合 | 无 |
背景颜色 | #f6f8fa |
信息中心图块
设置名称 | 值 |
---|---|
标题颜色 | #3a4245 |
文本颜色 | #3a4245 |
文本正文颜色 | 无 |
背景颜色 | #ffffff |
标题对齐 | 居中 |
信息中心控件
设置名称 | 值 |
---|---|
显示信息中心标题 | 是 |
显示过滤器栏 | 是 |
探索页面
设置名称 | 值 |
---|---|
显示标题 | 是 |
显示标题 | 是 |
显示上次运行时间 | 是 |
显示时区 | 是 |
显示“运行”按钮 | 是 |
显示设置按钮 | 是 |
Look 页面
设置名称 | 值 |
---|---|
显示标题 | 是 |
显示标题 | 是 |
显示上次运行时间 | 是 |
显示时区 | 是 |
显示“运行”按钮 | 是 |
显示设置按钮 | 是 |
以下是信息中心、信息中心图块的编辑窗口和采用 Looker 主题的“探索”的示例。
采用 Looker 主题的信息中心示例
采用 Looker 主题的信息中心图块修改窗口示例
以 Looker 为主题的“探索”页面示例
如何应用主题和嵌入设置
您可以使用自定义主题和网址参数,通过默认主题更改嵌入式信息中心或“探索”功能的外观。显示嵌入式信息中心或“探索”时,Looker 会按以下顺序应用设置:
- 以默认主题中的设置开头
- 应用网址的
theme
参数中指定的自定义主题中的设置(如果有) - 应用
_theme
网址参数中指定的属性(如有)(仅限信息中心)
每项内容都会覆盖前面的项内容,这意味着嵌入设置会覆盖默认主题设置,而自定义主题会覆盖嵌入设置和默认主题。
不过,对于 _theme
网址参数,只有 _theme
参数中指定的元素才会替换其他主题或嵌入设置中的元素。其余的自定义主题设置和嵌入设置仍将使用。例如,如果您在嵌入式信息中心的网址中添加 _theme={"show_filters_bar":false}
参数,即使您在嵌入设置或自定义主题中开启了显示过滤条件,系统也不会显示过滤条件栏。不过,系统仍会使用自定义主题或嵌入设置中的其他设置。
下载的信息中心将显示已应用的所有自定义主题。
创建自定义主题
如需创建自定义主题,请选择 Add Theme:
接下来,在新建主题页面上为每项所需设置添加样式和颜色规范。
除了主题的标题(必须唯一)外,其他所有字段都将自动填充默认主题中的值。您可以更改任何设置,如以下部分所述。选择保存主题以保留您所做的更改,并保存新主题。
主题
名称:主题的名称必须是唯一的,并且只能包含字母数字字符和下划线。如果您在主题背景名称中输入空格,系统会在您保存主题背景时将空格替换为下划线。
常规
本部分的设置同时适用于嵌入式信息中心和嵌入式探索。
键颜色:信息中心会为主要按钮和过滤器控件使用此颜色。探索会为字段选择器链接和图标、主要按钮、横幅和强调内容使用此颜色。
文字颜色:探索和信息中心内文字的十六进制颜色代码。
背景颜色:“探索”页面和信息中心页面的背景的十六进制颜色代码。
字体系列:字体系列的名称。此字体将用于信息中心内的所有文本,包括可视化图表中的图块标题、文本图块和图例。此字体也将用于探索中的所有文本。如果字体名称中有空格,请用引号括住名称,例如“Open Sans”。
- 如果您使用的是常见的网络安全字体,则只需在字体系列字段中输入相应字体名称,并将字体来源字段留空即可。如果您想使用一种不太常见的字体,请在字体系列字段中输入相应字体名称,然后使用下文所述的字体来源字段提供指向您要使用的字体定义的网址。
字体来源:将此字段留空,除非您要使用自定义字体(这种字体不是常见的网络安全字体)。字体来源必须是一个完整网址,以 https
开头,并指向 @font-face
的 src
参数中指定的 url
值。我们建议使用网络开放字体格式 (.woff
) 文件,因为 Internet Explorer 11 不支持 .woff2
文件。
- 例如,对于 PT Sans Narrow,您可以在字体系列字段中输入“PT Sans Narrow”,然后在字体来源字段中输入
https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff
。
采用自定义主题的嵌入式“探索”示例
以下示例展示了具有自定义主题的嵌入式探索。将 Key Color 设置为 #e82042
,将 Font Family 设置为 Verdana。
当您在嵌入设置中运行“探索”时,“探索”中的文本将以指定的字体系列字体 Verdana 显示。强调色、按钮和链接以指定的 Key Color #e82042
显示:
运行探索后,Run 按钮轮廓和文本以指定的 Key Color #e82042
显示:
采用自定义主题的嵌入式信息中心图块编辑窗口示例
除了上一部分中所述的“探索”元素之外,当您修改信息中心图块时,横幅还会显示在关键颜色设置中指定的颜色深浅 (#e82042
) 以及字体系列设置中指定的字体 (Verdana) 中:
信息中心页面
颜色集合:您也可以选择选择一个颜色集合,这是一组能够很好地协同工作的协调调色板。将颜色集合分配给信息中心时,系统会根据集合中的调色板为所有数据系列着色,从而确保数据系列的颜色在整个信息中心上进行协调。
背景颜色:信息中心背景和文本图块背景的十六进制颜色代码。
上外边距:(可选)为信息中心顶部的外边距设置特定值。从下拉菜单中的预定义选项中进行选择。外边距以像素 (px) 为单位。
下外边距:(可选)为信息中心底部的外边距设置特定值。从下拉菜单中的预定义选项中进行选择。外边距以像素 (px) 为单位。
外边距:(可选)为信息中心两侧的外边距设置特定值。从下拉菜单中的预定义选项中进行选择。外边距以像素 (px) 为单位。
数字面板板块
Title Color:以下元素的十六进制颜色代码:
文字颜色:以下元素的十六进制颜色代码:
文本正文颜色:以下元素的十六进制颜色代码:
背景颜色:所有图块(文本图块除外)的背景的十六进制颜色代码。(文本图块使用与信息中心相同的背景颜色,该颜色使用信息中心页面部分中的背景颜色进行设置)。
标题对齐:将图块标题的对齐方式设置为左对齐、右对齐或居中对齐。
标题字体大小:(可选)根据一组预定义的大小(以像素为单位)调整信息中心图块的字体大小。
Box Shadow:使用 CSS 语法为信息中心图块创建阴影。您可以从预定义的方框阴影中进行选择,也可以创建自定义方框阴影。如需创建自定义方框阴影,请输入所需的 horizontal-offset vertical-offset blur-radius spread-radius color
,然后选择输入自定义样式以应用设置。右侧显示了方框阴影设置的预览。
列间距大小:(可选)根据一组预定义的大小(以像素为单位)调整信息中心图块列之间的间距大小。
行间距大小:(可选)根据一组预定义的大小(以像素为单位)调整信息中心图块行之间的间距大小。
边框半径:(可选)调整信息中心图块的边框半径,可创建方形或圆角。
信息中心控件
显示信息中心标题:停用此选项可隐藏整个信息中心标题,包括所有信息中心过滤条件和控件。停用此选项后,系统会取消选择并停用所有其他信息中心控件选项。
显示信息中心标题:选中相应复选框可显示信息中心的标题。
Center Dashboard Title(信息中心标题居中):选中此复选框可显示信息中心标题在信息中心居中对齐。未启用此选项时,信息中心标题会左对齐。只有启用了显示信息中心标题选项后,此选项才可用。
显示过滤条件栏:选中此复选框可在信息中心顶部显示过滤条件栏。如果未选择此选项,显示过滤器切换开关选项会被取消选中并停用,并隐藏信息中心过滤器图标。
显示过滤器开关:选中复选框可显示信息中心过滤器图标。
显示信息中心上次更新时间指示符:选中此复选框可显示信息中心上次更新时间指示符。
显示重新加载数据图标:选中复选框可显示信息中心重新加载数据图标。
显示信息中心菜单:选中相应复选框,系统会显示三点状信息中心菜单。取消选中此选项后,信息中心菜单选项将不可用。
探索页面
在自定义主题中,您可以调整嵌入式“探索”页面上的以下元素:
显示标题:停用此选项可隐藏嵌入式探索的整个标题,包括标题、上次运行时间指示器、数据的时区、运行按钮和探索操作齿轮菜单。
显示标题:停用此选项可隐藏嵌入式探索的标题。
显示上次运行时间:停用此选项可隐藏探索的运行时间。
显示时区:停用此选项可隐藏嵌入式探索中的数据时区。
显示“运行”按钮:停用此选项可隐藏嵌入式探索上的运行按钮。
显示“操作”按钮:停用此选项可在嵌入式探索上隐藏“探索操作”齿轮菜单。
Look 页面
在自定义主题中,您可以调整嵌入式 Look 中的以下元素:
Display Header:停用此选项可隐藏嵌入式 Look 的整个标题,包括标题、上次运行时间指示器、数据的时区、运行按钮和探索操作齿轮菜单。
显示标题:停用此选项可隐藏嵌入的 Look 的标题。
Display Last Run:停用此选项可隐藏 Look 的运行时间。
显示时区:停用此选项可隐藏嵌入式 Look 中的数据时区。
显示运行按钮:停用此选项可隐藏嵌入式 Look 中的“运行”按钮。停用在嵌入式 Look 中显示过滤条件后,此切换开关将不会显示运行按钮。
显示“操作”按钮:停用此选项可在嵌入式 Look 中隐藏“探索操作”齿轮菜单。
正在复制主题
您可以通过以下方式复制现有主题:选择该主题的菜单,然后选择复制主题。
在您复制主题时,新主题的名称默认采用复制的主题的名称,后跟“(copy)”。请务必手动将此名称更改为仅包含字母数字字符和下划线的新唯一名称,并务必移除括号。
您可以修改其余设置,就像创建新主题背景时一样。有关设置的说明,请参阅前述主题设置。请务必选择保存,以保留您的所有主题设置。
修改主题
系统会在您的实例上自动创建 Looker 主题,并且您无法对其进行修改。(如果您想修改 Looker 主题,则可以改为创建主题的副本,然后修改该副本。)
对于所有其他主题背景,您可以选择关联的修改按钮来更新主题背景设置。
您可以修改设置,就像创建新主题背景时一样。有关设置的说明,请参阅前述主题设置。请务必选择保存以保留更新。
删除主题
您可以删除除 Looker 主题或当前设为默认的主题以外的任何主题。如需删除某个主题,请选择该主题的菜单,然后选择删除主题。
删除某个主题后,在网址中指定该主题的所有嵌入式信息中心都将使用默认主题。
为嵌入式信息中心和探索设置默认主题
嵌入式 Look 不支持自定义主题。自定义主题仅适用于嵌入式信息中心和嵌入式探索。
如需为您的实例上的嵌入式信息中心和探索指定默认主题,请选择相应主题的菜单,然后选择设为默认。
除非您为个别信息中心或探索指定不同的设置,否则默认主题会用于 Looker 实例上的嵌入式信息中心和“探索”功能。请参阅本页中的如何应用主题和嵌入设置部分,详细了解如何将主题和嵌入设置应用于嵌入式信息中心或“探索”功能。
将主题应用于特定的嵌入式信息中心和探索
嵌入式 Look 不支持自定义主题。自定义主题仅适用于嵌入式信息中心和嵌入式探索。
如果您希望信息中心或探索使用默认主题以外的主题,可以在嵌入式信息中心或探索的网址中指定其他主题。为此,请在嵌入网址的末尾添加带有主题名称的参数 theme=
。例如,如果您有一个名为“Red”的主题背景,则需要在嵌入信息中心网址的末尾添加 theme=Red
:
https://example.cloud.looker.com/embed/dashboards/246?theme=red
对于探索,您应在嵌入的探索网址末尾添加 theme=Red
:none
https://example.cloud.looker.com/embed/explore/model_name/explore_name?theme=red
网址中的主题元素不区分大小写,因此您可以使用 theme=Red
或 theme=red
。
使用 _theme
网址参数应用各个信息中心主题元素
您可以使用 _theme
网址参数为嵌入式信息中心自定义各个主题元素,例如 tile_background_color
和 show_title
。
以下是 _theme
网址参数的格式:
_theme={"<property>":value}
例如,您可以使用 _theme={"show_filters_bar":false}
隐藏嵌入式信息中心的过滤条件栏。完整的网址可能如下所示:
https://example.cloud.looker.com/embed/dashboards/236?_theme={"show_filters_bar":false}
使用英文逗号指定多个主题属性:
_theme={"show_title":false,"show_filters_bar":false,"text_tile_text_color":"blue"}
颜色值必须用引号括起来,并且可以通过颜色名称或十六进制颜色代码来表示。如果使用十六进制代码,请务必使用 #
符号的网址编码版本,即 %23
。例如,以下两个网址参数都指定红色:
_theme={"title_color":"red","text_tile_text_color":"%23FF0000"}
将 _theme
对象用于嵌入式信息中心时,您需要考虑以下事项:
- 在
_theme
网址参数中指定的任何元素都会替换任何其他主题中该元素的设置。这样一来,_theme
参数就会成为优化主题或嵌入设置的便捷方式。例如,假设您有一个用于隐藏过滤条件栏的自定义主题,但您有一个信息中心,适合显示过滤条件栏。您可以为信息中心使用自定义主题,然后在嵌入式信息中心的网址中添加_theme={"show_filters_bar":true}
参数,即可在该信息中心显示过滤条件栏,但保留所有其他自定义主题设置。请参阅本页中的如何应用主题和嵌入设置部分,详细了解如何将主题和嵌入设置应用于嵌入式信息中心。 - 对于编程脚本,您必须对
_theme
参数进行网址编码。 - 传送 PDF 格式的嵌入式信息中心时,系统不会应用
_theme
参数。 - 如果您以 PDF 格式下载信息中心,则系统会应用
_theme
参数。