Quick BI:Diseñar un tema

Requisitos previos

Ha iniciado sesión en la consola de Quick BI y se encuentra en la página de edición del panel. Create a dashboard.

Procedimiento

1. En la página de edición del panel, haga clic en Page Settings en la barra de menú superior.

   

   Haga clic en el icono para expandir o contraer el panel Page Settings.

   

2. En Page Settings, haga clic en la pestaña Theme y configure la Template del Dashboard Theme, los Global Styles y el Page Layout.

   

   Para encontrar una configuración rápidamente, introduzca palabras clave en el search box ubicado en la parte superior.

   

   Para contraer todas las categorías, haga clic en el icono junto al cuadro de búsqueda y seleccione Collapse all categories.

   

3. Configure los siguientes parámetros.

• En la sección Dashboard theme, seleccione un tema oficial o personalizado.

  • Temas oficiales: Predeterminado, Deep Blue, Starry Sky, Technology, Event, Minimal e Indigo.

  • Temas personalizados: Seleccione un tema personalizado existente.

    

    Los administradores de la organización pueden hacer clic en Custom para abrir la página Report Theme Management y gestionar los temas personalizados.

    

    Nota

    Los temas personalizados solo están disponibles en Quick BI Professional Edition:

    • Los administradores de la organización pueden elegir entre temas oficiales o crear temas personalizados.

    • Los usuarios sin privilegios de administrador pueden elegir entre temas oficiales o temas personalizados existentes, pero no pueden crear nuevos.

• En la sección Global styles, configure los siguientes parámetros.

  Parámetro	Descripción
  Theme Mode	Seleccione light mode o dark mode. light mode: Fondo blanco para el panel. Esta es la opción predeterminada (light mode). dark mode: Fondo negro para el panel.
  Chart color scheme	Use template color schemes proporcionados por el sistema o custom color schemes. Si establece Chart color scheme en Template color scheme, seleccione un esquema de la lista desplegable. Por ejemplo, al seleccionar el esquema de color Advanced Gray, el gráfico se actualiza como se muestra a continuación. Si establece el chart color scheme en Custom, puede modificar el color de cada muestra. Nota El Gradient color style se aplica a los gráficos de indicator, trend y comparison.
  Page font	Establezca el font type para la página del panel.
  Card corner radius	Establezca el corner radius de las tarjetas de gráfico: sin radio, radio pequeño o radio grande.
  Spacing	Elija entre Compact, Normal o Custom.
  Spacing between cards	Disponible solo cuando Spacing está configurado en Custom. Ajuste el espaciado de filas y columnas entre las tarjetas.
  Card padding	Disponible solo cuando Spacing está configurado en Custom. Ajuste el relleno superior, inferior, izquierdo y derecho de una tarjeta.
  Semantic colors	En el conditional formatting y en las visualizaciones de indicadores secundarios, los colores comunican cambios en los datos, como aumentos, sin cambios o disminuciones. El sistema asigna automáticamente los colores semánticos predeterminados según el chart color scheme seleccionado. También puede personalizar el esquema de colores global para indicadores de aumento/disminución, positivo/negativo y de estado. Esto se aplica a todo el panel.

• En la sección Page layout, configure los siguientes parámetros.

  Parámetro	Descripción
  Page layout	Seleccione el diseño del panel: Fit to Content o Fit to Window. Fit to Content: Ajusta el tamaño de la página según el tamaño real y la posición de todos los componentes, como gráficos y controles de consulta. Fit to Window: Escala la página al tamaño de la ventana del navegador. También puede configurar el diseño de columnas.
  Page information	Configure el Title area, el story outline y el Footer que se muestran en el panel. Title area: Muestre u oculte el área del título del panel. Cuando esté visible, haga clic en el icono para configurar los siguientes elementos. Show main title: Muestre u oculte el título principal del panel. Cuando esté visible, ajuste su estilo de texto, logotipo y alineación. Note: Muestre u oculte notas en el área del título. Cuando estén visibles, haga clic en el icono para personalizar el contenido de la nota. Content area bottom margin: Ajuste el margen inferior del área del título principal. Cover background: Establezca el color de fondo, la imagen superpuesta y la altura del área del título principal. Story outline: Agregue un esquema de historia debajo del área del título. El sistema genera automáticamente un esquema basado en el orden de diseño de los gráficos. Haga clic en el icono junto a un story node para personalizarlo en el cuadro de diálogo Edit Story Node. Footer: Muestre u oculte el área del pie de página. Cuando esté visible, haga clic en el icono para configurar los siguientes ajustes. Footer text content: Establezca el contenido de texto para el área del pie de página. Footer background: Establezca el color de fondo, la imagen superpuesta y la altura del área del pie de página.
  Page background	Establezca el color de fondo en Solid color o Gradient y, opcionalmente, superponga una imagen de fondo.
  Page width	Elija Adaptive o Fixed. Nota Si selecciona Fixed, establezca los márgenes izquierdo y derecho de la página en píxeles. Estos márgenes se vuelven fijos y no se pueden ajustar en la configuración de márgenes de página.
  Page margin	Elija entre Normal, Ultra-wide page o Custom.

