Personalizar temas para los paneles incorporados y Explorar es una función que debe habilitar Looker. Comunícate con tu administrador de cuentas de Looker para actualizar tu licencia de esta función.
Los temas personalizados no son compatibles con los estilos incorporados. Los temas personalizados solo están disponibles para los paneles incorporados y las exploraciones incorporadas.
Las opciones de temas personalizados siguen aumentando a medida que agregamos más funciones. Cuando agregamos una opción para los temas personalizados, a todos los temas existentes se les asigna el valor predeterminado de la opción nueva. El valor predeterminado se puede modificar con el editor de temas. Para ver las novedades, consulta la sección Configuración de temas personalizados, o consulta la página de documentación de la API Crear tema para obtener una lista de las opciones de configuración compatibles con los temas.
Descripción general
Puedes definir temas para los paneles incorporados, las exploraciones incorporadas y la ventana de edición para los mosaicos de un panel incorporado desde la página Temas en la sección Plataforma del panel Administrador:
Puedes usar temas personalizados para personalizar la apariencia de tus paneles y exploraciones incorporados de Looker. Puedes usar temas para personalizar la familia de fuentes, el color del texto, el color del fondo, el color del botón, el color del mosaico y otros elementos visuales.
Por ejemplo, puedes crear un tema "oscuro" para cambiar la apariencia del panel incorporado:
En esta página, se describe lo siguiente:
- El tema predeterminado de Looker
- Cómo se aplican los temas a los paneles incorporados y a Explorar
- Cómo crear, copiar, editar y borrar un tema personalizado
- Cómo configurar un tema predeterminado para los paneles y Explorar
- Cómo aplicar un tema distinto del predeterminado a los paneles y las exploraciones 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 especifica otro tema como predeterminado.
A continuación, se muestran ejemplos de un panel, una ventana de edición de un panel y un tema de Explorar con el Looker.
Panel:
Edita un mosaico del panel en el modo de edición del panel:
Explora:
La configuración del tema Looker, que puedes ver haciendo clic en el botón Ver junto al tema o creando una copia del tema, es la siguiente:
Tema:
| Nombre del parámetro de configuración | Valor | Notas |
|---|---|---|
| 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 la clave | #1A73E8 |
Los paneles heredados usan este color para los botones principales. 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 acentos. |
| Familia de fuentes | Roboto, Noto Sans JP'Noto Sans CJK KR'Noto Sans Interfaz árabe&no3, &Noto Sans Devanagari UI', 3, | La aplicación Looker entrega estas fuentes, que estarán disponibles tanto en los navegadores como cuando se rendericen las imágenes. Looker usa la primera fuente de la lista de familias de fuentes que admite un carácter, por lo que la fuente de mayor prioridad o la especializada debe aparecer primero. Looker usa las variaciones de la "IU" de las fuentes cuando están disponibles para que los caracteres se modifiquen ligeramente a fin de ajustarse mejor a los límites de los componentes visuales. |
| Fuente | Ninguno |
Página del panel:
| Nombre del parámetro de configuración | Valor | Notas |
|---|---|---|
| Colección de colores | Ninguno | |
| Color de fondo | #f6f8fa |
Tarjetas del panel:
| Nombre del parámetro de configuración | Valor | Notas |
|---|---|---|
| Color del título | #3a4245 |
|
| Color del texto | #3a4245 |
|
| Color del cuerpo del texto | Ninguno | |
| Color de fondo | #ffffff |
|
| Alineación del título | Centrar | No disponible para paneles heredados |
Colores del botón de los paneles heredados:
Configuración solo para paneles heredados:
| Nombre del parámetro de configuración | Valor | Notas |
|---|---|---|
| Color del botón de información | #0087e1 |
|
| Color del botón de advertencia | #980c11 |
Controles del panel:
| Nombre del parámetro de configuración | Valor | Notas |
|---|---|---|
| Mostrar título del panel | Sí | |
| Mostrar la barra de filtros | Sí |
Cómo se aplican los temas y la configuración de incorporación
Puedes cambiar la apariencia de un panel incorporado o Explorar desde el tema predeterminado mediante la configuración de incorporación y los temas personalizados. Cuando se muestra un panel incorporado o Explorar, Looker aplica la configuración de la siguiente manera:
- Comienza con la configuración del tema predeterminado
- Aplica las personalizaciones desde la opción Editar configuración de inserción del menú de ajustes de un panel heredado, si corresponde.
- 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 inserción anula la configuración de tema predeterminada, 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 que se especifican en el argumento _theme anulan los elementos de los otros temas o de la configuración de incorporación. El resto de la configuración de temas personalizados y la de incorporación se seguirán usando. 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án usando las otras opciones de configuración del tema personalizado o de la incorporación.
Crear un tema personalizado
Para crear un tema personalizado, haz clic en Agregar tema:
A continuación, agrega especificaciones de estilo y color para cada configuración deseada en la página Tema nuevo:
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 las opciones de configuración que se describen en las siguientes secciones. Haz clic en Guardar tema para conservar tus cambios y guardar tu nuevo tema.
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, los espacios 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 clave: 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 acentos. Los paneles heredados usan este color para los botones principales.
Font Family (Familia de fuentes): el nombre de la familia de fuentes. Esta fuente se utilizará para todo el texto del panel, incluidos los títulos de mosaicos, los mosaicos de texto y las leyendas en las visualizaciones. Esta fuente también se usará para todo el texto de Explorar. Si hay un espacio en el nombre de la fuente, escribe comillas alrededor del nombre, como "Open Sans".
- Si usas una fuente común segura para la Web, puedes escribir el nombre de la fuente en el campo Familia de fuentes y dejar el campo Fuente de la fuente 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 para proporcionar una URL a la definición de la fuente que deseas usar.
Fuente de la fuente: deja este campo en blanco, a menos que quieras usar una fuente personalizada, que no sea una fuente común segura para la Web. La fuente fuente debe ser una URL completa que comience con https y que apunte al valor url que se especifica en el argumento src de @font-face. Recomendamos usar un archivo de formato de fuente abierto 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 Font Family y, luego,
https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woffen el campo Font Source.
Explorar ejemplos
En los siguientes ejemplos, se muestran las exploraciones incorporadas que tienen un tema personalizado. El Color de la clave es #e82042 y la Familia de fuentes es Verdana.
Exploración incorporada
Cuando ejecutas un elemento Explorar en un parámetro de configuración incorporado, el texto aparece en la fuente Familia de fuentes 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 Explorar, el esquema y el texto del botón Ejecutar aparecen en el Color de clave especificado, #e82042:
La ventana de edición de un mosaico en un panel incorporado en el modo de edición
Además de los elementos Explorar que se muestran más arriba, cuando editas un mosaico de panel, el banner aparece en el panel que se especifica en la configuración de Color de la clave (#e82042) y la fuente especificada en la Familia de fuentes (Verdana):
Página del panel
Colección de colores: De forma opcional, puede elegir una colección de colores, que es un conjunto de paletas de coordinación que funcionan bien juntas. Cuando asignas una colección de colores a un panel, todas las series de datos de 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 se coordinen 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 asignada previamente a un mosaico. Sin embargo, la recopilación de colores de un tema no anula los colores personalizados que se asignaron a una serie de datos, como tampoco el formato condicional aplicado a la visualización de tablas.
Color de fondo: Es el código de color hexadecimal para el fondo de todos los mosaicos, excepto los mosaicos de texto. (Los mosaicos de texto usan el mismo color de fondo que el panel, que se establece mediante el Color de fondo de la sección Página del panel).
Mosaicos del panel
Color del título: El código de color hexadecimal del título del panel y los títulos de los mosaicos del panel. (Este color no se aplica a los títulos de los mosaicos de texto. Para eso, usa el campo Texto de texto).
Color de texto: El código de color hexadecimal del texto en el panel, incluidas las leyendas en las visualizaciones, el texto en las visualizaciones de valor único y el título para los mosaicos de texto.
Color del cuerpo del texto: Es el código de color hexadecimal para el texto del cuerpo y el texto del subtítulo en mosaicos de texto.
Color de fondo: Es el código de color hexadecimal para el fondo de todos los mosaicos, excepto los mosaicos de texto. (Los mosaicos de texto usan el mismo color de fondo que el panel, que se establece mediante el Color de fondo de la sección Página del panel).
Alineación de título: Configura la alineación de los títulos de mosaicos a la izquierda, la derecha o el centro. Esta opción no está disponible para paneles heredados.
Colores del botón del panel heredado
Esta configuración solo está disponible para los paneles heredados.
Color del botón de información: El parámetro de configuración Color del botón de información se reserva para realizar mejoras en el futuro.
Color del botón de advertencia: Código de color hexadecimal del color del botón cuando se encuentra en estado de advertencia. Por ejemplo, cuando se actualiza un panel, el botón usa este código de color con la etiqueta Detener. El color de texto del botón se determina con la configuración de Color de texto que aparece arriba.
Controles del panel
Display Dashboard Title: Seleccione la casilla de verificación para mostrar el 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.
Asegúrate de hacer clic en Guardar tema para conservar la configuración de temas.
Copia un tema
Para copiar un tema existente, haz clic en el menú de temas y selecciona Copiar tema:
Cuando creas una copia de un tema, el nombre del tema nuevo se establece de forma predeterminada seguido del nombre del tema copiado, seguido de "(copia)". Asegúrese de cambiar este nombre de forma manual por uno nuevo y único que solo contenga caracteres alfanuméricos y guiones bajos, y asegúrese de quitar 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, consulte la configuración de temas anterior. Asegúrate de hacer clic en Guardar para conservar toda la configuración de temas.
Cómo editar un tema
El tema Looker se crea automáticamente en tu instancia y no se puede editar. (Si deseas modificar el tema Looker, puedes crear una copia del tema y luego editar la copia).
Para todos los demás temas, puede hacer clic en el botón Editar asociado a fin de actualizar la configuración de temas:
Puedes editar la configuración como lo harías cuando creas un tema nuevo. Para obtener una descripción de la configuración, consulte la configuración de temas anterior. Asegúrese de hacer clic en Guardar para conservar sus actualizaciones.
Eliminar un tema
Puedes borrar cualquier tema, excepto el de Looker o el que esté configurado como predeterminado. Para eliminar un tema, haz clic en el menú de temas y selecciona Eliminar 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 Explorar
Los temas personalizados no son compatibles con los estilos incorporados. Los temas personalizados solo están disponibles para los paneles incorporados y las exploraciones incorporadas.
Para especificar el tema predeterminado de los paneles incorporados y Explora en tu instancia, haz clic en el menú de un tema y selecciona Establecer como predeterminado:
El tema predeterminado se usa en los paneles incorporados y en Explorar en tu instancia de Looker, a menos que especifiques otra configuración para un panel individual o 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.
Aplica un tema a exploraciones y paneles incorporados específicos
Los temas personalizados no son compatibles con los estilos incorporados. Los temas personalizados solo están disponibles para los paneles incorporados y las exploraciones incorporadas.
Si quieres que un panel o un Explorar usen un tema que no sea el predeterminado, puedes especificar un tema diferente en la URL del panel incorporado o 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 control:
https://example.looker.com/embed/dashboards/246?theme=red
Para Explorar, debes agregar theme=Red al final de la URL de Explorar incorporada:
none
https://example.looker.com/embed/explore/model_name/explore_name?theme=red
El elemento de tema en la URL no distingue entre mayúsculas y minúsculas, por lo que puedes usar theme=Red o theme=red.
La configuración de temas personalizados anula cualquier configuración de incorporación que se especifique para un panel heredado. 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 en un panel de control incorporado.
Usa el argumento de URL _theme para aplicar elementos individuales de tema del panel
Puedes usar el argumento de URL _theme a fin de personalizar elementos de tema individuales para tu panel incorporado, como tile_background_color y show_title.
Para ver todas las propiedades admitidas del objeto
_theme, consulta la lista en "ThemeSettings" en la página de documentación de la API Crear tema.
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 del panel incorporado. La URL completa podría verse así:
https://example.looker.com/embed/dashboards/236?_theme={"show_filters_bar":false}
Usa una coma para especificar varias propiedades de temas:
_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 de color. Si usas un código hexadecimal, asegúrate de usar la versión codificada de 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 usas el objeto _theme para 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 o en la configuración de incorporación de un panel heredado. Esto hace que el argumento_themesea una forma útil de definir mejor los temas o incorporar la configuración. Por ejemplo, supongamos que tienes un tema personalizado que oculta la barra de filtros, pero tienes un panel en el que la barra de filtros tiene 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 conservar 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 en esta página para obtener más información sobre cómo se aplican los temas y la configuración de incorporación en un panel de control incorporado. - Para las secuencias de comandos de programación, debes codificar el argumento
_themeen formato de URL. - El argumento
_themeno se aplica cuando se entregan paneles heredados incorporados o paneles incorporados. - El argumento
_themese aplica si descargas el panel como un PDF.