Farbe des Header ändern

[DEV2DEV-DE]

No existing issues.

• [X] There is no existing issue for my request.

Related problems

Unterscheidung verschiedener Systeme (Produktiv, Test, Dev)

Description

Man kann zwar für jeden Host eine Farbe vergeben, diese wird aber nur für den Button zur Umschaltung verwendet. Dieser Button ist aber nur dann überall sichtbar, wenn der Expertenmodus aktiviert ist. Um die verschiedenen Systeme (Produktiv, Test, Dev) unterscheiden zu können wäre es hilfreich, wenn man z.B. die Farbe des Header von "blau" in etwas anderes ändern könnte.

Zur Not auch über eine statische CSS Definition.

Additional context

No response

[DEV2DEV-DE]

Sehe ich das richtig, dass das CSS für den Admin ausschließlich dynamisch erzeugt wird? Oder gibt's da irgendeine statische Datei, die man ggf. ändern könnte?

Dann könnte man recht einfach sowas "hinbiegen". Würde mir völlig reichen.

[DEV2DEV-DE]

Vorschlag: In die Datei node_modules/iobroker.admin/adminWww/static/css/6518.66146bf1.chunk.css könnte man zu Beginn z.B. ein @import url("overrides.css"); aufnehmen. Dann könnte der Anwender dort seine eigenen Anpassungen vornehmen. Eine so benannte leere Datei muss dann allerdings auch vorhanden sein.

Die sieht bei mir jetzt so aus:

div#root>div>header>div::before {
  background-color: #228b2f;
  border: 1px solid silver;
  border-radius: 8px;
  color: white;
  content: "Produktivsystem";
  font-size: 2em;
  margin-right: 12px;
  padding: 8px 12px;
}

[Feuer-sturm]

Den Namen der Installation kannst du jetzt schon vergeben und er wird im Header angezeigt. Siehe hier https://forum.iobroker.net/topic/72535/admin-per-css-anpassen/3

[DEV2DEV-DE]

Den Namen der Installation kannst du jetzt schon vergeben und er wird im Header angezeigt.

Wenn man das jetzt noch per CSS oder auf anderem Weg einfärben könnte, wäre es perfekt.

[DEV2DEV-DE]

Nur der Vollständigkeit halber: Ich mache das jetzt wie folgt ...

An den Anfang der /opt/iobroker/node_modules/iobroker.admin/adminWww/static/css/1234.567890.chunk.css füge ich ein @import "overrides.css"; ein.

Die entsprechende Datei habe ich vorher erzeugt. Mit folgendem Inhalt:

div#root>div>header>div>div:last-child {
  background-color: forestgreen;
  border: 1px solid silver;
  border-radius: 8px;
  color: white;
  font-size: 2em;
  margin-right: 12px;
  padding: 0 12px;
}

Wäre super, wenn das im Admin bereits vorgesehen werden könnte. Also eine leere overrides.css mitliefern, das Import-Statement bereits einbauen und wenn wir schon mal dabei sind: Dem Element eine eindeutige Klasse oder Id zuweisen.

Die Königslösung wäre natürlich, wenn man den Stil des Elements im Frontend einstellen könnte ;-)