您可以使用自定义主题来自定义嵌入的 Looker 信息中心、Look 和探索的外观。您可以使用主题自定义字体系列、文本颜色、背景颜色、按钮颜色、功能块颜色和其他视觉元素。
例如,您可以创建“深色”主题来更改嵌入式信息中心的外观。
如需了解如何为信息中心和探索设置默认主题,或如何将主题应用于特定信息中心或探索,请参阅嵌入功能使用入门 - 应用自定义主题文档页面。
您可以前往管理面板的平台部分中的主题页面,为嵌入式信息中心、嵌入式探索以及嵌入式信息中心中功能块的修改窗口定义主题。
本页面介绍以下内容:
- Looker 默认主题
- 主题如何应用于嵌入式信息中心和探索
- 如何创建、复制、修改和删除自定义主题
- 如何为信息中心和探索设置默认主题
- 如何向所选信息中心和探索应用非默认主题
- 如何应用
_theme
网址参数以选择信息中心主题元素
默认主题
Looker 默认主题会自动在您的实例中创建,且无法删除或修改。系统会将 Looker 主题用作默认主题,除非 Looker 管理员将其他主题指定为默认主题。
您可以通过选择主题旁边的 View 按钮或创建主题的副本来查看 Looker 主题设置,这些设置分为以下几个部分:
主题
设置名称 | 值 |
---|---|
名称 | Looker |
常规
本部分中的设置同时适用于嵌入式信息中心和嵌入式探索。
设置名称 | 值 | 备注 |
---|---|---|
按键颜色 | #1A73E8 |
信息中心会为主要按钮和过滤器控件使用此颜色。探索会将此颜色用于主要按钮、横幅和强调内容。 |
文本颜色 | #3e3f40 |
|
背景颜色 | #f6f8fa |
|
字体系列 | Roboto、Noto Sans JP、Noto Sans CJK KR、Noto Sans 阿拉伯语界面、Noto Sans Devanagari 界面、Noto Sans 希伯来语、Noto Sans 泰语界面、Helvetica、Arial、sans-serif | 这些字体由 Looker 应用提供,并且推荐使用,因为它们在浏览器中以及在图片渲染时可用。Looker 会使用字体系列列表中支持相应字符的第一个字体,因此应先列出优先级更高或专用字体。Looker 会在可用时使用字体的“界面”变体,以便对字符进行细微修改,使其更好地适应视觉组件的边界。 |
字体来源 | 无 |
信息中心页面
设置名称 | 值 |
---|---|
颜色集合 | 无 |
背景颜色 | #f6f8fa |
信息中心图块
设置名称 | 值 |
---|---|
标题颜色 | #3a4245 |
文本颜色 | #3a4245 |
文本正文颜色 | 无 |
背景颜色 | #ffffff |
标题对齐 | 居中 |
信息中心控件
设置名称 | 值 |
---|---|
显示信息中心标题 | 是 |
显示过滤器栏 | 是 |
探索页面
设置名称 | 值 |
---|---|
显示标题 | 是 |
显示标题 | 是 |
显示上次运行时间 | 是 |
显示时区 | 是 |
显示“运行”按钮 | 是 |
显示设置按钮 | 是 |
Look 页面
设置名称 | 值 |
---|---|
显示标题 | 是 |
显示标题 | 是 |
显示上次运行时间 | 是 |
显示时区 | 是 |
显示“运行”按钮 | 是 |
显示设置按钮 | 是 |
以下是信息中心、信息中心功能块的修改窗口以及采用 Looker 主题的“探索”页面的示例。
采用 Looker 主题的信息中心示例
采用 Looker 主题的信息中心图块修改窗口示例
采用 Looker 主题的“探索”页面示例
如何应用主题和嵌入设置
您可以使用自定义主题和网址参数更改嵌入式信息中心或“探索”的默认主题的外观。显示嵌入式信息中心或“探索”时,Looker 会按以下顺序应用设置:
- 从默认主题的设置开始
- 应用网址的
theme
参数中指定的自定义主题中的设置(如果有) - 应用
_theme
网址参数中指定的属性(如果有,仅适用于信息中心)
每项设置都会替换之前的设置,这意味着嵌入设置会替换默认主题设置,而自定义主题会替换嵌入设置和默认主题。
不过,对于 _theme
网址参数,只有 _theme
参数中指定的元素会替换其他主题或嵌入设置中的元素。系统仍会使用其余的自定义主题设置和嵌入设置。例如,如果您在嵌入式信息中心的网址中添加 _theme={"show_filters_bar":false}
参数,系统将不会显示过滤条件栏,即使您在嵌入设置或自定义主题中开启了显示过滤条件也是如此。不过,系统仍会使用自定义主题或嵌入设置中的其他设置。
下载的信息中心将显示应用的任何自定义主题。
创建自定义主题
如需创建自定义主题,请选择添加主题:
接下来,在 New Theme 页面上,为所需的每项设置添加样式和颜色规范。
除了主题的标题(必须唯一)之外,所有字段都会自动使用默认主题中的值进行填充。您可以更改任何设置,具体如以下部分所述。选择保存主题以保留更改并保存新主题。
主题
名称:主题的名称必须是唯一的,且只能包含字母数字字符和下划线。如果您在主题名称中输入空格,则在保存主题时,空格将替换为下划线。
常规
本部分中的设置同时适用于嵌入式信息中心和嵌入式探索。
按键颜色:信息中心会为主要按钮和过滤器控件使用此颜色。探索视图会为字段选择器链接和图标、主要按钮、横幅和强调内容使用此颜色。
文字颜色:探索和信息中心上文字的十六进制颜色代码。
背景颜色:探索和信息中心页面的背景色的十六进制颜色代码。
字体系列:字体系列的名称。此字体将用于信息中心内的所有文本,包括可视化图表中的图块标题、文本图块和图例。此字体也将用于“探索”中的所有文本。如果字体名称中包含空格,请在名称前后加上英文引号,例如 "Open Sans"。
- 如果您使用的是常见的网络安全字体,则只需在字体系列字段中输入字体名称,并将字体来源字段留空即可。如果您想使用不太常见的字体,请在字体系列字段中输入字体名称,然后使用字体来源字段(下文将对其进行介绍)提供要使用的字体的定义的网址。
字体来源:除非您要使用自定义字体(一种不是常见的网络安全字体的字体),否则请将此字段留空。字体来源必须是以 https
开头且指向 @font-face
的 src
参数中指定的 url
值的完整网址。我们建议您使用 Web Open Font 格式 (.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 按钮轮廓和文本会以指定的关键字颜色 #e82042
显示:
具有自定义主题的嵌入式信息中心图块编辑窗口示例
除了上一部分中介绍的“探索”元素之外,当您修改信息中心功能块时,横幅会采用主色设置 (#e82042
) 中指定的色调,以及字体系列设置 (Verdana) 中指定的字体:
信息中心页面
颜色集合:您可以选择颜色集合,即一组搭配协调的 Palette。向信息中心分配颜色集合后,信息中心所有图块中的所有数据系列都会根据该集合中的调色板进行着色,从而确保数据系列的颜色在整个信息中心中保持一致。
背景颜色:信息中心背景和文本功能块背景的十六进制颜色代码。
上外边距:可为信息中心顶部的边距设置特定值。从下拉菜单的预定义选项中进行选择。边距以像素 (px) 为单位。
下外边距:可为信息中心底部的外边距设置具体值。从下拉菜单中的预定义选项中进行选择。边距以像素 (px) 为单位。
左右外边距:可为信息中心两侧的外边距设置特定值。从下拉菜单中选择预定义选项。边距以像素 (px) 为单位。
信息中心图块
标题颜色:以下元素的十六进制颜色代码:
文本颜色:以下元素的十六进制颜色代码:
文本正文颜色:以下元素的十六进制颜色代码:
背景颜色:除文本功能块之外,所有功能块的背景的十六进制颜色代码。(文本功能块使用与信息中心相同的背景颜色,该颜色可通过信息中心页面部分中的背景颜色设置。)
标题对齐方式:将功能块标题的对齐方式设为左对齐、右对齐或居中对齐。
标题字体大小:您可以选择从一组预定义的像素大小中调整信息中心功能块的字体大小。
Box Shadow:使用 CSS 语法在信息中心图块周围创建阴影。您可以从预定义的方框阴影中进行选择,也可以创建自定义方框。如需创建自定义阴影框,请输入所需的 horizontal-offset vertical-offset blur-radius spread-radius color
,然后选择输入自定义样式以应用您的设置。右侧会显示方框阴影设置的预览。
列间距大小:(可选)根据一组预定义的尺寸(以像素为单位)调整信息中心图块列之间的间距大小。
行间距大小:(可选)根据一组预定义的尺寸(以像素为单位)调整信息中心图块行之间的间距大小。
边框半径:(可选)调整信息中心图块的边框半径,以创建方形或圆角。
信息中心控件
显示信息中心标题:停用此选项可隐藏整个信息中心标题,包括所有信息中心过滤条件和控件。停用此选项后,系统会取消选择并停用所有其他信息中心控件选项。
显示信息中心标题:选中此复选框可显示信息中心的标题。
Center Dashboard Title:选中此复选框可在信息中心内居中对齐信息中心标题。如果此选项未启用,信息中心标题会居左对齐。此选项仅在 Display Dashboard Title 选项已启用时可用。
显示过滤条件栏:选中此复选框可在信息中心顶部显示过滤栏。如果未选择此选项,则显示过滤条件切换选项会被取消选中并停用,从而隐藏信息中心过滤条件图标。
“显示过滤条件”切换开关:选中此复选框可显示信息中心过滤条件图标。
显示信息中心上次更新时间指示符:选中该复选框可显示信息中心上次更新时间指示符。
显示重新加载数据图标:选中此复选框可显示信息中心重新加载数据图标。
显示信息中心菜单:选中此复选框可显示三点状信息中心菜单。取消选中此选项后,信息中心菜单选项将不可用。
探索页面
在自定义主题中,您可以调整嵌入式探索页面上的以下元素:
显示标题:停用此选项可隐藏嵌入式探索的整个标题,包括标题、上次运行指示器、数据的时区、运行按钮和探索操作齿轮菜单。
显示标题:停用此选项可隐藏嵌入的探索的标题。
显示上次运行时间:停用此选项可隐藏“探索”的运行时间。
显示时区:停用此选项可隐藏嵌入式探索中数据的时区。
显示“运行”按钮:停用此选项可隐藏嵌入式探索中的运行按钮。
显示操作按钮:停用此选项可在嵌入式“探索”工具中隐藏“探索”操作齿轮菜单。
Look 页面
在自定义主题中,您可以调整嵌入式外观的以下元素:
显示标题:停用此选项可隐藏嵌入式数据分析的整个标题,包括标题、上次运行指示器、数据的时区、运行按钮和探索操作齿轮菜单。
显示标题:停用此选项可隐藏嵌入式外观的标题。
显示上次运行时间:停用此选项可隐藏相应外观运行已过的时长。
显示时区:停用此选项可隐藏嵌入式数据集上数据的时区。
显示“运行”按钮:停用此选项可隐藏嵌入式外观的“运行”按钮。停用在嵌入式 Look 中显示过滤条件后,此切换开关将不会显示运行按钮。
显示操作按钮:停用此选项可隐藏嵌入式外观的“探索操作”齿轮菜单。
复制主题
如需复制现有主题,请选择相应主题的菜单,然后选择复制主题。
当您复制主题时,新主题的名称默认为复制的主题的名称后面加上“(复制)”。请务必手动将此名称更改为仅包含字母数字字符和下划线的唯一新名称,并务必移除圆括号。
您可以编辑其余设置,就像创建新主题背景时一样。如需了解这些设置的说明,请参阅前面介绍的主题设置。请务必选择保存,以保留您的所有主题设置。
修改主题
Looker 主题会自动在您的实例中创建,且无法修改。(如果您想修改 Looker 主题,可以改为创建该主题的副本,然后修改副本。)
对于所有其他主题背景,您可以选择关联的修改按钮来更新主题背景设置。
您可以像创建新主题时一样修改设置。有关这些设置的说明,请参阅前述主题设置。请务必选择保存以保留更新。
删除主题
您可以删除 Looker 主题或当前设置为默认主题之外的任何主题。如需删除主题,请选择相应主题的菜单,然后选择删除主题。
删除某个主题后,在其网址中指定了该主题的任何嵌入式信息中心都将使用默认主题。
为嵌入式信息中心和探索设置默认主题
嵌入式 Look 不支持自定义主题。自定义主题仅适用于嵌入式信息中心和嵌入式探索。
如需为实例中的嵌入式信息中心和探索指定默认主题,请选择某个主题的菜单,然后选择设为默认。
除非您为单个信息中心或探索指定了其他设置,否则默认主题会用于 Looker 实例中的嵌入式信息中心和探索。如需详细了解如何将主题和嵌入设置应用于嵌入式信息中心或“探索”,请参阅本页中的如何应用主题和嵌入设置部分。
将主题应用于特定的嵌入式信息中心和探索
嵌入式 Look 不支持自定义主题。自定义主题仅适用于嵌入式信息中心和嵌入式探索。
如果您希望信息中心或探索使用默认主题以外的主题,可以在嵌入式信息中心或探索的网址中指定其他主题。为此,请将包含主题名称的参数 theme=
添加到嵌入网址的末尾。例如,如果您有一个名为“红色”的主题,则需要在嵌入式信息中心网址的末尾添加 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
参数。