Temas para paneles de control internos

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

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

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

En esta página se describe lo siguiente:

Requisitos de los usuarios y las instancias

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

Aplicar un tema a un panel de control

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

Descargar paneles de control

Las descargas de paneles de control en formato PDF mostrarán el tema personalizado que se haya aplicado.

Crear un tema personalizado

Para crear un tema personalizado, en la página de administración Temas, selecciona la pestaña Interno y haz clic en Añadir tema.

A continuación, añada las especificaciones de estilo y color de cada ajuste que quiera personalizar en la página Nuevo tema. Puedes cambiar cualquiera de los ajustes, que se describen en las siguientes secciones. Selecciona Guardar tema para conservar los cambios y guardar el nuevo tema.

Un tema

Nombre: el nombre del tema debe ser único y solo puede contener caracteres alfanuméricos y guiones bajos. Si introduces espacios en el nombre del tema, se sustituirán por guiones bajos cuando guardes el tema.

General

Color clave: los paneles de control usan este color para los botones principales y los controles de filtro. Explora usa este color para los enlaces e iconos del selector de campos, los botones principales, los banners y los elementos destacados.

Color del texto: código de color hexadecimal del texto de Exploraciones y de los paneles de control.

Color de fondo: código de color hexadecimal del fondo de Exploraciones y de los paneles de control.

Conjunto de fuentes: el nombre del conjunto de fuentes. Esta fuente se usará en todo el texto del panel de control, incluidos los títulos de las baldosas, las baldosas de texto y las leyendas de las visualizaciones. Esta fuente también se usará en todo el texto de un Explorar. Si el nombre de la fuente contiene un espacio, ponlo entre comillas, como "Open Sans".

Si usas una fuente web segura común, solo tienes que escribir el nombre de la fuente en el campo Conjunto de fuentes y dejar en blanco el campo Fuente. Si quieres usar una fuente menos común, introduce su nombre en el campo Conjunto de fuentes y, a continuación, usa el campo Fuente de la fuente, que se describe más adelante, para proporcionar una URL a la definición de la fuente que quieras usar.

Fuente: deje este campo en blanco a menos que quiera usar una fuente personalizada, es decir, una fuente que no sea una fuente web segura común. El valor de Font Source debe ser una URL completa que empiece por https y que dirija al valor de url especificado 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, en el caso de PT Sans Narrow, puedes introducir "PT Sans Narrow" en el campo Familia de fuentes y, a continuación, 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 una tarjeta de un panel de control con un tema personalizado

Además de los elementos de Exploración descritos en la sección anterior, cuando edites un recuadro de un panel de control, el banner aparecerá en el tono especificado en el ajuste Color clave (#e82042) y con la fuente especificada en el ajuste Conjunto de fuentes (Verdana):

El cuadro de diálogo Editar baldosas de un panel de control 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: también 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 de control, 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 anula cualquier colección de colores que se haya asignado previamente a una baldosa. 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: puedes ajustar el tamaño de la fuente del título del panel de control con un conjunto de tamaños predefinidos en píxeles.

Margen superior: puedes definir un valor específico para el margen de la parte superior de un panel de control. Elige entre las opciones predefinidas de un menú desplegable. Los márgenes se miden en píxeles (px).

Margen inferior: puedes definir un valor específico para el margen de la parte inferior de un panel de control. Elige entre las opciones predefinidas de un menú desplegable. Los márgenes se miden en píxeles (px).

Márgenes laterales: puede definir un valor específico para los márgenes laterales de un panel de control. Elige entre las opciones predefinidas de un menú desplegable. Los márgenes se miden en píxeles (px).

Mosaicos del panel de control

Color del título: código de color hexadecimal de los siguientes elementos:

  • Título del panel de control
  • Títulos de los recuadros del panel de control
  • Títulos y texto de encabezado de nivel 1 de las tarjetas de Markdown
  • Color del texto de las visualizaciones de un solo valor

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

  • Texto del panel de control, incluidas las leyendas de las visualizaciones
  • Subtítulos y texto del cuerpo, a excepción del texto del encabezado de nivel 1, de las baldosas de Markdown
  • Encabezado de nivel 1, encabezado de nivel 2 y texto normal en baldosas de texto
  • Iconos de recuadro en visualizaciones de un solo valor

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

  • Texto del cuerpo, excepto el texto de encabezado de nivel 2 y de nivel 3, en las baldosas de Markdown.
  • Texto del cuerpo en baldosas de texto

Color de fondo: código de color hexadecimal del fondo de todas las baldosas, excepto las de texto.

Color de fondo del texto: código de color hexadecimal del fondo de los recuadros de texto.

Alineación del título: define la alineación de los títulos de las baldosas (izquierda, derecha o centro).

Tamaño de fuente del título: ajusta el tamaño de la fuente de los recuadros del panel de control con un conjunto de tamaños predefinidos en píxeles.

Sombra del cuadro: crea una sombra alrededor de las baldosas del panel de control con la sintaxis CSS. Puedes seleccionar una sombra de recuadro predefinida o crear una personalizada. Para crear una sombra de recuadro personalizada, introduce los valores que quieras para horizontal-offset vertical-offset blur-radius spread-radius color y selecciona Introducir estilo personalizado para aplicar los ajustes. A la derecha se muestra una vista previa de los ajustes de la sombra de la caja.

Tamaño del espacio entre columnas: puedes ajustar el tamaño del espacio entre las columnas de las tarjetas del panel de control. Para ello, elige uno de los tamaños predefinidos en píxeles.

Tamaño del espacio entre filas: ajusta el tamaño del espacio entre las filas de las baldosas del panel de control. Para ello, puedes elegir entre una serie de tamaños predefinidos en píxeles.

Radio del borde: ajusta el radio del borde de las baldosas del panel de control para crear esquinas cuadradas o redondeadas.

Editar un tema

En todos los temas, puedes hacer clic en el botón Editar asociado para actualizar los ajustes del tema.

Puedes editar los ajustes igual que cuando creas un tema. Para ver una descripción de los ajustes, consulta los ajustes de tema que se han descrito anteriormente. No olvides seleccionar Guardar para conservar las actualizaciones.

Copiar un tema

Para copiar un tema, selecciona el menú del tema y, a continuación, Copiar tema.

Cuando haces una copia de un tema, el nombre del nuevo tema es el mismo que el del tema copiado, seguido de "(copia)". Cambia 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 los ajustes como lo harías al crear un tema. Para ver una descripción de los ajustes, consulta los ajustes de tema que se han descrito anteriormente. No olvides seleccionar Guardar para conservar todos los ajustes del tema.

Eliminar un tema

Para eliminar un tema, selecciona el menú del tema y, a continuación, Eliminar tema.

Definir un tema predeterminado

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

Para definir un tema como predeterminado, selecciona el menú del tema y, a continuación, Definir como predeterminado.

Para quitar la configuración predeterminada del tema predeterminado, selecciona el menú del tema y, a continuación, Quitar predeterminado.