Configuración de administrador - Temas

Puedes usar temas personalizados para personalizar el aspecto de tus paneles, Looks y Exploraciones de Looker 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.

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

Para obtener información sobre cómo definir un tema predeterminado para tus paneles de control y Exploraciones, o cómo aplicar un tema a un panel de control o una Exploración específicos, consulta la página de documentación Empezar a insertar: aplicar temas personalizados.

Puedes definir temas para los paneles de control insertados, los Exploraciones insertados y la ventana de edición de los baldosines de un panel de control insertado desde la página Temas de la sección Plataforma del panel Administrar.

En esta página se describe lo siguiente:

• Requisitos
• El tema predeterminado de Looker
• Cómo se aplican los temas a los paneles de control y los Exploraciones insertados
• Cómo crear, copiar, editar y eliminar un tema personalizado
• Cómo definir un tema predeterminado para los paneles de control y las exploraciones
• Cómo aplicar un tema que no sea el predeterminado a los paneles y Exploraciones seleccionados
• Cómo aplicar el argumento de URL _theme para seleccionar elementos del tema del panel de control

Requisitos

Para gestionar temas en tu instancia de Looker, debes cumplir los siguientes requisitos:

• Si tu instancia es una instancia de Looker (original), Looker debe habilitar la función que te permite personalizar temas para los paneles, las vistas y las exploraciones insertados. Ponte en contacto con un Google Cloud especialista de Ventas para actualizar tu licencia de esta función.
• Si tu instancia es una instancia de Looker (Google Cloud core), los temas insertados están disponibles para las ediciones Enterprise y Embed, pero no para la edición Standard.
• Tu usuario de Looker debe tener el rol de administrador o el permiso manage_themes.

Tema predeterminado

El tema predeterminado Looker se crea automáticamente en tu instancia y no se puede eliminar ni editar. El tema Looker se usa como tema predeterminado a menos que un administrador de Looker especifique otro tema como predeterminado.

Los ajustes del tema Looker, que puedes ver seleccionando el botón Ver situado junto al tema o creando una copia del tema, se agrupan en las siguientes secciones:

• Tema
• General
• Página del panel de control
• Recuadros del panel de control
• Controles del panel de control
• Página Explorar
• Página de aspecto

Un tema

General

Los ajustes de esta sección se aplican tanto a los paneles de control insertados como a los Exploraciones insertados.

Página del panel

Tarjetas del panel de control

Controles del panel de control

Página Explorar

Página Look

A continuación, se muestran ejemplos de un panel de control, de la ventana de edición de una baldosa de panel de control y de un Explorar con el tema Looker.

Ejemplo de un panel de control con el tema Looker

Ejemplo de una ventana de edición de una baldosa de panel de control 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 inserción

Puedes cambiar la apariencia de un panel de control o un Exploración insertados con respecto al tema predeterminado mediante temas personalizados y argumentos de URL. Cuando se muestra un panel de control o un Exploración insertados, Looker aplica los ajustes en el siguiente orden:

1. Empieza con los ajustes 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 especificadas en el argumento de URL _theme, si las hay (solo para paneles)

Cada elemento anula los anteriores, lo que significa que los ajustes de inserción anulan los ajustes del tema predeterminado, y los temas personalizados anulan los ajustes de inserción y los temas predeterminados.

Sin embargo, en el caso del argumento _theme URL, solo los elementos especificados en el argumento _theme anulan los elementos de los otros temas o de la configuración de inserción. Se seguirán usando el resto de los ajustes del tema personalizado y los ajustes de inserción. Por ejemplo, si añade el argumento _theme={"show_filters_bar":false} a la URL de un panel de control insertado, la barra de filtros no se mostrará, aunque haya activado la opción Mostrar filtros en los ajustes de inserción o en un tema personalizado. Sin embargo, se seguirán usando los demás ajustes del tema personalizado o de inserción.

En las descargas de los paneles de control se mostrará el tema personalizado que se haya aplicado.

Crear un tema personalizado

Para crear un tema personalizado, selecciona Añadir tema:

A continuación, añada las especificaciones de estilo y color de cada ajuste que quiera en la página Nuevo tema.

