Puedes usar temas personalizados para modificar 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 mosaicos y otros elementos visuales.
Por ejemplo, puedes crear un tema "oscuro" para cambiar la apariencia de tu panel incorporado.
Si deseas obtener información para 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 Introducción a la incorporación y aplicación de temas personalizados.
Puedes definir temas para paneles incorporados, exploraciones incorporadas y la ventana de edición de mosaicos 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:
- El tema predeterminado de Looker
- Cómo se aplican los temas en 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 del 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 de Looker se usa como tema predeterminado, a menos que un administrador de Looker especifique otro tema como predeterminado.
Los parámetros de configuración del tema de Looker, que puedes ver seleccionando el botón Ver junto al tema o creando una copia de este, se agrupan en las siguientes secciones:
Tema
| Nombre del parámetro de configuración | Valor |
|---|---|
| Nombre | Looker |
General
Los parámetros de configuración de esta sección se aplican 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 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 elementos destacados. |
| 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 Heber, Noto Sans Thai UI, Helvetica, Arial, sans-serif | La aplicación de Looker proporciona estas fuentes y se recomiendan porque estarán disponibles en navegadores y cuando se rendericen las imágenes. Looker usa la primera fuente de la lista de la familia de fuentes que admite un carácter, por lo que las fuentes especializadas o de mayor prioridad deben aparecer primero. Looker usa las variaciones de la “IU” de las fuentes cuando están disponibles, de modo que los caracteres se modifiquen ligeramente para adaptarse 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í |
A continuación, se muestran ejemplos de un panel, la ventana de edición de un mosaico del panel y una exploración con el tema de Looker.
Ejemplo de un panel con el tema de Looker
Ejemplo de una ventana de edición de mosaicos del 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 una Exploración a partir del tema predeterminado mediante temas personalizados y argumentos de URL. Cuando se muestra un panel incorporado o una exploración, Looker aplica los parámetros de 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 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 predeterminados, y los temas personalizados anulan la configuración de incorporació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 los temas personalizados y la configuración de incorporación. 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 los demás parámetros de configuración del tema personalizado o de la incorporación.
Las descargas de paneles mostrarán los temas personalizados aplicados.
Cómo crear un tema personalizado
Para crear un tema personalizado, selecciona Add Theme (Agregar tema):
A continuación, agrega especificaciones de estilo y color para cada parámetro de configuración deseado en la página New Theme.
A excepción del 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 puede contener solo 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
Los parámetros de configuración de esta sección se aplican a los paneles incorporados y a las Exploraciones incorporadas.
Color de las claves: Los paneles usan este color para los botones principales y los controles de filtros. Las Exploraciones usan este color para los vínculos y los íconos del selector de campos, los botones principales, los banners y los elementos destacados.
Color del texto: Es el código de color hexadecimal del texto que aparece en Exploraciones y paneles.
Color de fondo: Es el código de color hexadecimal del 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 los mosaicos, los mosaicos de texto y las leyendas en 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, usa comillas alrededor de él, por ejemplo, "Open Sans".
- Si utilizas una fuente común segura para la Web, puedes escribir el nombre de la fuente en el campo Font Family y dejar el campo Font Source en blanco. Si deseas 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 deseas utilizar.
Fuente de fuente: Deja este campo en blanco, a menos que quieras usar una fuente personalizada (una que no sea una fuente común segura para la Web). Font Source debe ser una URL completa que comience con https y apunte al valor url especificado en el argumento src de @font-face. Recomendamos usar un archivo web con formato de fuente abierta (.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 Font Family y, luego, ingresar
https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woffen el campo Font Source.
Ejemplo de una exploración incorporada con un tema personalizado
En el siguiente ejemplo, se muestra una exploración incorporada que tiene un tema personalizado. El Color de clave se establece 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 Explorar aparece en la fuente especificada de la Familia de fuentes, Verdana. Los colores de los elementos destacados, los botones y los vínculos aparecen en el color clave especificado, #e82042:
Después de ejecutar una exploración, el contorno del botón Run y el texto aparecerán en el color clave especificado, #e82042:
Ejemplo de una ventana de edición de mosaicos del panel incorporada con un tema personalizado
Además de los elementos de Explorar descritos en la sección anterior, cuando editas un mosaico del panel, el banner aparecerá en el matiz especificado en el parámetro de configuración Color clave (#e82042) y la fuente especificada en el parámetro Familia de fuentes (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 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 según 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 incorporado, la colección de colores del tema anulará cualquier colección de colores que se haya asignado previamente 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 anulará el formato condicional aplicado a una visualización de tabla.
Color de fondo: Es el código de color hexadecimal del fondo del panel y el fondo de los mosaicos de texto.
Margen superior: De manera opcional, puedes establecer un valor específico para el margen en la parte superior del panel. Elige entre las opciones predefinidas en un menú desplegable. Los márgenes se miden en píxeles (px).
Margen inferior: De manera opcional, puedes establecer 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 lateral: De manera 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: Es el 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 del encabezado de los mosaicos de Markdown
- Color del texto de las visualizaciones de valor único
Color de texto: Es el 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, con la excepción del texto de nivel 1 del encabezado, de los mosaicos de Markdown
- Nivel de encabezado 1, nivel de encabezado 2 y texto normal en mosaicos de texto
- Íconos de tarjeta en visualizaciones de un solo valor
Color del cuerpo del texto: Es el código de color hexadecimal de los siguientes elementos:
- Texto del cuerpo, con la excepción del nivel de encabezado 2 y el nivel 3, en mosaicos de Markdown
- Texto de cuerpo en mosaicos de texto
Color de fondo: Es el código de color hexadecimal del fondo de todos los mosaicos, excepto los de texto. (Los mosaicos de texto usan el mismo color de fondo que el panel, que se configura usando el Color de fondo en la sección Página del panel).
Alineación de títulos: Define la alineación de los títulos de mosaicos a la izquierda, a la derecha o al centro.
Tamaño de fuente del título: Opcionalmente, ajusta el tamaño de la fuente de los mosaicos del panel desde un conjunto de tamaños predefinidos en píxeles.
Sombra de cuadro: Crea una sombra alrededor de los mosaicos del panel con la sintaxis de 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 deseado y selecciona Ingresar estilo personalizado para aplicar la configuración. Se muestra una vista previa de la configuración de la sombra del cuadro a la derecha.
Column Gap Size: De manera opcional, ajusta el tamaño del espacio entre las columnas de los mosaicos del panel a partir de un conjunto de tamaños predefinidos en píxeles.
Row Gap Size: De manera opcional, puedes ajustar el tamaño del espacio entre las filas de los mosaicos del panel a partir de un conjunto de tamaños predefinidos en píxeles.
Radio del borde: De manera opcional, ajusta el radio de los bordes 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 esta opción está inhabilitada, todas las demás opciones de control del panel se anulan 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 alineado al centro. 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 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. Cuando no se selecciona esta opción, se inhabilita y se anula la selección de la opción Mostrar filtros, lo que oculta el ícono de filtros del panel.
Activar o desactivar visualización de filtros: Selecciona la casilla de verificación para mostrar el ícono de filtros del panel.
Mostrar el indicador de última actualización del panel: Selecciona la casilla de verificación para mostrar el indicador de última actualización del panel.
Mostrar el ícono Volver a cargar los datos: Selecciona la casilla de verificación para mostrar el ícono Volver a cargar el panel.
Mostrar menú del panel: Selecciona la casilla de verificación para mostrar el menú del panel de tres puntos. Cuando se anula la selección de esta opción, las opciones del menú del panel no está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 Explorar acciones.
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 cuánto tiempo 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 de mostrar acciones: Inhabilita esta opción para ocultar el menú de ajustes de Explorar acciones 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 Explorar acciones.
Título visible: Inhabilita esta opción para ocultar el título de una vista incorporada.
Mostrar última ejecución: Inhabilita esta opción para ocultar 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 el 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 mostrar acciones: Inhabilita esta opción para ocultar el menú de ajustes de Explorar acciones en una vista incorporada.
Cómo copiar un tema
Para copiar un tema existente, selecciona el menú de temas y elige Copiar tema.
Cuando creas una copia de un tema, el nombre del tema nuevo se establece de forma predeterminada en el nombre del tema copiado, seguido de "(copia)". 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 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 mantener todos los parámetros de 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 de Looker, puedes crear una copia del tema y, luego, editar la copia.
Para todos los demás temas, puedes seleccionar el botón Editar asociado para actualizar la configuración de temas.
Puedes editar la configuración del mismo modo que lo harías al crear 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 esté configurado como predeterminado actualmente. Para borrar un tema, selecciona el menú de temas y elige 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 incorporados y las exploraciones
No se admiten temas personalizados en las vistas incorporadas. Los temas personalizados solo están disponibles para los paneles y las Exploraciones incorporados.
Para especificar el tema predeterminado para 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 en los paneles incorporados y las exploraciones en tu instancia de Looker, a menos que especifiques una configuración diferente para un panel individual o una exploración. Consulta la sección Cómo se aplican los temas y la configuración de incorporación de 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 temas personalizados en las vistas incorporadas. Los temas personalizados solo están disponibles para los paneles y las Exploraciones incorporados.
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 de 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”, debes agregar theme=Red al final de la URL del panel de incorporación:
https://example.cloud.looker.com/embed/dashboards/246?theme=red
Para las exploraciones, debes agregar 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 de 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 individuales del tema del panel
Puedes usar el argumento de URL _theme para personalizar elementos de tema 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 pueden expresarse con el nombre del color o con el código hexadecimal de color. Si utilizas 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 debes tener en cuenta cuando usas el objeto _theme para un panel incorporado:
- Cualquier elemento que se especifique en el argumento de 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 mostrar la barra de filtros tendría sentido. 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 mantén el resto de la configuración de temas personalizados. Consulta la sección Cómo se aplican los temas y la configuración de incorporación de 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 en formato URL el argumento
_theme. - El argumento
_themeno se aplica cuando se publican paneles incorporados en formato PDF. - El argumento
_themese aplica si descargas el panel como PDF.