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

[Benji 0]

Niemand eine Idee, wie man diese fiese grüne Farbe abändern kann? Insbesondere bei den Widgets "Gestylt". Anbei ein Screenshot...

[OliverIO]

@Benji-0

theoretisch über das theme, aber das scheint nicht richtig zu funktionieren
Ansonsten nur auf Einzelfallebene per Css
Jedes widget ist aber ein wenig anders aufgebaut

[Benji 0]

Hallo Oliver,

Woher weiß ich, was für ein CSS ich verwenden soll? Gibt es eine Tabelle?

[OliverIO]

@Benji-0

wenn der entwickler des widgets diese information nicht bereitstellt musst du selber schauen.
leider hast du keine Informationen geliefert welche gestyled widgets es sind, noch einen widget export geliefert.
selber kann man das über die web developer tools F12 im browser ermitteln. Man muss allerdings etwas suchen

Am Beispiel eines buttons
Mit dem Positionierwerkzeug kann man grob das Element markieren.
Die Anzeige springt auf das entsprechende HTML

Hier musste ich noch weiter in der Hierarchie heruntergehen bis ich das Setting gefunden habe.
In diesen Fall am Element button die backgroundColor

Dieses Setting hängt an der CSS-Klasse .css-c8ol8z
Da mui/react mit gehashten css Klassen arbeitet, die jedesmal mit einer neuen ID dynamisch erzeugt werden, kann man das nicht nehmen. Im Button -Element findet man unter dem class-Attribut eine ganze Reihe von Möglichkeiten von denen man sich dann eins aussuchen kann. Ich würde jetzt einfach MuiButtonBase-root nehmen

MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-c8ol8z

Das in den CSS-Reiter eingesetzt führt aber zu einem eher unerwarteten Ergebnis

.MuiButtonBase-root {
    background-color: red;;
}

daher muss man weiter spezialisieren. Am leichtesten wäre es, wenn du in der General Einstellungen des widgets eine eigene css Klasse definierst, bsp mycolor (du kannst aber beliebig definieren)

und passe dann mein css setting entsprechend an

.mycolor .MuiButtonBase-root {
    background-color: red;;
}

Dann passt auch wieder das Gesamterscheinungsbild

Prüfe bitte trotzdem ob auf github beim vis2 adapter bereits ein entsprechender issue existiert.
evtl kommentierst du, das es dich auch betrifft. umso mehr ein issue kommentiert wird umso eher wird er sichtbar und die chance auf fix wird erhöht.
Wenn noch kein issue dazu existiert erstelle bitte einen mit einer möglichst exakten Darstellung und genügend Informationen wie man das nachstellen/testen kann ohne groß experimente machen zu müssen.

[Bernd1967]

Hier wurde eins angelegt: Github Link

[Benji 0]

Hallo Oliver. Deine Antworten sind wirklich sehr ausführlich. Vielen Dank für die Bemühungen.
Es scheint mir, als gäbe es zwei verschiedene Hintergrundfarben. Einmal die allgemeine Hintergrundfarbe, und dann die wenn etwas selektiert wird. Und die Farbe zum selektieren war letzten Winter noch blau, jetzt ist sie grün - leider.
Weißt du wie man diese Selektier Farbe ändern kann? Ich habe nochmal versucht, dies in einem Screenshot einzufangen. Zum einen in der Combobox, zum anderen in Selektor "Zustände Steuern".

[OliverIO]

sagte in Systemfarbe Vis 2 App anpassen:

leider hast du keine Informationen geliefert welche gestyled widgets es sind, noch einen widget export geliefert.

[Benji 0]

Beide sind vom Typ "Gestylt" - Zustände steuern:

[Benji 0]

Gibt es noch weitere Infos, die helfen könnten

[OliverIO]

sagte in Systemfarbe Vis 2 App anpassen:

widget export geliefert.

[Benji 0]

So?

