您可以使用自定义主题来自定义嵌入式 Looker 信息中心、Look 和探索的显示效果。您可以使用主题自定义字体系列、文字颜色、背景颜色、按钮颜色、功能块颜色和其他视觉元素。
例如,您可以创建“深色”主题来更改嵌入式信息中心的外观。
如需了解如何为信息中心和探索设置默认主题,或如何将主题应用于特定信息中心或探索,请参阅嵌入功能使用入门 - 应用自定义主题文档页面。
您可以在管理面板的平台部分的主题页面中,为嵌入式信息中心、嵌入式探索和嵌入式信息中心内图块的编辑窗口定义主题。
本页面介绍以下内容:
- 要求
- Looker 默认主题
- 主题如何应用于嵌入式信息中心和探索
- 如何创建、复制、修改和删除自定义主题
- 如何为信息中心和探索设置默认主题
- 如何将非默认主题应用到所选信息中心和探索
- 如何应用
_theme
网址实参来选择信息中心主题元素
要求
如需在 Looker 实例上管理主题,您必须满足以下要求:
- 如果您的实例是 Looker(原始版本)实例,则必须由 Looker 启用可让您为嵌入式信息中心、Look 和探索自定义主题的功能。如需更新此功能的许可,请与 Google Cloud 销售专员联系。
- 如果您的实例是 Looker (Google Cloud Core) 实例,则嵌入式主题适用于企业版和嵌入式 版本,但不适用于标准版。
- 您的 Looker 用户必须拥有管理员角色或
manage_themes
权限。
默认主题
Looker 默认主题会在您的实例上自动创建,无法删除或修改。除非 Looker 管理员指定其他主题作为默认主题,否则系统会使用 Looker 主题作为默认主题。
Looker 主题设置(您可以通过选择主题旁边的查看按钮或创建主题的副本来查看)分为以下几个部分:
主题
设置名称 | 值 |
---|---|
名称 | Looker |
常规
本部分的设置同时适用于嵌入式信息中心和嵌入式探索。
设置名称 | 值 | 备注 |
---|---|---|
按键颜色 | #1A73E8 |
信息中心会为主要按钮和过滤条件控件使用此颜色。探索视图会为主要按钮、横幅和强调内容使用此颜色。 |
文本颜色 | #3e3f40 |
|
背景颜色 | #f6f8fa |
|
字体系列 | Roboto、Noto Sans JP、Noto Sans CJK KR、Noto Sans Arabic UI、Noto Sans Devanagari UI、Noto Sans Hebrew、Noto Sans Thai UI、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}
实参,即使您已在嵌入设置或自定义主题中开启显示过滤条件,过滤条件栏也不会显示。不过,系统仍会使用自定义主题或嵌入设置中的其他设置。
下载的信息中心将显示所有已应用的自定义主题。
创建自定义主题
如需创建自定义主题,请选择添加主题:
接下来,在新主题页面上为每项所需设置添加样式和颜色规范。
除了主题的标题(必须是唯一的)之外,所有字段都会自动填充默认主题中的值。您可以更改以下各部分中所述的任何设置。选择保存主题以保留更改并保存新主题。
主题
名称:主题的名称必须是唯一的,且只能包含字母数字字符和下划线。如果您在主题名称中输入空格,保存主题时,这些空格将被替换为下划线。
常规
本部分的设置同时适用于嵌入式信息中心和嵌入式探索。
关键颜色:信息中心会为主要按钮和过滤条件控件使用此颜色。探索会为字段选择器链接和图标、主要按钮、横幅和强调内容使用此颜色。
文字颜色:探索和信息中心内文字的十六进制颜色代码。
背景颜色:探索页面和信息中心页面的背景的十六进制颜色代码。
字体系列:字体系列的名称。此字体将用于信息中心上的所有文字,包括图块标题、文字图块和可视化图表中的图例。此字体还将用于“探索”中的所有文字。如果字体名称中包含空格,请用引号将名称引起来,例如“Open Sans”。
- 如果您使用的是常用的网络安全字体,只需在字体系列字段中输入字体名称,然后将字体来源字段留空即可。如果您想使用不太常见的字体,请在字体系列字段中输入字体名称,然后使用字体来源字段(如下所述)提供指向您要使用的字体定义的网址。
字体来源:除非您想使用自定义字体(即非常见的网络安全字体),否则请将此字段留空。字体来源必须是以 https
开头的完整网址,并且指向 @font-face
的 src
实参中指定的 url
值。我们建议您使用 Web 开放字体格式 (.woff
) 文件,因为 Internet Explorer 11 不支持 .woff2
文件。
- 例如,对于 PT Sans Narrow,您可以在字体系列字段中输入“PT Sans Narrow”,然后在字体来源字段中输入
https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff
。
采用自定义主题的嵌入式“探索”功能示例
以下示例展示了具有自定义主题的嵌入式探索。关键颜色设置为 #e82042
,字体系列设置为 Verdana。
在嵌入式设置中运行探索时,探索中的文字会以指定的 Font Family 字体 Verdana 显示。强调色、按钮和链接会以指定的 Key Color (#e82042
) 显示:
探索运行后,“运行”按钮的轮廓和文字会以指定的关键颜色显示,#e82042
:
嵌入式信息中心图块编辑窗口(采用自定义主题)的示例
除了上一部分中介绍的“探索”元素之外,当您修改信息中心图块时,横幅会以关键颜色设置 (#e82042
) 中指定的色调和字体系列设置(Verdana)中指定的字体显示:
信息中心页面
颜色集合:您可以选择颜色集合(一组可搭配使用的协调配色方案)。将颜色集合分配给信息中心后,信息中心所有图块中的所有数据序列都会根据该集合中的调色板着色,从而确保整个信息中心的数据序列颜色协调一致。
背景颜色:信息中心背景和文本块背景的十六进制颜色代码。
上边距:您可以选择为信息中心顶部的边距设置特定值。从下拉菜单中的预定义选项中进行选择。边距以像素 (px) 为单位。
下边距:可以选择性地为信息中心的下边距设置特定值。从下拉菜单中的预定义选项中进行选择。边距以像素 (px) 为单位。
边距侧:可以选择为信息中心两侧的边距设置特定值。从下拉菜单中的预定义选项中进行选择。边距以像素 (px) 为单位。
信息中心图块
标题颜色:以下元素的十六进制颜色代码:
文字颜色:以下元素的十六进制颜色代码:
正文颜色:以下元素的十六进制颜色代码:
背景颜色:除文字块以外的所有块的背景的十六进制颜色代码。(文字块使用与信息中心相同的背景颜色,该颜色通过信息中心页面部分中的背景颜色进行设置。)
标题对齐方式:将功能块标题的对齐方式设置为左对齐、右对齐或居中对齐。
标题字号:您可以选择调整信息中心功能块的字号,从一组预定义的字号(以像素为单位)中进行选择。
框阴影:使用 CSS 语法在信息中心图块周围创建阴影。您可以从预定义的框阴影中进行选择,也可以创建自定义框阴影。如需创建自定义框阴影,请输入所需的 horizontal-offset vertical-offset blur-radius spread-radius color
,然后选择输入自定义样式以应用您的设置。右侧会显示框阴影设置的预览效果。
列间距大小:您可以选择从一组预定义的像素大小中调整信息中心图块列之间的间距大小。
行间距大小:您可以选择调整信息中心图块行之间的间距大小,从一组预定义的像素大小中进行选择。
边框半径:您可以选择性地调整信息中心图块的边框半径,以创建方形或圆角。
信息中心控件
显示信息中心标题:停用此选项可隐藏整个信息中心标题,包括所有信息中心过滤条件和控件。停用此选项后,所有其他信息中心控制选项都会被取消选中并停用。
Display Dashboard Title:选中此复选框可显示信息中心的标题。
将信息中心标题居中:选中此复选框可在信息中心内居中显示信息中心标题。如果未启用此选项,信息中心标题将左对齐。只有在启用显示信息中心标题选项后,此选项才可用。
显示过滤条件栏:选中此复选框可在信息中心顶部显示过滤条件栏。如果未选择此选项,系统会取消选择并停用显示过滤条件切换开关选项,从而隐藏信息中心过滤条件图标。
显示过滤条件切换开关:选中此复选框可显示信息中心过滤条件图标。
显示信息中心上次更新时间指示图标:选中此复选框可显示信息中心上次更新时间指示图标。
显示重新加载数据图标:选中此复选框可显示信息中心重新加载数据图标。
显示信息中心菜单:选中此复选框可显示三点状信息中心菜单。取消选择此选项后,信息中心菜单选项将不可用。
探索页面
在自定义主题中,您可以调整嵌入式“探索”页面上的以下元素:
显示标题:停用此选项可隐藏嵌入式探索的整个标题,包括标题、上次运行指示器、数据时区、运行按钮和探索操作齿轮菜单。
显示标题:停用此选项可隐藏嵌入式探索的标题。
显示上次运行时间:停用此选项可隐藏探索的上次运行时间。
显示时区:停用此选项可隐藏嵌入式探索中的数据时区。
显示“运行”按钮:停用此选项可隐藏嵌入式探索中的运行按钮。
显示“操作”按钮:停用此选项可隐藏嵌入式探索中的“探索操作”齿轮菜单。
Look 页面
在自定义主题中,您可以调整嵌入式 Look 中的以下元素:
显示标题:停用此选项可隐藏嵌入式 Look 的整个标题,包括标题、上次运行指示器、数据时区、运行按钮和探索操作齿轮菜单。
显示标题:停用此选项可隐藏嵌入式 Look 的标题。
显示上次运行时间:停用此选项可隐藏 Look 的上次运行时间。
显示时区:停用此选项可隐藏嵌入式 Look 中数据的时区。
显示“运行”按钮:停用此选项可隐藏嵌入式 Look 中的“运行”按钮。停用在嵌入式 Look 中显示过滤条件后,此切换开关将不会显示运行按钮。
显示“操作”按钮:停用此选项可隐藏嵌入式 Look 中的“探索操作”齿轮状菜单。
复制主题
您可以复制现有主题,方法是选择相应主题的菜单,然后选择复制主题。
复制主题时,新主题的名称默认与所复制主题的名称相同,只是后面会附加“(副本)”字样。请务必手动将此名称更改为仅包含字母数字字符和下划线的新唯一名称,并务必移除圆括号。
您可以像创建新主题时一样修改其余设置。如需了解相关设置的说明,请参阅前面介绍的主题设置。请务必选择保存,以保留所有主题设置。
修改主题
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
实参。