Temas para paneles, vistas y exploraciones incorporados

Puedes definir temas en la página Temas de la sección Plataforma del panel de administración Administrador. Puedes usar temas personalizados 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 de los paneles, las vistas y las exploraciones incorporados, así como la ventana de edición de las tarjetas de un panel incorporado y las interfaces de estadísticas conversacionales.

En esta página, se describe lo siguiente:

Para obtener información sobre cómo establecer un tema predeterminado para tus paneles y exploraciones, o cómo aplicar un tema a un panel o exploración específicos, consulta la página de documentación Cómo comenzar a incorporar: Aplica temas personalizados.

Requisitos de la instancia para usar temas incorporados

Ten en cuenta los siguientes requisitos para administrar temas incorporados en una instancia de Looker:

  • Si tu instancia es de Looker (original), Looker debe habilitar la función que te permite personalizar los temas de los paneles, las vistas y las exploraciones incorporados. Comunícate con un Google Cloud especialista en ventas para actualizar tu licencia para 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 Standard.
  • El usuario de Looker debe tener el rol de administrador o un rol que contenga el permiso manage_themes.

Acerca de la página Temas

Puedes administrar los temas de tu instancia en la página Temas de la sección Plataforma del panel de administración Administrador.

Si tu instancia tiene habilitada la función de versión preliminar Temas de paneles internos, la página Temas muestra las pestañas Interno y Incorporado para administrar los temas de los paneles de Looker y del contenido incorporado, respectivamente.

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 el predeterminado.

La configuración del tema Looker, que puedes ver seleccionando el botón Ver junto al tema o creando 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 incorporados, las exploraciones incorporadas y las interfaces de Conversational Analytics.

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 proporciona estas fuentes y se recomiendan porque estarán disponibles tanto en los navegadores como 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 mayor prioridad 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
Tamaño de la fuente del título None
Margen superior None
Margen inferior None
Margen lateral None

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
Color de fondo del texto None
Alineación del título Centro
Tamaño de la fuente del título Ninguno
Sombra difuminada Ninguno
Tamaño de la separación entre columnas Ninguno
Tamaño de la separación entre filas Ninguno
Radio del borde Ninguno

Controles del panel

Nombre del parámetro de configuración Valor
Mostrar encabezado del panel Sí
Mostrar título del panel Sí
Título del panel central No
Mostrar barra de filtros Sí
Botón de activación para mostrar 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í
Mostrar indicador de última actualización del panel Sí
Mostrar ícono para volver a cargar datos Sí
Mostrar botón Más opciones 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 Looker

Un panel de Looker incorporado que usa el tema predeterminado de Looker.

Ejemplo de una ventana de edición de tarjetas de un panel con el tema Looker

El diálogo Editar tarjeta en un panel de Looker incorporado con el tema predeterminado de Looker.

Ejemplo de una página Explorar con el tema Looker

Una exploración de Looker incorporada que usa el tema predeterminado de Looker.

Cómo se aplican los temas y la configuración de incorporación

Puedes cambiar la apariencia de un panel o una exploración incorporados del tema predeterminado con temas personalizados y argumentos de URL. Cuando se muestra un panel o una exploración incorporados, Looker aplica la configuración en el siguiente orden:

  1. Comienza con la configuración del tema predeterminado.
  2. Aplica la configuración del tema personalizado que se especifica en el argumento theme de la URL, si lo hay.
  3. Aplica las propiedades que se especifican en el argumento de URL _theme, si las hay (solo para paneles).

Cada elemento anula los elementos anteriores, lo que significa que la configuración de incorporación anula la configuración del tema predeterminado, 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. Se seguirán usando el resto de los parámetros de 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án usando los demás parámetros de configuración del tema personalizado o de la incorporación.

En las descargas de los paneles, se mostrará cualquier tema personalizado que se haya aplicado.

Cómo crear un tema personalizado

Para crear un tema personalizado para los paneles, las vistas y las exploraciones incorporados, en la página Administrador Temas, selecciona la pestaña Incorporar y haz clic en Agregar tema.

Luego, en la página New Themes, agrega especificaciones de estilo y color para cada uno de los parámetros de configuración que quieras personalizar.

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 tanto a los paneles incorporados como 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 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 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 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, usa 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 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.

