Propieades del tema

Descripción general

Los temas utilizan estructuras JSON especiales con propiedades de CSS. Este artículo describe las propiedades individuales y da ejemplos.

Estructura JSON completa

Esto es un conjunto de ejemplos de las propiedades que puede personalizar (amplíe para mostrar):

{ "theme": { "content": { "palette": { "primary": { "base": "#3049D1" }, "error": { "base": "#e54d42" }, "success": { "base": "#00c18d" }, "warning": { "base": "#f4d521" } }, "typography": { "font": "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-regular-webfont.ttf)", "fontBold": "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-bold-webfont.ttf)" }, "button": { "borderRadius": "2", "dropShadow": true }, "modal": { "title": { "color": "#6D7680", "lineColor": "#DAE2EA" }, "borderColor": "#ffffff", "borderRadius": "6", "borderWidth": "2", "dropShadow": true, "outsideBackgroundColor": "#DAE2EA" }, "tooltip": { "color": "#C8D0FF", "backgroundColor": "#07124E" }, "analyticalDesigner": { "title": { "color": "#6D7680" } }, "dashboards": { "title": { "color": "#6D7680", "backgroundColor": "#F4F5FB", "borderColor": "#1b4096" }, "navigation": { "title": { "color": "#6d7680" }, "borderColor": "#DAE2EA", "item": { "color": "#6d7680", "hoverColor": "#000", "selectedColor": "#000", "selectedBackgroundColor": "#F4F5FB" }, "backgroundColor": "#ffffff" }, "filterBar": { "filterButton": { "backgroundColor": "#F4F5FB" }, "backgroundColor": "#F4F5FB", "borderColor": "#1b4096" }, "section": { "title": { "color": "#6D7680", "lineColor": "#dde4eb" }, "description": { "color": "#999EA5" } }, "content": { "kpiWidget": { "title": { "color": "#8292E3", "textAlign": "center" }, "kpi": { "primaryMeasureColor": "#E8EAF7", "secondaryInfoColor": "#8292E3" }, "borderColor": "#3049D1", "borderRadius": "6", "borderWidth": "1", "backgroundColor": "#1b4096", "dropShadow": true }, "widget": { "title": { "color": "#101010", "textAlign": "center" }, "borderColor": "#ffffff", "borderRadius": "6", "borderWidth": "2", "dropShadow": true, "backgroundColor": "#ffffff" }, "backgroundColor": "#F4F5FB" } } }, "meta": { "category": "theme", "deprecated": "0", "isProduction": 1, "summary": "", "tags": "", "title": "Demo theme" } } }

Normas generales

Para personalizar los paneles, actualice las propiedades en la sección paneles.

Para personalizar Analytical Designer, actualice las propiedades en la sección analyticalDesigner.

Cuando cree sus temas, siga las siguientes normas generales:

Colores

Utilice los siguientes formatos de códigos de colores:

  • Color hexadecimal sin transparencia: #ff0 o #ff00ff
  • Color hexadecimal con transparencia: #ff06 o #ff00ff80
  • Colores RGB: rgb(120,120,120)
  • Colores RGBA: rgb(120,120,120,0.6)

Los colores del fondo deber tener el suficiente nivel de contraste para que los textos se puedan leer.

Bordes

El peso y el radio del borde utilizan píxeles.

Para utilizar una unidad diferente, inclúyala en la cadena. Ejemplo: "border-radius" : "2em"

Bordes de los widgets

El máximo recomendado para el radio de los bordes de los widgets es 30 px.

El ancho máximo recomendado de los bordes de los widgets es 4 px.

Para ocultar el borde de los widgets, utilice un color transparente en lugar de borderwidth=0. Ejemplo: "borderColor": "78787800" o "borderColor": "rgb(120,120,120,0)"

Sección meta

Independientemente del número de propiedades cambiadas, cada tema personalizado incluye la sección meta.

"meta" : { "category" : "theme", "deprecated" : "0", "isProduction" : 1, "summary" : "", "tags" : "", "title" : "{Your theme name}" }

Propiedades

Las siguientes secciones contienen información sobre propiedades individuales, ejemplos y códigos ejemplares.

Colores

Los colores básicos para sus paneles y Analytical Designer se definen en la sección Paleta.

PropiedadDescripciónCódigo de ejemplo
Color primario

Color para botones principales, enlaces y elementos visuales destacados.

Predeterminado: 

"primary" : { "base" : "#3049D1" }

Personalizado: 

Color para errores

Color para mensajes y estados de error.

Predeterminado: 

"error" : { "base" : "#7d07f2" }

Personalizado: 

Color para operaciones correctas

Color para mensajes y estados de operaciones correctas.

Predeterminado: 

"success" : { "base" : "#00c18d" }

Personalizado: 

Color para avisos

Color para mensajes y estados de aviso.

Predeterminado:  

"warning" : { "base" : "#e60000" }

Personalizado:  

 

Complementario

Solo para paneles.

Colores para varios elementos visuales, como bordes, líneas, sombras, botones y demás.

La paleta complementaria incluye 10 colores de su elección (c0 a c9). Puede definir:

  • Los 10 colores.
  • El primer ( c0 ) y último color ( c9 ).  Estos dos colores son obligatorios. El resto se calculará de forma automática usando estos colores.
  • El primer color ( c0 ), el último ( c9 ) y cualquier número de colores en medio.  El resto se calculará de forma automática usando estos colores.

Los colores individuales se usan para:

  • c0 - Color de fondo para paneles, widgets, diálogos, etc.
  • c1 - Contraste del color de fondo
  • c2 - Más contraste del color de fondo
  • c3 - Color claro del borde
  • c4 - Color medio del borde
  • c5 - Color claro del texto, color oscuro del borde
  • c6 - Color del texto
  • c7 - Color del texto
  • c8 - Color del texto
  • c9 - Color oscuro del texto, color del frente

