Entdecke, wie du mit Home Assistant und Card-Mod dein Smart Home Dashboard individualisierst! Dieses Tutorial führt dich durch die Anpassung deiner Oberfläche an deine Bedürfnisse, von Geräten bis hin zum Erscheinungsbild. Das Video zeigt dir Schritt für Schritt die Verwendung der HACS Erweiterung Card-Mod in Kombination mit Templates um das Beste aus deinem Setup herauszuholen.
Links: Card-Mod3 : https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins
Ich möchte euch heute einen allgemeinen Amazon-Link teilen, über den ihr eine Vielzahl von Produkten entdecken könnt. Egal, ob ihr nach Smart Home-Geräten, Gadgets oder anderen nützlichen Artikeln sucht, Amazon hat für jeden etwas zu bieten.
Wenn ihr über diesen Link einkauft, unterstützt ihr meinen Kanal, ohne dass es für euch zusätzliche Kosten verursacht. Das hilft mir, weiterhin spannende Inhalte für euch zu erstellen!
Hier ist der Link zu Amazon: https://amzn.to/3KsGngK
Wie du HACS installierst wird dir in diesem Video erklärt:
YAML Code:
Farbe Namen:
type: entities entities: - entity: input_boolean.schalter1 card_mod: style: | :host { color: red; } - entity: input_boolean.schalter1 card_mod: style: | :host { color: green; } - entity: input_boolean.schalter1 title: Farbe von Entitätsnamen
Farbe Icons:
type: entities entities: - entity: input_boolean.schalter1 card_mod: style: | :host { --card-mod-icon-color: red; } - entity: input_boolean.schalter1 card_mod: style: | :host { --card-mod-icon-color: blue; color: yellow } - entity: input_boolean.schalter1 title: Icon Farbe card_mod: style: | ha-card { background: gray; }
Farbe Hintergrund:
type: entities entities: - entity: input_boolean.schalter1 - entity: input_boolean.schalter1 - entity: input_boolean.schalter1 title: Background Color card_mod: style: | ha-card { background: orange; }
Farbe , Icon, Schriftfarbe nach Zustand:
type: entities entities: - entity: input_boolean.schalter1 card_mod: style: | :host { {% if is_state('input_boolean.schalter1', 'on') %} --card-mod-icon: mdi:light-switch; --card-mod-icon-color: red; {% else %} --card-mod-icon: mdi:garage; --card-mod-icon-color: green; {% endif %} } - entity: input_boolean.schalter1 card_mod: style: | :host { {% if is_state('input_boolean.schalter1', 'on') %} --card-mod-icon: mdi:light-switch; --card-mod-icon-color: red; {% else %} --card-mod-icon: mdi:light-switch-off; --card-mod-icon-color: green; {% endif %} } - entity: input_boolean.schalter1 title: Icon, Schrift, Background
Farbe, Icon, Schriftfarbe nach numerischen Zustand:
type: entities entities: - entity: input_number.number1 card_mod: style: | :host { {% if states('input_number.number1') | int <=50 %} background: green; --card-mod-icon: mdi:light-switch; --card-mod-icon-color: orange {% elif states('input_number.number1') | int >50 and states('input_number.number1') | int < 80 %} background: yellow; --card-mod-icon: mdi:garage-open; {% elif states('input_number.number1') | int >= 80 %} background: red; {% endif %} }
Für eine “Tile” Card müssen ein paar andere Variablen verwendet werden. An dieser Stelle herzlichen Dank an @chrannen für diese super Ergänzung 💙
type: tile entity: ENTITÄT card_mod: style: | ha-card { {% if is_state("ENTITÄT", "on") %} --tile-color:crimson !important; --card-mod-icon: mdi:arrow-left-bold-box; {% else %} --tile-color:darkgreen !important; --card-mod-icon: mdi:arrow-right-bold-box; {% endif %} }
die wichtigsten Unterschiede sind:
– statt “:host” lautet der style “ha-card”
– hinter jede farbe muss der zusatz “!important;”
– statt “card-mod-icon-color” muss “tile-color” geschrieben werden