Das ist CSS. Du müsstest dich also zuerst damit befassen. Die mit Punkt (.) anfangen sind Classes und die Raute (#) anfangen sind ID. CSS ist sehr umfangreich und eine Studie für sich.
https://wiki.selfhtml.org/wiki/CSS
Im Quelltext der Seite solltest du sowohl class="icon-container"
und class="shape"
finden.
chrisba
19. Februar 2024 um 22:53
25
Danke für die schnelle Antwort. Jetzt weiß ich zwei Dinge, wo ich suchen muß und das mir noch einiges an Lernarbeit bevorsteht.
Bib0R
20. April 2024 um 11:27
26
Moin Leute,
ich hab ein “Problem” wohl eher der Luxus Art.
Ich habe es erfolgreich geschafft das Icon anhand von diesem Forum und YT Videos zu ändern. Jedoch nur meinen Trockner der mit einer Leistungsmesssteckdose smart gemacht worden ist.
Nun möchte ich auch meinen Geschirrspüler dahin bekommen das dieser die Farbe des Icon nach dem Zustand ändert. Der ist aber schon von Haus aus Smart und in HA eingebunden.
Ich doktere hier schon seid 2 Tage hin und bekomme es einfach nicht hin.
Von daher wäre es echt knorke wenn Ihr mal raufschauen könntet und mir evtl einen Tritt in die richtige Richtung verschafft.
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.geschirrspuler_operation_state
name: Geschirrspüler
icon: mdi:dishwasher
card_mod:
style: |
ha-card {
{% if states('sensor.geschirrspuler_operation_state') | float = Ready %}
--card-mod-icon-color: green;
{% elif ( states('sensor.geschirrspuler_operation_state') | float = Run )%}
--card-mod-icon-color: orange;
{% endif %}
}
reicht es nicht das so zu schreiben?
card_mod:
style: |
ha-card {
{% if states('binary_sensor.waschmaschine') == 'off' %}
--card-mod-icon-color: green;
{% else %}
--card-mod-icon-color: orange;
{% endif %}
}
1 „Gefällt mir“
Bib0R
20. April 2024 um 17:20
28
Oh cool. Danke,
Bisher klappt es , zumindest wird der “Run” nun als Orange angezeigt. Mal schauen wenn er aus ist ob er dann auf grün umschalter, dann wäre es die Lösung. Danke
So, jetzt muss ich mal ne dumme Frage stellen
Ich möchte meine Kacheln farbig nach Temperatur haben.
Ich habe jetzt schon sämtliche Varianten im Netz versucht und es klappt einfach nicht.
Hinter dem card_mod: kommt nach dem Speichern immer automatisch NULL.
Was sagt mir das?
Kann mir jemand sagen, wo ich den Fehler habe?
type: horizontal-stack
cards:
- type: tile
entity: sensor.gw1100a_v2_2_3_indoor_temperature
card_mod: null
style: |
.icon {
{% if states(sensor.gw1100a_v2_2_3_indoor_temperature)|float(0) > 28 %}
--tile-color: red;
{% elif states(sensor.gw1100a_v2_2_3_indoor_temperature)|float(0) > 25 %}
--tile-color: orange;
{% elif states(sensor.gw1100a_v2_2_3_indoor_temperature)|float(0) > 15 %}
--tile-color: green;
{% else %}
--tile-color: darkblue;
{% endif %}
}
name: Innen
tap_action:
action: navigate
navigation_path: /dashboard-iphone/1
- type: tile
entity: sensor.gw1100a_v2_2_3_outdoor_temperature
name: Außen
tap_action:
action: navigate
navigation_path: /dashboard-iphone/1
show_name: true
show_icon: true
style und die if bis endif müssen weiter eingerückt werden
Wenn ich über den Raw-Konfigurationseditor reingehe, dann rückt er es automatisch immer wieder an die folgende Stelle.
Ändert sich aber dennoch nix.
- type: horizontal-stack
cards:
- type: tile
entity: sensor.gw1100a_v2_2_3_indoor_temperature
card_mod:
style: |
.icon {
{% if states(sensor.gw1100a_v2_2_3_indoor_temperature)|float(0) > 28 %}
--tile-color: red;
{% elif states(sensor.gw1100a_v2_2_3_indoor_temperature)|float(0) > 25 %}
--tile-color: orange;
{% elif states(sensor.gw1100a_v2_2_3_indoor_temperature)|float(0) > 15 %}
--tile-color: green;
{% else %}
--tile-color: darkblue;
{% endif %}
}
name: Innen
tap_action:
action: navigate
navigation_path: /dashboard-iphone/1
Hi, wie genau funzt das?
Ich habe navigation_path: /dashboard/2
eintragen, aber der Navigationsbalken wandert zwar zur 2. Ansicht, aber es findet kein Wechsel statt und der Balken springt wieder zurück.
Im Aktionsmenü Navigieren auswählen und dann die gewünschte Seite aussuchen.
iPhone ist bei mir ein extra Dashboard.
Wenn man der Seite einen Titel vergibt, dann sieht es dementsprechend auch im Code anders aus:
Hast du die Seiten nachträglich noch verschoben?
Das kann alles durcheinander bringen, wenn die Seiten keinen Titel haben.
Hatte ich auch schon, deswegen habe ich mir angewöhnt einen Titel anzugeben.
Sieht so bei mir aus (das Ziel)
Titel habe ich überall vergeben.
Ich habe keinen Navigationspfad?!
Ich habe es bei meinen Strombezug und -verbrauch so gelöst:
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.fritz_dect_210_3_leistung
name: ' BKW Leistung '
secondary_info: last-updated
hold_action:
action: navigate
navigation_path: /dashboard/3
card_mod:
style: |
ha-card {
{% set state = states('sensor.fritz_dect_210_3_leistung') | int %}
{% if state <= 1 %}
--text-color: black;
{% elif state <= 50 %}
--text-color: red;
{% elif state <= 200 %}
--text-color: orange;
{% elif state <= 450 %}
--text-color: yellow;
{% elif state <= 800 %}
--text-color: yellowgreen;
{% endif %}
}
use_entity_picture: true
alignment: centered
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.volkszahler_power_curr
name: ' Verbrauch aktuell '
secondary_info: last-updated
card_mod:
style: |
ha-card {
{% set state = states('sensor.volkszahler_power_curr') | int %}
{% if state >= -1 %}
--text-color: red;
{% elif state >= -50 %}
--text-color: orange;
{% elif state >= -250 %}
--text-color: yellow;
{% elif state >= -800 %}
--text-color: yellowgreen;
{% endif %}
}
use_entity_picture: true
alignment: left-aligned
Warum ist die Schrift/Icons ist/sind viel kleiner als bei anderen Kacheln?
Also ich habe dazu eine Kachel genutzt und somit die Aktion mit dem Einfach Tipp / Klick. Dort von Standart auf Navigieren geändert.
Dann kommt das neue Feld mit dem Pfad dazu. Und dort suchst du dir die gewünschte Seite aus.
Du kannst es aber auch bei deiner jetzigen mit dem Doppeltipp ausprobieren. Geht da genau so.
Der Pfad wird dann automatisch eingetragen.
Müsste dann sowas wie Dashboard/lights_switches oder so ähnlich heißen.
Sicher mit dem “&” Zeichen?
Ich hab’s:
lovelace/1
Heißt der Pfad bei mir.
Nee, bin mir. nicht sicher.
Habe da keine & Zeichen drin.
Ist das bei jeder Seite so?
Geht bei mir auch nicht…
Ich verstehe es nicht.
type: horizontal-stack
cards:
- type: tile
entity: sensor.gw1100a_v2_2_3_indoor_temperature
card_mod:
style: |
.icon {
{% set state = states('sensor.gw1100a_v2_2_3_indoor_temperature') | int %}
{% if state >= 1 %}
--icon-color: red;
{% elif state >= 16 %}
--icon-color: green;
{% endif %}
}
name: Innen
tap_action:
action: navigate
navigation_path: /dashboard-iphone/1
- type: tile
entity: sensor.gw1100a_v2_2_3_outdoor_temperature
name: Außen
tap_action:
action: navigate
navigation_path: /dashboard-iphone/1
Hat sich ja erledigt, der Pfad heißt ja dashboard/lovelace/xx
bei mir.
Damit kann ich nun zwischen den vielen Karten schnell hin- und her springen.
Liegt es u.a. am fehlenden Eintrag: custom:mushroom-chips-card
?
Ist ja nen tile also ne Kachel und keine Chips-Card.
Habe es nun hinbekommen:
- type: horizontal-stack
cards:
- type: tile
entity: sensor.gw1100a_v2_2_3_indoor_temperature
name: Innen
tap_action:
action: navigate
navigation_path: /dashboard-iphone/1
show_entity_picture: false
hide_state: false
card_mod:
style: |
ha-card {
{% if states('sensor.gw1100a_v2_2_3_indoor_temperature') | float <= 0 %}
--card-mod-icon-color: purple;
{% elif ( states('sensor.gw1100a_v2_2_3_indoor_temperature') | float <= 15 )%}
--card-mod-icon-color: blue;
{% elif ( states('sensor.gw1100a_v2_2_3_indoor_temperature') | float >= 15 )%}
--card-mod-icon-color: lightblue;
{% elif ( states('sensor.gw1100a_v2_2_3_indoor_temperature') | float >= 19 )%}
--card-mod-icon-color: green;
{% elif ( states('sensor.gw1100a_v2_2_3_indoor_temperature') | float >= 25 )%}
--card-mod-icon-color: orange;
{% elif ( states('sensor.gw1100a_v2_2_3_indoor_temperature') | float >= 30 )%}
--card-mod-icon-color: red;
{% endif %}
}
Sobald du von <= auf >= wechselst, musst du mit 30 anfangen und dann runter gehen. Denn z. B. 27 ist >= 15. Damit greift immer dieses elif.
1 „Gefällt mir“
Ahhhh… lol, na klar, bei = können ja nicht 2 mal die gleiche Zahl kommen.
Also es funktioniert super.
Hab es mit verschiedenen Werten getestet.
Danke dir…
Anderes Problem, was ich nun habe ist, dass ich den Hintergrund vom Icon nicht wegbekomme.
Also diesen Kreis um das Thermometer.
Jatzt habe ich das Problem, dass ein anderer User ein Dashboard sieht (wenn er darauf navigiert), dass er lt. Companion App gar nicht sehen sollte🤯