[
{
"tpl": "tplJquiButtonState",
"data": {
"bindings": [
"color1"
],
"type": "button",
"g_common": true,
"oid": "0_userdata.0.Vis_Radio_Select",
"count": 4,
"variant": "contained",
"orientation": "horizontal",
"text1": "",
"value1": "Bad",
"icon1": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9Ii4zIiBkPSJNMTIgN2MtMi43NiAwLTUgMi4yNC01IDVoMTBjMC0yLjc2LTIuMjQtNS01LTV6Ii8+PGNpcmNsZSBmaWxsPSJjdXJyZW50Q29sb3IiIGN4PSI4IiBjeT0iMjAiIHI9IjEiLz48Y2lyY2xlIGZpbGw9ImN1cnJlbnRDb2xvciIgY3g9IjE2IiBjeT0iMTciIHI9IjEiLz48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xMyA1LjA4VjNoLTJ2Mi4wOEM3LjYxIDUuNTcgNSA4LjQ3IDUgMTJ2MmgxNHYtMmMwLTMuNTMtMi42MS02LjQzLTYtNi45MnpNNyAxMmMwLTIuNzYgMi4yNC01IDUtNXM1IDIuMjQgNSA1SDd6Ii8+PGNpcmNsZSBmaWxsPSJjdXJyZW50Q29sb3IiIGN4PSIxNiIgY3k9IjIwIiByPSIxIi8+PGNpcmNsZSBmaWxsPSJjdXJyZW50Q29sb3IiIGN4PSIxMiIgY3k9IjE3IiByPSIxIi8+PGNpcmNsZSBmaWxsPSJjdXJyZW50Q29sb3IiIGN4PSI4IiBjeT0iMTciIHI9IjEiLz48Y2lyY2xlIGZpbGw9ImN1cnJlbnRDb2xvciIgY3g9IjEyIiBjeT0iMjAiIHI9IjEiLz48L3N2Zz4=",
"image1": "",
"color1": "{colour:bosesoundtouch.2.on; colour== true? "yellow" : "#000000"}",
"tooltip1": "",
"activeColor1": "",
"g_states-1": true,
"text2": "",
"value2": "Benji",
"icon2": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGZpbGw9ImN1cnJlbnRDb2xvciIgY3g9IjciIGN5PSIxMSIgb3BhY2l0eT0iLjMiIHI9IjEiLz48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9Ii4zIiBkPSJNMTkgOWgtNnY2aDh2LTRjMC0xLjEtLjktMi0yLTJ6Ii8+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNNCAxMWMwIDEuNjYgMS4zNCAzIDMgM3MzLTEuMzQgMy0zcy0xLjM0LTMtMy0zcy0zIDEuMzQtMyAzem00IDBjMCAuNTUtLjQ1IDEtMSAxcy0xLS40NS0xLTFzLjQ1LTEgMS0xczEgLjQ1IDEgMXptMTEtNGgtOHY4SDNWNUgxdjE1aDJ2LTNoMTh2M2gydi05YzAtMi4yMS0xLjc5LTQtNC00em0yIDhoLThWOWg2YzEuMSAwIDIgLjkgMiAydjR6Ii8+PC9zdmc+",
"image2": "",
"color2": "{colour:sonos.0.root.192_168_10_25.state; colour == "play"? "yellow" : "#000000"}",
"tooltip2": "",
"activeColor2": "",
"g_states-2": true,
"text3": "",
"value3": "Buero",
"icon3": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9Ii4zIiBkPSJNOCA1aDh2M0g4eiIvPjxjaXJjbGUgZmlsbD0iY3VycmVudENvbG9yIiBjeD0iMTgiIGN5PSIxMS41IiByPSIxIi8+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTkgOGgtMVYzSDZ2NUg1Yy0xLjY2IDAtMyAxLjM0LTMgM3Y2aDR2NGgxMnYtNGg0di02YzAtMS42Ni0xLjM0LTMtMy0zek04IDVoOHYzSDhWNXptOCAxNEg4di00aDh2NHptNC00aC0ydi0ySDZ2Mkg0di00YzAtLjU1LjQ1LTEgMS0xaDE0Yy41NSAwIDEgLjQ1IDEgMXY0eiIvPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgb3BhY2l0eT0iLjMiIGQ9Ik02IDEzaDEydjJoMnYtNGMwLS41NS0uNDUtMS0xLTFINWMtLjU1IDAtMSAuNDUtMSAxdjRoMnYtMnptMTItMi41Yy41NSAwIDEgLjQ1IDEgMXMtLjQ1IDEtMSAxcy0xLS40NS0xLTFzLjQ1LTEgMS0xeiIvPjwvc3ZnPg==",
"image3": "",
"color3": "{colour:bosesoundtouch.1.on; colour== true? "yellow" : "#000000"}",
"tooltip3": "",
"activeColor3": "",
"g_states-3": true,
"text4": "",
"value4": "WZ",
"icon4": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9Ii4zIiBkPSJNMjEgMTFjLS41NSAwLTEgLjQ1LTEgMXY0SDR2LTRjMC0uNTUtLjQ1LTEtMS0xcy0xIC40NS0xIDF2NWMwIC41NS40NSAxIDEgMWgxOGMuNTUgMCAxLS40NSAxLTF2LTVjMC0uNTUtLjQ1LTEtMS0xek02IDE0aDEydi0yYzAtLjg4LjM5LTEuNjcgMS0yLjIyVjdjMC0uNTUtLjQ1LTEtMS0xSDZjLS41NSAwLTEgLjQ1LTEgMXYyLjc4Yy42MS41NSAxIDEuMzQgMSAyLjIydjJ6Ii8+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMjEgOVY3YzAtMS42NS0xLjM1LTMtMy0zSDZDNC4zNSA0IDMgNS4zNSAzIDd2MmMtMS42NSAwLTMgMS4zNS0zIDN2NWMwIDEuNjUgMS4zNSAzIDMgM2gxOGMxLjY1IDAgMy0xLjM1IDMtM3YtNWMwLTEuNjUtMS4zNS0zLTMtM3pNNSA3YzAtLjU1LjQ1LTEgMS0xaDEyYy41NSAwIDEgLjQ1IDEgMXYyLjc4Yy0uNjEuNTUtMSAxLjM0LTEgMi4yMnYySDZ2LTJjMC0uODgtLjM5LTEuNjctMS0yLjIyVjd6bTE3IDEwYzAgLjU1LS40NSAxLTEgMUgzYy0uNTUgMC0xLS40NS0xLTF2LTVjMC0uNTUuNDUtMSAxLTFzMSAuNDUgMSAxdjRoMTZ2LTRjMC0uNTUuNDUtMSAxLTFzMSAuNDUgMSAxdjV6Ii8+PC9zdmc+",
"image4": "",
"color4": "{colour:bosesoundtouch.0.on; colour== true? "yellow" : "#000000"}",
"tooltip4": "",
"activeColor4": "",
"g_states-4": true,
"onlyIcon2": true,
"onlyIcon3": true,
"onlyIcon4": true,
"onlyIcon1": true,
"click_id": "",
"g_css_background": true,
"g_fixed": true,
"g_css_border": true,
"name": null,
"comment": null,
"class": "mycolor",
"filterkey": null,
"multi-views": null,
"locked": null
},
"style": {
"bindings": [],
"background": "",
"background-color": "LightGray",
"top": "85px",
"left": "56px",
"width": "250.927px",
"height": "36.95px",
"background-image": "",
"border-width": null,
"border-style": null,
"border-color": "Black",
"border-radius": "5"
},
"widgetSet": "jqui",
"_id": "i000001"
}
]