A excepción del título del tema, que debe ser único, todos los campos se rellenan automáticamente con los valores del tema predeterminado. 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

Los ajustes de esta sección se aplican tanto a los paneles de control insertados como a los Exploraciones insertados.

Color clave: los paneles de control usan este color para los botones principales y los controles de filtro. Explores 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 dashboards.

Color de fondo: código de color hexadecimal del fondo de las páginas Explorar y Panel 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 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 Font Source debe ser una URL completa que empiece por https y que dirija al valor 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 Font Family (Familia de fuentes) y, a continuación, https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff en el campo Font Source (Fuente de la fuente).

Ejemplo de Exploración insertada con un tema personalizado

En el siguiente ejemplo se muestra un Exploración insertado que tiene un tema personalizado. El Color clave es #e82042 y el Conjunto de fuentes es Verdana.

Cuando ejecutas una exploración en un entorno insertado, el texto de la exploración aparece con la fuente Font Family (Verdana) especificada. Los colores de énfasis, los botones y los enlaces se muestran con el color de las teclas especificado, #e82042:

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

Ejemplo de una ventana de edición de un recuadro de un panel de control insertado 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):

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 insertado, 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.

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

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 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. Las baldosas de texto usan el mismo color de fondo que el panel de control, que se define en la sección Página del panel de control con la opción Color de fondo.

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: puedes ajustar el tamaño de 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 del recuadro.

Tamaño del espacio entre columnas: puedes ajustar el tamaño del espacio entre las columnas de las baldosas 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.

Controles de panel

Mostrar encabezado del panel de control: inhabilita esta opción para ocultar todo el encabezado del panel de control, incluidos todos los filtros y controles del panel de control. Si esta opción está inhabilitada, el resto de las opciones de control del panel se desmarcan y se inhabilitan.

Mostrar título del panel de control: marca la casilla para mostrar el título del panel de control.

Centrar el título del panel de control: marca esta casilla para que el título del panel de control se muestre centrado. Si esta opción no está habilitada, el título del panel de control se alinea a la izquierda. Esta opción solo está disponible si se ha habilitado la opción Mostrar título del panel de control.

Mostrar barra de filtros: marca la casilla para mostrar la barra de filtros en la parte superior del panel de control. Si esta opción no está seleccionada, la opción Mostrar/ocultar filtros se desactiva y se inhabilita, lo que oculta el icono de filtros del panel de control.

Mostrar filtros: seleccione la casilla para mostrar el icono de filtros del panel de control.

Mostrar el indicador de la última actualización del panel de control: seleccione la casilla para mostrar el indicador de la última actualización del panel de control.

Mostrar icono de recarga de datos: selecciona la casilla para mostrar el icono de recarga de datos del panel de control.

Mostrar menú del panel de control: marca la casilla para mostrar el menú de tres puntos del panel de control. Si esta opción no está seleccionada, las opciones del menú del panel de control no estarán disponibles.

Página Explorar

En un tema personalizado, puedes ajustar los siguientes elementos de las páginas Explorar insertadas:

Encabezado de la exploración: inhabilita esta opción para ocultar todo el encabezado de una exploración insertada, 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 Acciones de exploración.

Título visible: inhabilita esta opción para ocultar el título de una exploración insertada.

Mostrar última ejecución: inhabilita esta opción para ocultar cuánto tiempo hace que se ejecutó el Explorador.

Mostrar zona horaria: inhabilita esta opción para ocultar la zona horaria de los datos en un Explorar insertado.

Mostrar botón Ejecutar: inhabilita esta opción para ocultar el botón Ejecutar en una exploración insertada.

Mostrar botón de acciones: inhabilita esta opción para ocultar el menú de ajustes Explorar acciones en un Explorar insertado.

Página Look

En un tema personalizado, puedes ajustar los siguientes elementos de los Looks insertados:

Mostrar encabezado: inhabilita esta opción para ocultar todo el encabezado de un Look insertado, 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 la rueda dentada Explorar acciones.

Mostrar título: inhabilita esta opción para ocultar el título de un Look insertado.

Mostrar última ejecución: inhabilita esta opción para ocultar hace cuánto tiempo se ejecutó el Look.

