Skip to main content
Skip table of contents

Temas de interfaz web

Para cambiar los colores y las fuentes en la interfaz web de MyQ, es necesario proporcionar un archivo de tema en el config.ini.

Guarde el archivo del tema en C:|ProgramData\MyQ\Themes\webUI (ruta por defecto), y establecer el nombre del archivo a la themeFile en la opción config.ini archivo.

Por ejemplo, si el nombre del archivo del tema es customTheme.cssEl config.ini debería tener el siguiente aspecto:

CODE
[General]
themeFile=customTheme.css

Sólo se puede establecer un tema a la vez y se utiliza para todos los usuarios y administradores. Si no se proporciona ningún archivo de tema, MyQ utiliza el tema incorporado por defecto.

 

Propiedades del archivo temático

Los archivos de temas se crean anulando los valores de las variables en un archivo CSS. Las variables siguen la sintaxis estándar de las propiedades personalizadas de CSS y reciben valores estándar de CSS. Las variables deben estar en el archivo :raíz alcance. Las variables no especificadas en el archivo del tema, mantienen el valor del tema por defecto.

Ejemplo:

CODE
:root {
    --primary: MediumOrchid;
    --primary-light: thistle;
    --secondary: peachpuff;
    --secondary-light: #fee3ca;
    --secondary-dark: orange;
    --list-item-highlight: plum;
}

Variables

  • Es posible utilizar una variable existente utilizando la notación --variableB: var(-variableA);.

  • Se recomienda mantener los valores expresados en rem unidades

Nombre de la variable

Valor por defecto

font-family-base

"Segoe UI",Tahoma,Helvetica,sans-serif

tamaño de fuente-base

1,2rem

principal

#abc7ec

luz primaria

#deecfd

primario-oscuro

#255ca5

secundario

#eee

luz secundaria

#f5f5f5

secundario-oscuro

#b8b8b8

acento

#ffd278

btn-hover-color

var(--primary)

btn-highlight-color

var(--accent)

btn-highlight-hover-color

#ffe3ab

color de la cabecera

var(--primary)

header-text-color

#2e2e2e

app-tab-color

var(--secundaria-luz)

app-tab-text-color

#2e2e2e

app-tab-active-color

var(--primary)

app-tab-active-text-color

#2e2e2e

color de la barra lateral

var(--primary-light)

color de la barra de herramientas

var(--primary-light)

sidebar-item-height

2,6rem

barra de herramientas de altura predeterminada

2,7rem

altura de los elementos del árbol

1,6rem

 

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.