Skip to main content
Skip table of contents

Web-UI-Themen

Um Farben und Schriftarten in der MyQ-Web-Benutzeroberfläche zu ändern, müssen Sie eine Themendatei in der config.ini angeben.

Speichern Sie die Themendatei unter C:\ProgrammDaten\MyQ\Themes\webUI\ (Standardpfad), und setzen Sie den Namen der Datei auf den themeFile Option in der config.ini Datei.

Wenn der Name der Themendatei zum Beispiel customTheme.csssollte die config.ini wie folgt aussehen:

CODE
[General]
themeFile=customTheme.css

Es kann jeweils nur ein Thema eingestellt werden, das für alle Benutzer und Administratoren verwendet wird. Wenn keine Themadatei angegeben wird, verwendet MyQ das integrierte Standardthema.

 

Eigenschaften der Themendatei

Themendateien werden erstellt, indem die Werte von Variablen in einer CSS-Datei überschrieben werden. Die Variablen folgen der Standard-Syntax für benutzerdefinierte CSS-Eigenschaften und erhalten Standard-CSS-Werte. Die Variablen müssen sich in der Datei :root Bereich. Variablen, die nicht in der Themendatei angegeben sind, behalten den Wert aus dem Standardthema.

Beispiel:

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

Variablen

  • Es ist möglich, eine bereits vorhandene Variable zu verwenden, indem man die Notation --VariableB: var(-VariableA);.

  • Es wird empfohlen, die Werte, die in rem Einheiten

Name der Variablen

Standardwert

font-family-base

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

font-size-base

1,2rem

primär

#abc7ec

primär-licht

#deecfd

primär-dunkel

#255ca5

sekundär

*eee

sekundär-licht

#f5f5f5

sekundär-dunkel

#b8b8b8

Akzent

#ffd278

btn-hover-color

var(--primär)

btn-highlight-color

var(--akzent)

btn-highlight-hover-color

#ffe3ab

Header-Farbe

var(--primär)

kopf-text-farbe

#2e2e2e

app-tab-farbe

var(--sekundär-licht)

app-tab-text-color

#2e2e2e

app-tab-active-color

var(--primär)

app-tab-active-text-color

#2e2e2e

Seitenleiste-Farbe

var(--primär-leicht)

Symbolleisten-Farbe

var(--primär-leicht)

sidebar-item-height

2,6rem

toolbar-default-height

2,7rem

Baum-Element-Höhe

1,6rem

 

JavaScript errors detected

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

If this problem persists, please contact our support.