[OliverIO]

@Benji-0

da waren fehler drin, lag wohl daran das du es nicht in code tags gepackt hast. konnte es aber reapieren

hier das ergebnis

.mycolor .MuiButton-colorPrimary {
    background-color: red;
}

[Benji 0]

Die gute Nachricht: es funktioniert.

Die schlechte Nachricht: Ich verstehe nicht, was Du meinst mit: ... das du es nicht in code tags gepackt hast. konnte es aber reapieren

Danke schön

[Benji 0]

Und vielleicht magst du noch erklären, wie du darauf kamst, dass man den Code: .MuiButton-colorPrimary ... einfügen muss.

[OliverIO]

@Benji-0

https://forum.iobroker.net/help-german#editor-german

[Benji 0]

Alles klar. Beim nächsten Mal.

Jetzt hast du mir einen Fisch gegeben, aber nicht gezeigt wie man angelt :-)
Wie bist du darauf gekommen, das man .MuiButton-colorPrimary ... einfügen muss?

Weil jetzt gibt es noch zwei Punkte. In deinem Bild hat sich zwar der selektierte Schalter in rot gefärbt, der Trennstrich zwischen den Schaltern ist aber auch noch grün.
Und bei meinem Bild von weiter oben ist Rock Antenne leider auch grün markiert. Und .MuiButton-colorPrimary hat nicht geholfen.

