Puedes usar temas personalizados para personalizar el aspecto de tus paneles, vistas y exploraciones incorporados de Looker. 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 los mosaicos y otros elementos visuales.
Por ejemplo, puedes crear un tema "oscuro" para cambiar el aspecto del panel incorporado.
Si deseas obtener información para configurar un tema predeterminado para tus paneles y exploraciones, o sobre cómo aplicar un tema a un panel o una exploración específicos, consulta la página de documentación Comienza a usar la incorporación: aplica temas personalizados.
En un panel incorporado, puedes definir temas para los paneles incorporados, las exploraciones incorporadas y la ventana de edición de los mosaicos desde la página Temas, en la sección Plataforma del panel Administrador.
En esta página, se describe lo siguiente:
- El tema predeterminado de Looker
- Cómo se aplican los temas a las exploraciones y los paneles incorporados
- Cómo crear, copiar, editar y borrar un tema personalizado
- Cómo establecer un tema predeterminado para los paneles y las exploraciones
- Cómo aplicar un tema que no sea el predeterminado a las exploraciones y los paneles seleccionados
- Cómo aplicar el argumento de URL
_themepara seleccionar elementos de tema del panel
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 el tema predeterminado, a menos que un administrador de Looker especifique otro tema como predeterminado.
La configuración de temas de Looker, que puedes ver seleccionando el botón Ver junto al tema o creando una copia de este, se agrupa en las siguientes secciones:
- Tema
- General
- Página Panel de control
- Mosaicos del panel
- Controles del panel
- Página Explorar
- Página de vista
Tema
| Nombre del parámetro de configuración | Valor |
|---|---|
| Nombre | Looker |
General
La configuración de esta sección se aplica a los paneles incorporados y a las exploraciones incorporadas.
| Nombre del parámetro de configuración | Valor | Notas |
|---|---|---|
| Color de las teclas | #1A73E8 |
Los Paneles de control 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 Árabe UI, Noto Sans Devanagari UI, Noto Sans Hebreo, Noto Sans Thai, Helvetica, Arial, sans-serif | La aplicación de Looker entrega estas fuentes y se recomiendan porque estarán disponibles en los navegadores y cuando se rendericen las imágenes. Looker usa la primera fuente en la lista de la familia de fuentes que admite un carácter, por lo que las fuentes especializadas o de mayor prioridad deben mostrarse primero. Looker usa las variantes de fuentes de la “IU” cuando están disponibles, de modo que los caracteres se modifican ligeramente para que se ajusten mejor a los límites de los componentes visuales. |
| Origen de la fuente | Ninguna |
Página del panel
| Nombre del parámetro de configuración | Valor |
|---|---|
| Colección de colores | Ninguna |
| 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 | Ninguna |
| 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í |
Los siguientes son ejemplos de un panel, la ventana de edición de un mosaico del panel y una función Explorar con el tema Looker.
Ejemplo de un panel con el tema de Looker
Ejemplo de una ventana de edición de mosaicos 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 la función Explorar desde el tema predeterminado usando 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 que se especifican en el argumento de la URL
_theme, si corresponde (solo para paneles)
Cada elemento anula los elementos anteriores, lo que significa que la configuración de incorporación anula la configuración de temas predeterminada, y los temas personalizados anulan la configuración de inserción y los temas predeterminados.
Sin embargo, en el caso del argumento de URL _theme, solo los elementos especificados en el argumento _theme anulan los elementos de los otros temas o de la configuración de incorporación. Se seguirá usando el resto de la configuración de incorporación y del tema personalizado. Por ejemplo, si agregas el argumento _theme={"show_filters_bar":false} a 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án usando las demás opciones de configuración del tema personalizado o 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 Add Theme:
A continuación, agrega especificaciones de estilo y color para cada parámetro de configuración deseado en la página New Theme.
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 Save Theme 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 guardes el tema.
General
La configuración de esta sección se aplica a los paneles incorporados y a las exploraciones incorporadas.
Color de la clave: Los paneles usan este color para los botones principales y los controles de filtros. Las exploraciones usan este color para los íconos y vínculos del selector de campos, los botones principales, los banners y los detalles.
Color del texto: Es el código de color hexadecimal para el texto en las exploraciones y los paneles.
Color de fondo: Es el código de color hexadecimal para el fondo de las páginas de 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 los mosaicos, los mosaicos de texto y las leyendas de las visualizaciones. Esta fuente también se usará para todo el texto de una exploración. Si hay un espacio en el nombre de la fuente, escribe el nombre entre comillas, como "Open Sans".
- Si utilizas una fuente común segura para la Web, puedes escribir el nombre de la fuente en el campo Familia de fuentes y dejar en blanco el campo Fuente de la fuente. Si desea usar una fuente menos común, ingrese el nombre de la fuente en el campo Familia de fuentes y, luego, utilice el campo Fuente, que se describe a continuación, para proporcionar una URL a la definición de la fuente que desea utilizar.
Fuente de la fuente: Deja este campo en blanco, a menos que desees usar una fuente personalizada, es decir, una fuente que no sea una fuente común segura para la Web. Font Source debe ser una URL completa que comience con https y apunta al valor url que se especifica en el argumento src de @font-face. Te recomendamos que uses un archivo de formato de fuente abierta de web (.woff), ya que los archivos .woff2 no son compatibles con Internet Explorer 11.
- Por ejemplo, para PT Sans Narrow, puedes ingresar "PT Sans Narrow" en el campo Familia de fuentes y, luego, escribir
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 exploración incorporada que tiene un tema personalizado. El Color de clave está establecido en #e82042 y la Familia de fuentes, en Verdana.
Cuando ejecutas una exploración en un parámetro de configuración incorporado, el texto de esta herramienta aparece en la fuente Familia de fuentes especificada, Verdana. Los colores, botones y vínculos de los elementos destacados aparecen en el Color de clave, #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 mosaicos de panel incorporados con un tema personalizado
Además de los elementos de Explorar que se describieron en la sección anterior, cuando editas un mosaico de un panel, el banner aparecerá en el tono especificado en el parámetro de configuración Color de clave (#e82042) y la fuente especificada en el parámetro Familia de fuentes (Verdana):
Página del panel
Colección de colores: De forma opcional, puedes elegir una colección de colores, que es un conjunto de paletas coordinadas que funcionan bien juntas. Cuando asignas una colección de colores a un panel, todas las series de datos en todos los mosaicos del panel se colorean de acuerdo con las paletas de la colección, lo que garantiza que los colores de la serie de datos estén coordinados en todo el panel.
- Cuando asignas una colección de colores a un tema integrado, la colección de colores del tema anula cualquier colección de colores que se haya asignado anteriormente a un mosaico. Sin embargo, la colección de colores de un tema no anulará los colores personalizados asignados a una serie de datos ni anulará 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 los mosaicos de texto.
Margen superior: De manera opcional, establece un valor específico para el margen en la parte superior de un panel. Elige entre las 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 las opciones predefinidas en un menú desplegable. Los márgenes se miden en píxeles (px).
Margen laterales: De forma opcional, establece un valor específico para el margen en los costados de un panel. Elige entre las opciones predefinidas en un menú desplegable. Los márgenes se miden en píxeles (px).
Mosaicos del panel
Color del título: Código de color hexadecimal para los siguientes elementos:
- Título del panel
- Títulos de los mosaicos del panel
- Títulos y texto de nivel 1 de encabezado de los mosaicos de Markdown
- Color del texto de visualizaciones de un solo valor
Color del texto: Código de color hexadecimal para los siguientes elementos:
- Texto en el panel, incluidas las leyendas en las visualizaciones
- Subtítulos y texto del cuerpo, excepto el texto de nivel 1 de encabezado, de los mosaicos de Markdown
- Nivel de encabezado 1, nivel de encabezado 2 y texto normal en mosaicos de texto
- Íconos de tarjetas en visualizaciones de valor único
Color del cuerpo del texto: Es el código de color hexadecimal para los siguientes elementos:
- Texto del cuerpo, a excepción del nivel de encabezado 2 y texto de nivel de encabezado 3, en mosaicos de Markdown
- Cuerpo de texto en mosaicos de texto
Color de fondo: Es el código de color hexadecimal para el fondo de todos los mosaicos, excepto los de texto. (Los mosaicos de texto usan el mismo color de fondo que el panel, que se establece con el Color de fondo de la sección Página del panel).
Alineación del título: Establece la alineación de los títulos de las tarjetas hacia la izquierda, la derecha o el centro.
Title Font Size: De manera opcional, ajusta el tamaño de la fuente de los mosaicos del panel desde un conjunto de tamaños predefinidos en píxeles.
Box Shadow: Crea una sombra alrededor de los mosaicos del panel con la sintaxis CSS. Puedes seleccionar 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 estilo personalizado para aplicar la configuración. A la derecha, se muestra una vista previa de la configuración de sombras del cuadro.
Tamaño de la separación entre columnas: De manera opcional, ajusta el tamaño del espacio entre las columnas de los mosaicos del panel desde 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 las filas de los mosaicos del panel de un conjunto de tamaños predefinidos en píxeles.
Radio del borde: De manera opcional, ajusta el radio del borde de los mosaicos del panel para crear esquinas cuadradas o redondeadas.
Controles del panel
Mostrar encabezado del panel: Inhabilita esta opción para ocultar el encabezado del panel completo, incluidos todos los filtros y controles del panel. Cuando se inhabilita esta opción, se anula la selección de las demás opciones de control del panel y se inhabilitan.
Display Dashboard Title: Selecciona la casilla de verificación para mostrar el título del panel.
Center Dashboard Title: Selecciona esta casilla de verificación para mostrar el título del panel centrado en el panel. Si no se habilita esta opción, el título del panel se alinea a la izquierda. Esta opción solo está disponible si se habilitó la opción Display Dashboard Title.
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 inhabilitará y se anulará la selección de la opción Mostrar filtros, lo que oculta el ícono de filtros del panel.
Activar o desactivar filtros de visualización: 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 que se muestre el ícono para volver a cargar los datos en el panel.
Mostrar menú del panel: Selecciona la casilla de verificación para mostrar el menú del panel de tres puntos. Si no seleccionas esta opción, las opciones del menú del panel no estarán disponibles.
Explorar página
Dentro de un tema personalizado, puedes ajustar los siguientes elementos de las páginas incorporadas de Explorar:
Mostrar encabezado: Inhabilita esta opción para ocultar todo el encabezado de una exploración incorporada, incluidos 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 de Acciones de exploración.
Mostrar título: Inhabilita esta opción para ocultar el título de una exploración incorporada.
Mostrar última ejecución: Inhabilita esta opción para ocultar la última vez que se ejecutó la exploración.
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 exploración incorporada.
Botón Mostrar acciones: Inhabilita esta opción para ocultar el menú de ajustes de acciones de la exploración en una exploración incorporada.
Visualizar página
Dentro de un tema personalizado, puedes ajustar los siguientes elementos en las vistas incorporadas:
Mostrar encabezado: Inhabilita esta opción para ocultar todo el encabezado de una vista 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 de 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 tiempo se ejecutó la vista.
Mostrar zona horaria: Inhabilita esta opción para ocultar la zona horaria de los datos en una vista incorporada.
Mostrar botón Ejecutar: Inhabilita esta opción para ocultar el botón Ejecutar en una vista incorporada. Cuando la opción Mostrar filtros en vistas incorporadas está inhabilitada, este botón de activación no muestra el botón Ejecutar.
Botón de acciones de pantalla: Inhabilita esta opción para ocultar el menú de ajustes de acciones de la exploración en una vista incorporada.
Cómo copiar un tema
Para copiar un tema existente, selecciona el menú del tema y elige Copy Theme.
Cuando haces una copia de un tema, el nombre del tema nuevo se convierte de manera predeterminada en el del tema copiado, seguido de "(copy)". Asegúrate de cambiar manualmente este nombre por uno nuevo y único que solo contenga caracteres alfanuméricos y guiones bajos, y quita los paréntesis.
Puedes editar el resto de la configuración como 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 todos los parámetros de configuración de temas.
Cómo editar un tema
El tema de Looker se crea automáticamente en tu instancia y no se puede editar. (Si deseas modificar el tema de 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 tal como 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 de Looker o el que actualmente está configurado como predeterminado. Para borrar un tema, selecciona su menú 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.
Establece un tema predeterminado para los paneles incorporados y las exploraciones
No se admiten los temas personalizados en las vistas incorporadas. Los temas personalizados solo están disponibles en los paneles incorporados y en las exploraciones incorporadas.
Para especificar el tema predeterminado de los paneles incorporados y las exploraciones en tu instancia, selecciona el menú de un tema y elige Establecer como predeterminado.
El tema predeterminado se usa para los paneles incorporados y las exploraciones en tu instancia de Looker, a menos que especifiques una configuración diferente para un panel individual o para Explorar. 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.
Aplicación de un tema a exploraciones y paneles incorporados específicos
No se admiten los temas personalizados en las vistas incorporadas. Los temas personalizados solo están disponibles en los paneles incorporados y en las exploraciones incorporadas.
Si quieres que un panel o una exploración usen un tema distinto del predeterminado, puedes especificar un tema diferente en la URL del panel incorporado o en la función Explorar. Para ello, agrega el parámetro theme= con el nombre del tema al final de la URL incorporada. Por ejemplo, si tienes un tema llamado "Rojo", agrega 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 las exploraciones, agrega theme=Red al final de la URL de exploración incorporada: none
https://example.cloud.looker.com/embed/explore/model_name/explore_name?theme=red
El elemento del tema de 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 tema del 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 para el 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 de 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 de color 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"}
A continuación, se incluyen algunos aspectos que se deben tener en cuenta cuando se usa el objeto _theme en un panel incorporado:
- Cualquier elemento que se especifique en el argumento de la URL
_themeanulará la configuración para ese elemento en cualquier otro tema. Esto hace que el argumento_themesea una forma práctica de definir mejor los temas o incorporar configuraciones. Por ejemplo, supongamos que tienes un tema personalizado que oculta la barra de filtros, pero tienes un panel en el que tendría sentido mostrar la barra de filtros. 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 todas las demás configuraciones de temas personalizados. 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. - Para las secuencias de comandos de programación, debes codificar en formato URL el argumento
_theme. - El argumento
_themeno se aplica cuando se entregan paneles incorporados en formato PDF. - El argumento
_themese aplica si descargas el panel como PDF.