Mostrar zona horaria: inhabilita esta opción para ocultar la zona horaria de los datos en un Look insertado.

Mostrar botón Ejecutar: inhabilita esta opción para ocultar el botón Ejecutar en un Look insertado. Si la opción Mostrar filtros en Looks insertados está inhabilitada, este interruptor no muestra el botón Ejecutar.

Mostrar botón de acciones: inhabilita esta opción para ocultar el menú de ajustes Explorar acciones en un Look insertado.

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.

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

En el resto de los temas, puedes seleccionar el botón Editar asociado para actualizar la configuración 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.

Eliminar un tema

Puedes eliminar cualquier tema, excepto el tema Looker o el que esté configurado como predeterminado. Para eliminar un tema, selecciona el menú del tema y, a continuación, Eliminar tema.

Después de eliminar un tema, cualquier panel de control insertado que tenga ese tema especificado en su URL usará el tema predeterminado.

Definir un tema predeterminado para los paneles y los Exploraciones insertados

Los temas personalizados no se admiten en los Looks insertados. Los temas personalizados solo están disponibles en los paneles de control y los Exploraciones insertados.

Para especificar el tema predeterminado de los paneles de control y los Exploraciones insertados en tu instancia, selecciona el menú de un tema y, a continuación, Definir como predeterminado.

El tema predeterminado se usa en los paneles y las exploraciones insertados de tu instancia de Looker, a menos que especifiques otros ajustes para un panel o una exploración concretos. Consulta la sección Cómo se aplican los temas y los ajustes de inserción de esta página para obtener más información sobre cómo se aplican los temas y los ajustes de inserción a un panel de control o a un Exploración insertados.

Aplicar un tema a determinados paneles de control y Exploraciones insertados

Los temas personalizados no se admiten en los Looks insertados. Los temas personalizados solo están disponibles en los paneles de control y los Exploraciones insertados.

Si quieres que un panel de control o una exploración usen un tema que no sea el predeterminado, puedes especificar otro tema en la URL del panel de control o de la exploración insertados. Para ello, añade el parámetro theme= con el nombre del tema al final de la URL de inserción. Por ejemplo, si tienes un tema llamado "Rojo", añadirías theme=Red al final de la URL del panel de control insertado:

https://example.cloud.looker.com/embed/dashboards/246?theme=red

En el caso de Exploraciones, añadirías theme=Red al final de la URL de Exploración insertada: none https://example.cloud.looker.com/embed/explore/model_name/explore_name?theme=red

El elemento de tema de la URL no distingue entre mayúsculas y minúsculas, por lo que puede usar theme=Red o theme=red.

Usar el argumento de URL _theme para aplicar elementos de tema a un panel de control concreto

Puede usar el argumento de URL _theme para personalizar elementos de temas concretos de su panel de control insertado, 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 de control insertado. La URL completa podría tener este aspecto:

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 ir entre comillas y pueden expresarse con el nombre del color o con el código de color hexadecimal. Si utiliza un código hexadecimal, asegúrese de usar la versión codificada como 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 se deben tener en cuenta al usar el objeto _theme en un panel de control insertado:

• Cualquier elemento que se especifique en el argumento de URL _theme anulará la configuración de ese elemento en cualquier otro tema. Por lo tanto, el argumento _theme es una forma práctica de definir temas o insertar ajustes. Por ejemplo, supongamos que tienes un tema personalizado que oculta la barra de filtros, pero hay un panel de control en el que te gustaría que se mostrara. Puedes usar el tema personalizado en tu panel de control y, a continuación, añadir el argumento _theme={"show_filters_bar":true} a la URL del panel de control insertado para mostrar la barra de filtros en ese panel de control, pero mantener todos los demás ajustes del tema personalizado. Consulta la sección Cómo se aplican los temas y los ajustes de inserción de esta página para obtener más información sobre cómo se aplican los temas y los ajustes de inserción a un panel de control insertado.
• En el caso de las secuencias de comandos de programación, debes codificar como URL el argumento _theme.
• El argumento _theme no se aplica cuando se entregan paneles de control insertados en formato PDF.
• El argumento _theme se aplica si descargas el panel de control como PDF.