• En la sección Dashboard background, configure los siguientes parámetros:

  Parámetro	Descripción
  Top image y Bottom image	Seleccione una Existing image o una Custom image. Nota Puede cargar imágenes personalizadas desde un archivo local o una URL.

• En la sección Dashboard components, configure los siguientes parámetros.

  

  Parámetro		Descripción
  Title	Text	Establezca el font size y la alignment del título del gráfico.
  	Separator	Establezca el color y el ancho de la línea separadora del título.
  	Custom title background	Personalice el fondo del título para que coincida con el tema del informe. Background color: Elija el color de relleno para el fondo del título. Puede establecerlo en Solid color o Gradient. Overlay background image: Superponga una imagen sobre el fondo del título. Use imágenes predeterminadas o cargue una imagen personalizada. Nota Puede cargar imágenes personalizadas desde un archivo local o una URL. Title area position: Establezca la posición del área del título. Puede elegir Inside chart o Above chart. Apply title background to charts in Tab: Aplique el fondo del título a los gráficos dentro de un componente Tab. Todos los gráficos del componente Tab heredan el color de fondo, la imagen superpuesta y la configuración de posición del área del título. Con pestañas anidadas, solo el título de la pestaña principal sincroniza el estilo cuando Apply title background to charts in Tab está habilitado. Los títulos de las subpestañas conservan su configuración original.
  	Status icon	Configure el status icon para que se muestre al pasar el cursor o siempre, y establezca su color.
  	Hide More actions entry point in preview mode	Oculta el menú More actions en el preview mode.
  Background style	Fill	Muestre u oculte un color de relleno para el fondo.
  	Overlay background image	Superponga una imagen de fondo o una imagen personalizada sobre el fondo del gráfico.
  	Border	Muestre u oculte el borde y establezca su color.
  	Show shadow	Muestre u oculte una sombra para el fondo.
  Empty data style	Text content	Personalice el mensaje de datos vacíos. El mensaje predeterminado es "No data returned".
  	Icon style	Personalice el estilo del icono para datos vacíos. Nota Si selecciona Custom image, cargue una imagen local o proporcione una URL.
  	Jump link	Al hacer clic en el icono o en el texto, se navega a la dirección especificada.

• En la sección General content styles, configure los siguientes parámetros.

  Parámetro		Descripción
  Chart styles	Axis title	Establezca el tamaño de fuente, el color y el estilo del título del eje.
  	Axis label	Establezca el tamaño de fuente, el color y el estilo de la etiqueta del eje.
  	Data label	Establezca el tamaño de fuente, el color y el estilo de la etiqueta de datos.
  	Tooltip	Establezca el tamaño de fuente, el color y el estilo de la información sobre herramientas.
  	Legend	Establezca el tamaño de fuente, el color y el estilo de la leyenda, así como si el símbolo de la leyenda escala con el texto. Cuando está habilitado: Para gráficos de líneas, el grosor de la línea del símbolo de la leyenda escala proporcionalmente al grosor de la línea del gráfico. Para otros gráficos, el tamaño del símbolo de la leyenda escala proporcionalmente al tamaño de fuente de la leyenda.
  Table styles	Style settings	Establezca el estilo de la tabla: Zebra, Bordered, Simple o Minimal.
  	Primary color scheme	Establezca el esquema de color primario: Theme color, Gray o Custom.
  	Header	Establezca el tamaño de fuente, el color y otras propiedades del encabezado de la tabla.
  	Content	Establezca el tamaño de fuente, el color y otras propiedades del contenido de la tabla.

• En la sección Tab component, configure los siguientes parámetros.

  Parámetro	Descripción
  Selected tab style	Establezca el estilo de la pestaña seleccionada: Underline, Separator o Selected block.
  Tab label style	Establezca el tamaño de fuente de la etiqueta de la pestaña y los estilos para sus estados predeterminado y seleccionado.
  Show border of visualization cards in Tab	Muestre u oculte los bordes de las tarjetas de visualización dentro de un componente Tab y establezca su color.
  Customize spacing between components in Tab	Introduzca valores de espaciado personalizados entre los componentes dentro de una pestaña. Si no se selecciona, se aplica el espaciado global de filas y columnas del panel. Nota Rango editable: de -32 px a 32 px para computadoras, de 0 px a 20 px para dispositivos móviles.

• En la sección Query control, configure los siguientes parámetros.

  

  Parámetro	Descripción
  Border	Muestre u oculte el query control border y establezca su color.
  Interaction buttons	Establezca el color de los interaction buttons.
  Button corner radius	Establezca el button corner radius para los botones de interacción.
  Condition spacing	Establezca el spacing between conditions.
  Condition name	Establezca el estilo de texto del condition name.
  Selection box style	Establezca el style of the selection box.
  Background color	Establezca el background color del cuadro de selección.
  Border	Establezca el grosor y el color del borde para el cuadro de selección.
  Corner radius	Establezca el corner radius del cuadro de selección.
  Text	Establezca el color y el tamaño de fuente del text del cuadro de selección.

  Nota

  Estos ajustes se aplican globalmente a todos los controles de consulta. Los controles de consulta individuales con style settings personalizados anulan estos ajustes globales. Por ejemplo, si el estilo global del cuadro de selección está establecido en Fill, pero el control de consulta A tiene su estilo configurado en Border, el control de consulta A usará Border.

• Haga clic en Save.