Puede ver ejemplos del uso de la paleta complementaria en Ejemplos de temas.

"complementary" : { "c0" : "#282a36", "c1" : "#4d4466", "c2" : "#725e97", "c3" : "#9778c8", "c4" : "#bd93f9", "c5" : "#c8a7f7", "c6" : "#d4bbf6", "c7" : "#e0cff4", "c8" : "#ece3f3", "c9" : "#f8f8f2" }

Fuentes

Las fuentes se definen en la sección tipografía de JSON.

Especifique las dos variantes de la fuente (normal y negrita). Ambas variantes deben ser de la misma familia de fuente.

Utilice los siguientes formatos para las fuentes externas:

  • URL absoluta - "font": "url(https://somewebsite.com/path/to/font.woff)"
  • Formato explícito - "font": "url(https://somewebsite.com/path/to/font.woff) format('woff')"

Utilice los siguientes formatos para las fuentes locales:

  • "font": "local(Arial)"
  • "font": "local(Time New Roman)"
  • "font": "local('Times New Roman')"
PropiedadDescripciónCódigo de ejemplo
Fuente normalEspecifique una fuente normal.
"font" : "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-regular-webfont.ttf)"
"font": "local(font), url(path/to/font.svg) format('svg'), url(path/to/font.woff) format('woff'), url(path/to/font.otf) format('opentype')"
Fuente negritaEspecifique la versión en negrita de la fuente.
"fontBold" : "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-bold-webfont.ttf)"

Fuentes recomendadas

Aquí tiene algunas fuentes recomendadas gratuitas que puede utilizar en sus temas.

Fuentes Sans SerifFuentes Serif

Elementos visuales

Personalice los elementos visuales, como los botones, las ventanas superpuestas y la información sobre herramientas.

PropiedadDescripciónCódigo de ejemplo
Botón

Personalice el aspecto de los botones en los paneles y en Analytical Designer.

Predeterminado: 

"button" : { "borderRadius" : "0", "dropShadow" : false }

Personalizado: 

Ventanas superpuestasPersonalice las ventanas superpuestas.
"modal" : { "title" : { "color" : "#6D7680", "lineColor" : "#DAE2EA" }, "borderColor" : "#ffffff", "borderRadius" : "6", "borderWidth" : "2", "dropShadow" : true, "outsideBackgroundColor" : "#DAE2EA" }
Información sobre herramientas

Personalice la información sobre las herramientas.

Predeterminado: 

"tooltip" : { "color" : "#C8D0FF", "backgroundColor" : "#07124E" },

Personalizado: 

Analytical Designer

Personalice el color de los nombres de las perspectivas.

PropiedadDescripciónCódigo de ejemplo
Color del título de las perspectivas

El color del nombre de la perspectiva.

Predeterminado:

"analyticalDesigner" : { "title" : { "color" : "#d6044e" } }

Personalizado:

Paneles

Personalice varios elementos en los paneles, como títulos, filtros, navegación y widgets. En la sección Paneles.

PropiedadDescripciónCódigo de ejemplo
Título del panel

Personalice el título de sus paneles.

Predeterminado: 

"title" : { "color" : "#0392bd", "backgroundColor" : "#eafafd",            "borderColor" : "#1b4096" }

Personalizado: 

Navegación

Personalice la navegación izquierda de los paneles.

Predeterminado: 

"navigation" : { "title" : { "color" : "#3973ac" }, "borderColor" : "#DAE2EA", "item" : { "color" : "#3973ac", "hoverColor" : "#000", "selectedColor" : "#000", "selectedBackgroundColor" : "#F4F5FB" }, "backgroundColor" : "#ffffff" }

Personalizado: 

Barra de filtros

Personalice el aspecto de las barras de filtros de sus paneles.

Predeterminado: 

"filterBar" : { "filterButton" : { "backgroundColor" : "#F4F5FB" }, "backgroundColor" : "#F4F5FB",             "borderColor" : "#1b4096" }

Personalizado: 

Secciones del panel

Personalice el título y la descripción de las secciones de sus paneles.

Predeterminado:  

"section" : { "title" : { "color" : "#3b6ba1", "lineColor" : "#85abd6" }, "description" : { "color" : "#85abd6" } }

Personalizado: 

Sección de contenidos

PropiedadDescripciónCódigo de ejemplo
KPIs

Personalice el aspecto de los KPI en los paneles.

Mantenga el radio del borde en 4 px o inferior para evitar problemas en los archivos PDF exportados.

Predeterminado: 

 "kpiWidget" : { "title" : { "color" : "#8292E3", "textAlign" : "center" }, "kpi" : { "primaryMeasureColor" : "#E8EAF7", "secondaryInfoColor" : "#8292E3" }, "borderColor" : "#3049D1", "borderRadius" : "6", "borderWidth" : "1", "backgroundColor" : "#1b4096", "dropShadow" : true }

Personalizado: 

Perspectivas en paneles

Personalice las perspectivas añadidas a los paneles.

Si tiene perspectivas de encabezado en su panel, mantenga el radio del borde en 4 px o inferior para evitar problemas de visualización en los archivos PDF exportados.

Predeterminado: 

 "widget": { "title": { "color": "#101010", "textAlign": "center" }, "borderColor": "#F4F5FB", "borderRadius": "6", "borderWidth": "2", "dropShadow": true, "backgroundColor": "#F4F5FB" }

Personalizado: 

Color del fondo

Color del fondo del panel.

Predeterminado: 

"backgroundColor" : "#F4F5FB"

Personalizado: 

 

 

 

Ejemplos de temas