Puedes usar temas personalizados para personalizar el aspecto de tus paneles, looks y exploraciones de Looker incorporados. Puedes usar temas para personalizar la familia de fuentes, el color del texto, el color de fondo, el color de los botones, el color de las tarjetas y otros elementos visuales.
Por ejemplo, puedes crear un tema "oscuro" para cambiar el aspecto de tu panel incorporado.
Para obtener información sobre cómo establecer un tema predeterminado para tus paneles y Exploraciones, o para aplicar un tema a un panel o una Exploración específicos, consulta la página de documentación Cómo comenzar a incorporar: aplica temas personalizados.
Puedes definir temas para paneles incorporados, Exploraciones incorporadas y la ventana de edición de tarjetas en un panel incorporado desde la página Temas en la sección Plataforma del panel Administrador.
En esta página, se describe lo siguiente:
- Requisitos
- El tema predeterminado de Looker
- Cómo se aplican los temas a los paneles y las exploraciones incorporados
- Cómo crear, copiar, editar y borrar un tema personalizado
- Cómo configurar un tema predeterminado para los paneles y las exploraciones
- Cómo aplicar un tema que no sea el predeterminado a paneles y Exploraciones seleccionados
- Cómo aplicar el argumento de URL
_themepara seleccionar elementos del tema del panel
Requisitos
Para administrar temas en tu instancia de Looker, debes cumplir con los siguientes requisitos:
- Si tu instancia es de Looker (original), Looker debe habilitar la función que te permite personalizar temas para paneles, exploraciones y diseños incorporados. Comunícate con un especialista en ventas de para actualizar tu licencia de esta función.
- Si tu instancia es de Looker (Google Cloud Core), los temas incorporados están disponibles para las ediciones Enterprise y Embed, pero no para la edición Estándar.
- Tu usuario de Looker debe tener el rol de administrador o el permiso
manage_themes.
Tema predeterminado
El tema predeterminado de Looker se crea automáticamente en tu instancia y no se puede borrar ni editar. El tema Looker se usa como tema predeterminado, a menos que un administrador de Looker especifique otro tema como predeterminado.
La configuración del tema Looker, que puedes ver si seleccionas el botón Ver junto al tema o si creas una copia del tema, se agrupa en las siguientes secciones:
Tema
| Nombre del parámetro de configuración | Valor |
|---|---|
| Nombre | Looker |
General
La configuración de esta sección se aplica a los paneles y a las Exploraciones incorporados.
| Nombre del parámetro de configuración | Valor | Notas |
|---|---|---|
| Color de las teclas | #1A73E8 |
Los paneles usan este color para los botones principales y los controles de filtros.Las exploraciones usan este color para los botones principales, los banners y los detalles. |
| Color del texto | #3e3f40 |
|
| Color de fondo | #f6f8fa |
|
| Familia de fuentes | 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 | La aplicación de Looker entrega estas fuentes, que se recomiendan porque estarán disponibles en los navegadores y cuando se rendericen las imágenes. Looker usa la primera fuente de la lista de familia de fuentes que admite un carácter, por lo que las fuentes especializadas o de prioridad más alta deben aparecer primero. Looker usa las variaciones de "IU" de las fuentes cuando están disponibles para que los caracteres se modifiquen ligeramente y se ajusten mejor a los límites de los componentes visuales. |
| Origen de la fuente | Ninguno |
Página del panel
| Nombre del parámetro de configuración | Valor |
|---|---|
| Colección de colores | Ninguno |
| Color de fondo | #f6f8fa |
Mosaicos del panel
| Nombre del parámetro de configuración | Valor |
|---|---|
| Color del título | #3a4245 |
| Color del texto | #3a4245 |
| Color del cuerpo del texto | Ninguno |
| Color de fondo | #ffffff |
| Alineación del título | Centro |
Controles del panel
| Nombre del parámetro de configuración | Valor |
|---|---|
| Mostrar título del panel | Sí |
| Mostrar barra de filtros | Sí |
Explorar página
| Nombre del parámetro de configuración | Valor |
|---|---|
| Mostrar encabezado | Sí |
| Mostrar título | Sí |
| Mostrar última ejecución | Sí |
| Mostrar la zona horaria | Sí |
| Mostrar botón Ejecutar | Sí |
| Mostrar botón de configuración | Sí |
Visualizar página
| Nombre del parámetro de configuración | Valor |
|---|---|
| Mostrar encabezado | Sí |
| Mostrar título | Sí |
| Mostrar última ejecución | Sí |
| Mostrar la zona horaria | Sí |
| Mostrar botón Ejecutar | Sí |
| Mostrar botón de configuración | Sí |
A continuación, se muestran ejemplos de un panel, la ventana de edición de una tarjeta de panel y una exploración con el tema Looker.
Ejemplo de un panel con el tema de Looker
Ejemplo de una ventana de edición de tarjetas de panel con el tema de Looker
Ejemplo de una página Explorar con el tema de Looker
Cómo se aplican los temas y la configuración de incorporación
Puedes cambiar el aspecto de un panel incorporado o de Explorar desde el tema predeterminado con temas personalizados y argumentos de URL. Cuando se muestra un panel incorporado o Explorar, Looker aplica la configuración en el siguiente orden:
- Comienza con la configuración del tema predeterminado.
- Aplica la configuración del tema personalizado que se especifica en el argumento
themede la URL, si corresponde. - Aplica las propiedades especificadas en el argumento de URL
_theme, si corresponde (solo para paneles)
Cada elemento anula los anteriores, lo que significa que la configuración de incorporación anula la configuración del tema predeterminado, y los temas personalizados anula la configuración de incorporación y los temas predeterminados.
Sin embargo, en el caso del argumento de URL _theme, solo los elementos que se especifican en el argumento _theme anulan los elementos de los otros temas o de la configuración de incorporación. Se seguirá utilizando el resto de la configuración del tema personalizado y de la incorporación. Por ejemplo, si agregas el argumento _theme={"show_filters_bar":false} en la URL de un panel incorporado, no se mostrará la barra de filtros, incluso si activaste Mostrar filtros en la configuración de incorporación o en un tema personalizado. Sin embargo, se seguirá usando la otra configuración del tema personalizado o de la configuración de incorporación.
Las descargas de paneles mostrarán cualquier tema personalizado aplicado.
Cómo crear un tema personalizado
Para crear un tema personalizado, selecciona Agregar tema:
A continuación, agrega especificaciones de estilo y color para cada configuración deseada en la página Nuevo tema.
Excepto por el título del tema, que debe ser único, todos los campos se completan automáticamente con los valores del tema predeterminado. Puedes cambiar cualquiera de los parámetros de configuración que se describen en las siguientes secciones. Selecciona Guardar tema para conservar los cambios y guardar el tema nuevo.
Tema
Nombre: El nombre del tema debe ser único y solo puede contener caracteres alfanuméricos y guiones bajos. Si ingresas espacios en el nombre del tema, estos se reemplazarán por guiones bajos cuando lo guardes.
General
La configuración de esta sección se aplica a los paneles y a las Exploraciones incorporados.
Color clave: Los paneles usan este color para los botones principales y los controles de filtros. Explorar usa este color para los vínculos y los íconos del selector de campos, los botones principales, los banners y los detalles.
Color de texto: Es el código hexadecimal del color del texto en Exploraciones y paneles.
Color de fondo: Es el código de color hexadecimal para el fondo de las páginas Explorar y del panel.
Familia de fuentes: Es el nombre de la familia de fuentes. Esta fuente se usará para todo el texto del panel, incluidos los títulos de las tarjetas, las tarjetas de texto y las leyendas en las visualizaciones. Esta fuente también se usará para todo el texto de una función Explorar. Si hay un espacio en el nombre de la fuente, usa comillas, como "Open Sans".
- Si usas una fuente común segura para la Web, puedes escribir el nombre de la fuente en el campo Font Family y dejar en blanco el campo Font Source. Si quieres usar una fuente menos común, ingresa el nombre de la fuente en el campo Familia de fuentes y, luego, usa el campo Fuente de la fuente, que se describe a continuación, para proporcionar una URL a la definición de la fuente que quieres usar.
Origen de la fuente: Deja este campo en blanco, a menos que quieras usar una fuente personalizada, es decir, una fuente que no sea una fuente común segura para la Web. La fuente de la fuente debe ser una URL completa que comience con https y apunte al valor url que se especifica en el argumento src de @font-face. Te recomendamos que uses un archivo en formato de fuente abierta web (.woff), ya que Internet Explorer 11 no admite archivos .woff2.
- Por ejemplo, para PT Sans Narrow, puedes ingresar "PT Sans Narrow" en el campo Familia de fuentes y, luego, ingresar
https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woffen el campo Fuente de la fuente.
Ejemplo de una función Explorar incorporada con un tema personalizado
En el siguiente ejemplo, se muestra una función Explorar incorporada que tiene un tema personalizado. El Key Color se establece en #e82042 y la Font Family se establece en Verdana.
Cuando ejecutas una función Explorar en un parámetro de configuración incorporado, el texto de la función Explorar aparece en la fuente Font Family especificada, Verdana. Los colores de los elementos destacados, los botones y los vínculos aparecen en el Color de la clave especificado, #e82042:
Después de ejecutar una exploración, el contorno y el texto del botón Run aparecen en el Key Color especificado, #e82042:
Ejemplo de una ventana de edición de tarjetas de panel incorporada con un tema personalizado
Además de los elementos de Explorar que se describieron en la sección anterior, cuando editas una tarjeta del panel, el banner aparece en el tono que se especifica en el parámetro de configuración Key Color (#e82042) y la fuente que se especifica en el parámetro de configuración Font Family (Verdana):
Página del panel
Colección de colores: De manera opcional, puedes elegir una colección de colores, que es un conjunto de paletas de colores coordinados que funcionan bien juntos. Cuando asignas una colección de colores a un panel, todas las series de datos de todas las tarjetas del panel se colorean según las paletas de la colección, lo que garantiza que los colores de las series de datos estén coordinados en todo el panel.
- Cuando asignas una colección de colores a un tema incorporado, la colección de colores del tema anula cualquier colección de colores que se haya asignado anteriormente a una tarjeta. Sin embargo, la colección de colores de un tema no anulará los colores personalizados asignados a una serie de datos ni el formato condicional aplicado a una visualización de tabla.
Color de fondo: Es el código de color hexadecimal para el fondo del panel y el fondo de las tarjetas de texto.
Margen superior: De manera opcional, establece un valor específico para el margen en la parte superior de un panel. Elige entre opciones predefinidas en un menú desplegable. Los márgenes se miden en píxeles (px).
Margen inferior: De manera opcional, establece un valor específico para el margen en la parte inferior de un panel. Elige entre opciones predefinidas en un menú desplegable. Los márgenes se miden en píxeles (px).
Margen lateral: De manera opcional, establece un valor específico para el margen de los lados de un panel. Elige entre opciones predefinidas en un menú desplegable. Los márgenes se miden en píxeles (px).
Mosaicos del panel
Color del título: Es el código de color hexadecimal de los siguientes elementos:
- Título del panel
- Títulos de las tarjetas del panel
- Títulos y texto de encabezado de nivel 1 de tarjetas Markdown
- Color del texto de las visualizaciones de un solo valor
Color de texto: Es el código de color hexadecimal de los siguientes elementos:
- Texto en el panel, incluidas las leyendas en las visualizaciones
- Subtítulos y texto del cuerpo, con la excepción del texto del encabezado de nivel 1, de las tarjetas de Markdown
- Encabezado de nivel 1, encabezado de nivel 2 y texto normal en tarjetas de texto
- Íconos de tarjetas en visualizaciones de un solo valor
Color del cuerpo de texto: Es el código de color hexadecimal de los siguientes elementos:
- Texto del cuerpo, con la excepción del texto de los encabezados de nivel 2 y 3, en tarjetas Markdown
- Texto del cuerpo en mosaicos de texto
Color de fondo: Es el código de color hexadecimal para el fondo de todas las tarjetas, excepto las de texto. (Las tarjetas de texto usan el mismo color de fondo que el panel, que se establece con la opción Color de fondo en la sección Página del panel).
Alineación del título: Establece la alineación de los títulos de las tarjetas a la izquierda, a la derecha o en el centro.
Tamaño de la fuente del título: De manera opcional, ajusta el tamaño de la fuente de las tarjetas del panel a partir de un conjunto de tamaños predefinidos en píxeles.
Sombra de cuadro: Crea una sombra alrededor de las tarjetas del panel con la sintaxis CSS. Puedes elegir entre una sombra de cuadro predefinida o crear una personalizada. Para crear una sombra de cuadro personalizada, ingresa el horizontal-offset vertical-offset blur-radius spread-radius color que desees y selecciona Ingresar diseño personalizado para aplicar la configuración. A la derecha, se muestra una vista previa de la configuración de la sombra del cuadro.
Tamaño de la separación entre columnas: De manera opcional, ajusta el tamaño del espacio entre las columnas de las tarjetas del panel a partir de un conjunto de tamaños predefinidos en píxeles.
Tamaño de la separación entre filas: De manera opcional, ajusta el tamaño del espacio entre filas de tarjetas del panel a partir de un conjunto de tamaños predefinidos en píxeles.
Radio del borde: De forma opcional, ajusta el radio del borde de las tarjetas del panel para crear esquinas cuadradas o redondeadas.
Controles del panel
Mostrar encabezado del panel: Inhabilita esta opción para ocultar todo el encabezado del panel, incluidos todos los filtros y controles del panel. Cuando esta opción está inhabilitada, se anula la selección y se inhabilitan todas las demás opciones de control del panel.
Mostrar título del panel: Selecciona la casilla de verificación para mostrar el título del panel.
Centrar el título del panel: Selecciona esta casilla de verificación para mostrar el título del panel centrado y alineado en el panel. Cuando esta opción no está habilitada, el título del panel se alinea a la izquierda. Esta opción solo está disponible si se habilitó la opción Mostrar título del panel.
Mostrar barra de filtros: Selecciona la casilla de verificación para mostrar la barra de filtros en la parte superior del panel. Si no se selecciona esta opción, se anula la selección y se inhabilita la opción Activar filtros de visualización, lo que oculta el ícono de filtros del panel.
Botón de activación para mostrar los filtros: Selecciona la casilla de verificación para mostrar el ícono de filtros del panel.
Mostrar indicador de última actualización del panel: Selecciona la casilla de verificación para mostrar el indicador de última actualización del panel.
Mostrar ícono para volver a cargar datos: Selecciona la casilla de verificación para mostrar el ícono para volver a cargar datos del panel.
Mostrar menú del panel: Selecciona la casilla de verificación para mostrar el menú del panel de tres puntos. Si se anula la selección de esta opción, las opciones del menú del panel no estarán disponibles.
Explorar página
En un tema personalizado, puedes ajustar los siguientes elementos en las páginas de Explorar incorporadas:
Mostrar encabezado: Inhabilita esta opción para ocultar todo el encabezado de una exploración incorporada, incluido el título, el indicador de la última ejecución, la zona horaria de los datos, el botón Ejecutar y el menú de ajustes Acciones de exploración.
Mostrar título: Inhabilita esta opción para ocultar el título de una función Explorar incorporada.
Mostrar última ejecución: Inhabilita esta opción para ocultar hace cuánto tiempo se ejecutó Explorar.
Mostrar zona horaria: Inhabilita esta opción para ocultar la zona horaria de los datos en una exploración incorporada.
Mostrar botón Ejecutar: Inhabilita esta opción para ocultar el botón Ejecutar en una función Explorar incorporada.
Botón Mostrar acciones: Inhabilita esta opción para ocultar el menú de ajustes de Acciones de exploración en una experiencia de exploración incorporada.
Visualizar página
Dentro de un tema personalizado, puedes ajustar los siguientes elementos en los aspectos incorporados:
Mostrar encabezado: Inhabilita esta opción para ocultar todo el encabezado de un aspecto incorporado, incluido el título, el indicador de la última ejecución, la zona horaria de los datos, el botón Ejecutar y el menú de ajustes Explorar acciones.
Mostrar título: Inhabilita esta opción para ocultar el título de una vista incorporada.
Mostrar última ejecución: Inhabilita esta opción para ocultar hace cuánto se ejecutó el aspecto.
Mostrar zona horaria: Inhabilita esta opción para ocultar la zona horaria de los datos en un aspecto incorporado.
Mostrar botón Ejecutar: Inhabilita esta opción para ocultar el botón Ejecutar en un aspecto incorporado. Cuando se inhabilita Mostrar filtros en las vistas incorporadas, este botón de activación no muestra el botón Ejecutar.
Botón Mostrar acciones: Inhabilita esta opción para ocultar el menú de ajustes de Explorar acciones en un aspecto incorporado.
Cómo copiar un tema
Para copiar un tema existente, selecciona el menú del tema y, luego, Copiar tema.
Cuando creas una copia de un tema, el nombre del tema nuevo se establece de forma predeterminada como el nombre del tema copiado, seguido de "(copia)". Asegúrate de cambiar este nombre de forma manual a uno nuevo y único con solo caracteres alfanuméricos y guiones bajos, y de quitar los paréntesis.
Puedes editar el resto de la configuración de la misma manera que lo harías cuando creas un tema nuevo. Para obtener una descripción de la configuración, consulta la configuración del tema que se describió anteriormente. Asegúrate de seleccionar Guardar para conservar toda la configuración del tema.
Cómo editar un tema
El tema Looker se crea automáticamente en tu instancia y no se puede editar. (Si quieres modificar el tema Looker, puedes crear una copia del tema y, luego, editarla).
Para todos los demás temas, puedes seleccionar el botón Editar asociado para actualizar la configuración del tema.
Puedes editar la configuración de la misma manera que lo harías cuando creas un tema nuevo. Para obtener una descripción de la configuración, consulta la configuración de temas que se describió anteriormente. Asegúrate de seleccionar Guardar para conservar las actualizaciones.
Cómo borrar un tema
Puedes borrar cualquier tema, excepto el tema Looker o el que está configurado como predeterminado. Para borrar un tema, selecciona el menú del tema y, luego, Borrar tema.
Después de borrar un tema, cualquier panel incorporado que tenga ese tema especificado en su URL usará el tema predeterminado.
Cómo establecer un tema predeterminado para los paneles y las exploraciones incorporados
Los temas personalizados no son compatibles con los aspectos incorporados. Los temas personalizados solo están disponibles para los paneles y las exploraciones incorporados.
Para especificar el tema predeterminado de los paneles y Explorar incorporados en tu instancia, selecciona el menú de un tema y, luego, Establecer como predeterminado.
El tema predeterminado se usa para los paneles y las exploraciones incorporados en tu instancia de Looker, a menos que especifiques una configuración diferente para un panel o una exploración individuales. Consulta la sección Cómo se aplican los temas y la configuración de incorporación en esta página para obtener más información sobre cómo se aplican los temas y la configuración de incorporación a un panel incorporado o a Explorar.
Aplica un tema a paneles y exploraciones incorporados específicos
Los temas personalizados no son compatibles con los aspectos incorporados. Los temas personalizados solo están disponibles para los paneles y las exploraciones incorporados.
Si deseas que un panel o una exploración usen un tema diferente del predeterminado, puedes especificar uno en la URL del panel o la exploración incorporados. Para ello, agrega el parámetro theme= con el nombre del tema al final de la URL de incorporación. Por ejemplo, si tienes un tema llamado "Rojo", agregarías theme=Red al final de la URL del panel de incorporación:
https://example.cloud.looker.com/embed/dashboards/246?theme=red
En el caso de Explorar, debes agregar theme=Red al final de la URL de Explorar incorporada:
none
https://example.cloud.looker.com/embed/explore/model_name/explore_name?theme=red
El elemento de tema en la URL no distingue mayúsculas de minúsculas, por lo que puedes usar theme=Red o theme=red.
Usa el argumento de URL _theme para aplicar elementos de temas de panel individuales
Puedes usar el argumento de URL _theme para personalizar elementos de temas individuales para tu panel incorporado, como tile_background_color y show_title.
Este es el formato del argumento de URL _theme:
_theme={"<property>":value}
Por ejemplo, puedes usar _theme={"show_filters_bar":false} para ocultar la barra de filtros de tu panel incorporado. La URL completa podría verse de la siguiente manera:
https://example.cloud.looker.com/embed/dashboards/236?_theme={"show_filters_bar":false}
Usa una coma para especificar varias propiedades del tema:
_theme={"show_title":false,"show_filters_bar":false,"text_tile_text_color":"blue"}
Los valores de color deben estar entre comillas y se pueden expresar con el nombre del color o con el código hexadecimal. Si usas un código hexadecimal, asegúrate de usar la versión codificada en URL del signo #, que es %23. Por ejemplo, ambos argumentos de URL especifican el color rojo:
_theme={"title_color":"red","text_tile_text_color":"%23FF0000"}
Estos son algunos aspectos que debes tener en cuenta cuando uses el objeto _theme para un panel incorporado:
- Cualquier elemento que se especifique en el argumento de URL
_themeanulará la configuración de ese elemento en cualquier otro tema. Esto hace que el argumento_themesea una forma práctica de definir mejor los temas o incorporar parámetros de configuración. Por ejemplo, supongamos que tienes un tema personalizado que oculta la barra de filtros, pero tienes un panel en el que tendría sentido que se muestre. Puedes usar el tema personalizado para tu panel y, luego, agregar el argumento_theme={"show_filters_bar":true}en la URL del panel incorporado para mostrar la barra de filtros en ese panel, pero mantener todos los demás parámetros de configuración del tema personalizado. Consulta la sección Cómo se aplican los temas y la configuración de incorporación en esta página para obtener más información sobre cómo se aplican los temas y la configuración de incorporación a un panel incorporado. - En el caso de las secuencias de comandos de programación, debes codificar el argumento
_themeen formato de URL. - El argumento
_themeno se aplica cuando se entregan paneles incorporados en formato PDF. - El argumento
_themese aplica si descargas el panel como un PDF.