Einfärben von Icons

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.

Danke für die schnelle Antwort. Jetzt weiß ich zwei Dinge, wo ich suchen muß und das mir noch einiges an Lernarbeit bevorsteht.

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.

Screenshot 2024-04-20 at 13-24-47 Übersicht – Home Assistant

- 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“

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 :face_with_hand_over_mouth:

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

Clipboard 06.05.2024, 18.48

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. :wink:

Ist das bei jeder Seite so?

Geht bei mir auch nicht…
Ich verstehe es nicht. :face_with_raised_eyebrow:

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. :sweat_smile:

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… :upside_down_face:

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🤯