Fuente 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 de formato de fuente web abierta (.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.woff en el campo Fuente de la fuente.

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 clave se establece en #e82042 y la familia de fuentes se establece en Verdana.

Cuando ejecutas una exploración en un parámetro de configuración incorporado, el texto de la exploración aparece en la fuente Verdana de la familia de fuentes especificada. Los colores de los elementos destacados, los botones y los vínculos aparecen en el color clave especificado, #e82042:

Una exploración incorporada con el color #e82042 aplicado al botón Agregar, al botón Ir a LookML, al botón del menú de ajustes y a los títulos de los análisis de Quick Start.

Después de que se ejecuta una exploración, el contorno y el texto del botón Ejecutar aparecen en el Color clave especificado, #e82042:

Una exploración incorporada con el color #e82042 aplicado al botón Ejecutar.

Ejemplo de una ventana de edición de tarjetas de un panel incorporado con un tema personalizado

Además de los elementos de Explorar que se describen en la sección anterior, cuando edites una tarjeta de panel, el banner aparecerá en el tono que se especifica en el parámetro de configuración Color clave (#e82042) y la fuente que se especifica en el parámetro de configuración Familia de fuentes (Verdana):

El cuadro de diálogo Editar tarjeta en un panel de Looker incorporado con el color #e82042 aplicado al banner y la familia de fuentes Verdana aplicada a todo el texto de la página.

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 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 se coordinen 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 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. Elegir 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. Elegir entre opciones predefinidas en un menú desplegable Los márgenes se miden en píxeles (px).

Márgenes laterales: De manera opcional, establece un valor específico para el margen de los lados 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:

Color del texto: Es el código de color hexadecimal para los siguientes elementos:

Color del cuerpo del texto: Es el código de color hexadecimal para los siguientes elementos:

  • Texto del cuerpo, con la excepción del texto de nivel de encabezado 2 y nivel de encabezado 3, en tarjetas de 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 configura con el 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 al 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 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 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 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 las filas de tarjetas del panel a partir de un conjunto de tamaños predefinidos en píxeles.

Radio del borde: De manera opcional, ajusta el radio del borde de las tarjetas del panel para crear esquinas cuadradas o redondeadas.

Controles del panel

Mostrar el encabezado del panel: Inhabilita esta opción para ocultar todo el encabezado del panel, incluidos todos los filtros y controles del panel. Cuando se inhabilita esta opción, se anula la selección de todas las demás opciones de control del panel y se inhabilitan.

Mostrar título del panel: Selecciona la casilla de verificación para mostrar el título del panel.

Título del panel central: Selecciona esta casilla de verificación para mostrar el título del panel alineado al centro 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. Cuando no se selecciona esta opción, se anula la selección de la opción Display Filters Toggle y se inhabilita, lo que oculta el ícono de filtros del panel.

Activar o desactivar los 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 mostrar el ícono para volver a cargar datos del panel.

Mostrar el botón Más opciones: Selecciona la casilla de verificación para mostrar el menú de tres puntos del panel. Cuando se desmarca 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, 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 Acciones de exploración.

Título para mostrar: Inhabilita esta opción para ocultar el título de una exploración incorporada.

Mostrar última ejecución: Inhabilita esta opción para ocultar hace 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 Mostrar acciones: Inhabilita esta opción para ocultar el menú de ajustes de acciones de Explorar en una Exploración incorporada.

Visualizar página

En un tema personalizado, puedes ajustar los siguientes elementos en los Looks incorporados:

Mostrar encabezado: Inhabilita esta opción para ocultar todo el encabezado de un Look incorporado, 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 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 un diseño incorporado. Cuando se inhabilita Mostrar filtros en diseños incorporados, 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 acciones de Explorar en una vista incorporada.

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 manualmente este nombre por uno nuevo y único que solo contenga caracteres alfanuméricos y guiones bajos, y asegúrate de quitar 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 los parámetros de configuración, consulta los parámetros de configuración del tema que se describieron anteriormente. Asegúrate de seleccionar Guardar para conservar 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).

En el caso de 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 los parámetros de configuración, consulta los parámetros de configuración del tema que se describieron antes. 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. 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.

Establece un tema predeterminado para los paneles y las exploraciones incorporados

Los temas personalizados no se admiten en los Looks incorporados. Los temas personalizados solo están disponibles para los paneles y las exploraciones incorporados.

Para especificar el tema predeterminado de los paneles y las exploraciones 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 o una exploración incorporados.

Aplica un tema a paneles y exploraciones incorporados específicos

Los temas personalizados no se admiten en los Looks incorporados. 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 que no sea el predeterminado, puedes especificar un tema diferente 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 incorporado:

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 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 individuales del tema del panel

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 la URL de _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 de la URL del signo #, que es %23. Por ejemplo, estos dos argumentos de URL especifican el color rojo:

_theme={"title_color":"red","text_tile_text_color":"%23FF0000"}

A continuación, se indican 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 _theme anulará la configuración de ese elemento en cualquier otro tema. Esto hace que el argumento _theme sea 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 mostrara 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 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.
  • Para las secuencias de comandos de programación, debes codificar en URL el argumento _theme.
  • El argumento _theme no se aplica cuando se entregan paneles incorporados en formato PDF.
  • El argumento _theme se aplica si descargas el panel como un PDF.