[OliverIO]

@Benji-0

Ich habe ja oben schon geschrieben, das es individuell ist.
In diesem Fall ist es eine Mui ButtonGroup, und diese enthält für jeden Knopf einen MuiButton.

Dazu habe ich mir wie oben beschrieben das Html anzeigen lassen.
Da sind dann 4 button html Elemente

Dann habe ich mir die Klassen der button-Elemente herauskopiert und in einen Editor kopiert. Am Knopf mit der Farbe musste es einen Unterschied geben

und diese Klasse hab ich ausprobiert.

[Benji 0]

Top. Danke Dir.

[OliverIO]

@Benji-0 sagte in Systemfarbe Vis 2 App anpassen:

der Trennstrich zwischen den Schaltern ist aber auch noch grün

hier die lösung für den strich

.mycolor .MuiButtonGroup-firstButton, .mycolor .MuiButtonGroup-middleButton {
    border-color: red;
}

für das letzte problem darfst du nochmal raten was mir fehlt um es zu lösen

[Benji 0]

Hier der Code (bin lernfähig). Weiterhin Danke für deine Unterstützung:

[
  {
    "tpl": "tplJquiButtonState",
    "data": {
      "activeColor1": "",
      "activeColor2": "",
      "activeColor3": "",
      "activeColor4": null,
      "activeColor5": null,
      "activeColor6": null,
      "bindings": [],
      "click_id": "",
      "color1": "",
      "color2": "",
      "color3": "",
      "color4": null,
      "color5": null,
      "color6": null,
      "count": 6,
      "g_common": true,
      "g_css_background": true,
      "g_css_border": true,
      "g_css_font_text": true,
      "g_states-1": true,
      "g_states-2": true,
      "g_states-3": true,
      "g_states-4": true,
      "g_states-5": true,
      "g_states-6": true,
      "icon1": "",
      "icon2": "",
      "icon3": "",
      "icon4": "",
      "icon5": "",
      "icon6": "",
      "image1": "",
      "image2": "",
      "image3": "",
      "image4": null,
      "image5": null,
      "image6": null,
      "oid": "0_userdata.0.Vis_Radio_Preset",
      "onlyIcon1": false,
      "onlyIcon2": false,
      "onlyIcon3": false,
      "onlyIcon4": null,
      "onlyIcon5": null,
      "onlyIcon6": null,
      "open": false,
      "orientation": "vertical",
      "test5": null,
      "test6": null,
      "text1": "Lounge",
      "text2": "Antenne Relax",
      "text3": "Bayern 3",
      "text4": "Rock Antenne",
      "text5": "Sunshine Live",
      "text6": "Arabella",
      "tooltip1": "",
      "tooltip2": "",
      "tooltip3": "",
      "tooltip4": null,
      "tooltip5": null,
      "tooltip6": null,
      "type": "select",
      "value1": "1 Lounge",
      "value2": "2 Relax",
      "value3": "3 Bayern 3",
      "value4": "4 ROCK ANTENNE Bayern",
      "value5": "5 SUNSHINE LIVE",
      "value6": "6 Radio Arabella Bayern",
      "variant": "outlined",
      "widgetTitle": "",
      "test4": null,
      "name": null,
      "comment": null,
      "class": null,
      "filterkey": null,
      "multi-views": null,
      "locked": null,
      "g_fixed": true
    },
    "style": {
      "bindings": [],
      "background": "",
      "background-color": "Lightgray",
      "top": "275px",
      "left": "58px",
      "width": "181.971px",
      "height": "28px",
      "border-radius": "5",
      "text-align": ""
    },
    "widgetSet": "jqui",
    "_id": "i000001"
  }
]