Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[smarthome-tricks.de]

Hallo zusammen,

ich habe heute erfolgreich mein erstes Widget über CSS gestylt. Ich habe bei einem jqui RadioButtons Value List Widget die Farbwerte der Button verändert, da diese nicht über den Designer angepasst werden können. Dazu habe ich über Google Chrome und den Entwicklungmodus (Inspector) das Widget über HTML und CSS analysiert um so die benötigten Elemente zu bekommen, welche ich dann per eigener CSS Klasse entsprechend anpassen kann. War ein wenig Sucharbeit, hat aber funktioniert.

Nun meine Frage, wie löst ihr das Thema? Sucht ihr das auch über den Inspektor des Browsers, oder gibts dazu ne Dokumentation, oder was für Best Practise gibt es hier?

Viele Grüße,

Matthias

[Dirk_H]

Hallo,

ich habe auf https://jqueryui.com/themeroller/ mir ein Theme gebaut und im prinzip aus der jquery-ui.theme.css abgeguckt. Ich glaube die Seite stand auch irgendwo in einer IOBroker Readme oder Source Code…

Es fühlt sich aber nicht so richtig gut, ich muss "Klimmzüge" machen und verändere dabei auch gleich die Editor-Ansicht farblich mit. Ich muss teilweise "#visview_Dlg_Hzg " nutzen damit in meiner Dialgoview , die in einem Container geöffnet wird, die Farben ebenfalls angepasst werden.

Ich paste mal mein CSS hier rein:

! .ui-button {
! background: #FDBF8C;
! border: 1px solid #873d00;
! color: #873d00;
! }
! .ui-button:hover {
! color: black;
! }
! .ui-state-active,
! .ui-button:active {
! background: #B1601D;
! color: #FFFFFF;
! cursor: pointer;
! }
! .ui-widget-header{
! background: #870000;
! border: 1px solid #870000;
! color: #FFFFFF;
! }
! .ui-widget-content {
! border: 1px solid #870000;
! background: #FFE9D7;
! }
! #visview_Dlg_Hzg .ui-widget-content,
! #visview_Dlg_Hzg .ui-widget-header,
! #visview_Dlg_Hzg .ui-button {
! background: #FDBF8C;
! border: 1px solid #873d00;
! color: #873d00;
! }
! #visview_Dlg_Hzg .ui-button:hover {
! color: black;
! }
! #visview_Dlg_Hzg .ui-state-active,
! #visview_Dlg_Hzg .ui-button:active {
! background: #B1601D;
! color: #FFFFFF;
! }