Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄

[FoodFighter]

Ich stoße wieder an die Grenzen meiner "CSS-Skills" - vielleicht hat hier jemand eine fixe Idee für mich:

Wie kann man den Rahmen eines einzelnen Buttons der materialdesign Icon List farblich ändern?

Konkret:
Ich habe hier als Notlösung das Home-Symbol eingefärbt, sobald der Staubsauger in der Ladestation steht.

Lieber wär's mir allerdings, wenn um den Home-Button ein grüner Rahmen mit entsprechender Pixelbreite erscheinen würde, sobald der entsprechende State gesetzt ist.
Wie stellt man das am besten an?:thinking_face:

Und weiterhin: wie/wo legt man die Höhe der Buttons fest?
Die Höhe aller Buttons in einer Zeile ändert sich, wenn man z.B. eine "Beschriftung" oder einen "zweiten Text" in den Button packt.
Wenn nun die anderen Buttons (ohne Text) in einer anderen Zeile die gleiche Höhe haben sollen, müsste man die irgendwie/irgendwo fest definieren.
Das geht gewiss auch per CSS -> nur wie?

Danke vorweg.

[FoodFighter]

@foodfighter

Okay...ich denke ich bin durch Zufall doch weiter gekommen.
(War mehr "raten" als "verstehen" und hat nen Tag gedauert - mea culpa)

Das Widget hat die CSS-Klasse "FoFi_VacControl" bekommen.
mit folgendem CSS-Code klappt es den Elementen eine feste Höhe von 60px zuzuweisen und einen einzelnen Rahmen (den vom Item 2 = unten links) einzufärben

.FoFi_VacControl .materialdesign-icon-list-item{
    height: 60px !important;
}
.FoFi_VacControl #icon-list-item2 .materialdesign-button{
    border: 5px solid #00ff00 !important;
}

Nun bleibt nur noch die Frage, wie ich den zweiten Teil abhängig von einer Objekt-Variable machen könnte
Der Rahmen soll erst dann 5px breit und grün werden, wenn der Robo auch in der Ladestation steht.

Innerhalb der Widget-Eingabefelder kann man das über

{v:0_userdata.0.Test_BOOL;v=="true" ? "00ff00" : "#000000"}

lösen - doch wie baut man diesen String in eine CSS ein (geht das überhaupt)?

[FoodFighter]

Von hinten durch die Brust...aber funktioniert:

Als CSS-Klasse im Widget hinterlegt:

{v:0_userdata.0.Test_BOOL;v=="true" ? "FoFi_VacControl_I2gn" : "FoFi_VacControl"}

Im CSS:

.FoFi_VacControl .materialdesign-icon-list-item,
.FoFi_VacControl_I2gn .materialdesign-icon-list-item{
    height: 40px !important;
}

.FoFi_VacControl_I2gn #icon-list-item2 .materialdesign-button{
    border: 3px solid #4CAF50 !important;
}

Wirkt etwas unelegant auf mich...aber sei's drum.
Falls jemand einen "schöneren" weg kennt als die ganze CSS-Klasse umzuschalten - gerne mitteilen :)