Temas para paneles internos

Puedes usar temas personalizados para personalizar la apariencia de tus paneles internos de Looker (no 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. Los temas se pueden aplicar a los paneles definidos por el usuario y a los paneles de LookML.

Por ejemplo, puedes crear un tema "oscuro" para cambiar la apariencia de tu panel.

Puedes definir temas para los paneles y la ventana de edición de los mosaicos en un panel desde la página Temas en la sección Plataforma del panel Administrador.

En esta página, se describe lo siguiente:

Requisitos de usuarios y de instancias

Para administrar los temas de tus paneles internos de Looker, debes cumplir con los siguientes requisitos:

Cómo aplicar un tema a un panel

Para aplicar un tema a un panel, asegúrate de que esté en modo de edición y haz clic en Diseño para abrir el panel Diseño. Selecciona un tema en el campo Tema y se aplicará a tu panel. Si seleccionas Ninguno y tu instancia tiene un tema predeterminado, se aplicará ese tema.

Cómo descargar paneles

En las descargas de paneles como PDF, se mostrará cualquier tema personalizado aplicado.

Cómo crear un tema personalizado

Para crear un tema personalizado, en la página de administrador Temas, selecciona la pestaña Interno y haz clic en Agregar tema.

A continuación, agrega especificaciones de color y estilo para cada parámetro de configuración que desees personalizar en la página Nuevo tema. 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 guardes el tema.

General

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 del texto: Es el código hexadecimal del color del texto en Explorar y en los paneles.

Color de fondo: Es el código de color hexadecimal para el fondo de los paneles y la función Explorar.

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 en 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 web segura común, solo tienes que escribir el nombre de la fuente en el campo Familia de fuentes y dejar el campo 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.

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 web segura común. 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 ventana de edición de tarjetas del panel con un tema personalizado

Además de los elementos de Explorar que se describieron en la sección anterior, cuando edites un 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 diálogo Editar tarjeta en un panel de Looker 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 combinan bien entre sí. 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, 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.

Tamaño de fuente del título: De manera opcional, ajusta el tamaño de fuente del título del panel a partir de un conjunto de tamaños predefinidos en píxeles.

Margin Top: 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).

Lados del margen: De manera opcional, establece un valor específico para el margen en los lados de un panel. Elegir 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 para los siguientes elementos:

Color del 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 de 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 del texto: Es el código de color hexadecimal de los siguientes elementos:

  • Texto del cuerpo, con la excepción del texto de encabezado de nivel 2 y nivel 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 todos los mosaicos, excepto los de texto.

Color de fondo del texto: Es el código de color hexadecimal para el fondo de los mosaicos de texto.

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 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 caja: Crea una sombra alrededor de las tarjetas del panel con la sintaxis de CSS. Puedes seleccionar una sombra de caja predefinida o crear una personalizada. Para crear una sombra de caja personalizada, ingresa el valor de horizontal-offset vertical-offset blur-radius spread-radius color que elijas 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 de la caja.

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 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 las 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.

Cómo editar un tema

En todos los temas, puedes hacer clic en 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 anteriormente. No olvides seleccionar Guardar para conservar las actualizaciones.

Cómo copiar un tema

Para copiar un tema existente, selecciona el menú del tema y, luego, Copiar tema.

Cuando haces 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 quita 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 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 borrar un tema

Para borrar un tema, selecciona el menú del tema y, luego, Borrar tema.

Cómo establecer un tema predeterminado

Si estableces un tema como predeterminado, se aplicará a cualquier panel en el que el usuario seleccione la opción Ninguno en el campo Temas cuando esté en modo de edición.

Para establecer un tema como predeterminado, selecciona el menú del tema y elige Establecer como predeterminado.

Para quitar el parámetro de configuración predeterminado del tema predeterminado, selecciona el menú del tema y, luego, Quitar predeterminado.