Rahmen um Entity Karte

[Dirk_71]

Hallo
ich habe es ja nun schonmal geschafft mit viel Sucherei hier im Forum
einen Rahmen um einen Button zu zaubern wenn das entsprechende Licht ausgeschaltet ist…

 card_mod:
  style: |-
    ha-card {
      border-radius: 12px;
      border: {{ '1px solid #ff1100' if is_state(config.entity, 'off') else 'none' }};
    }

nun würde ich gerne den Rahmen farblich anpassen wenn der Button gedrückt wurde und das Licht eingeschaltet ist… da verzweifle ich langsam

kann mir da jemand Helfen…

Dankeschön

[harryp]

@Dirk_71

card_mod:

Du kennst diesen Thread?

Wird card-mod mit 2026.8 sterben?

Aufgrund meiner Erfahrung nach dem Update und der darauf folgenden Checks bei den Verdächtigen bin ich schnell auf den Issue im card-mod Github gestossen. Es macht wohl den Eindruck als wird es erst mal keinen Fix geben da der Owner schon lang inaktiv ist und card-mod in Vertretung auf Spur gehalten wurde. Der Bug Ein anderer Kommentar der eher nicht von einer Fortsetzung spricht: Der Nachfolger? Hat schon jemand Erfahrungen mit UIX, bzw eine Migration durchgezogen? Muss man überhaupt wa…

[Dirk_71]

Ich mach sehr viel mit dem Card mode
und bin auch sehr zufrieden, alles was ich bisher gemacht habe funktioniert soweit
nur das ist das einzige was mir den nerv raubt…

[Bacardi]

type: entities
entities:
  - entity: input_boolean.draussen_benachrichtigung_bei_bewegung
    name: Mail bei Terrasse Bewegung?
  - entity: input_boolean.schlafzimmer_schimmel_warnung_sonos_an_aus
    name: Sonos-Schimmel aus/an

card_mod:
  style: |
    ha-card {
      border-radius: 12px;
      border: {{ '1px solid red'
        if is_state(config.entities[1].entity, 'off')
        else 'none' }};
    }

Die Entities Karte erzeugt eine Liste und demzufolge mußt Du sagen config.entities[0] bei Dir sagen oder bei mir 1 für zweiten Eintrag.

oder

Du benennst die Entity direkt in cards_mod

card_mod:
  style: |
    ha-card {
      border-radius: 12px;
      border: {{ '1px solid red' if is_state('input_boolean.draussen_benachrichtigung_bei_bewegung', 'off') else 'none' }};
    }

Wie auch immer, solltest Du den oben angeführten Post ignorieren wollen und bei card_mod bleiben (anstelle UIX) , solltest Du die HA Core Updates aussetzen sonst stehst Du auf einmal vor nicht mehr funktionierenden Farbmodifizierungen. ABER, der Umstieg war nie einfacher, lies einfach.

[rapahl]

Hallo Dirk_71,
Bacardi u. harryp haben da recht. Ich wollte erst auch nicht so recht. Der Umstieg ist sehr einfach auf UIX. Es gibt m.E. gar keinen Grund es nicht zu machen. Nur bei der Apex-Chard-Card hatte ich Probleme. Mit dem recht neuen Apex-Chart-Card-FORK klappt es ohne Probleme.

Und hier ist eine recht gute Übersetzung der UIX-Parameter:

Übersicht | UGSo Open Source

Wenn Du nicht nur Card_mod/UIX sondern auch andere Effekte haben möchtest,
kann ich die die custom-button-card empfehlen. Da kannst Du sogar die Icons rotieren lassen. Wenn ich meine Zirkulationspumpe einschalte, dreht sich das Pumpensymbol:

type: custom:button-card
entity: switch.zirkulation_switch_0
color: orange
color_type: icon
name: WW-Zirkulation
show_name: true
show_icon: true
show_state: false
size: 25%
icon: mdi:water-circle
state:
  - value: 'on'
    styles:
      icon:
        - animation: rotating 1.5s linear infinite
        - color: rgb(from dodgerblue r g b / 95%)
tap_action:
  action: none
icon_tap_action:
  action: more-info
styles:
  card:
    - height: 167px
  icon:
    - color: rgb(from darkseagreen r g b / 90%)
uix:
  style: |
    ha-card {
      background: #010111; !important;
      --ha-card-border-color: #858585;
      --ha-card-border-width: 1.5px;

Oder blinkt und wechselt Farben je nach State:

type: custom:button-card
entity: switch.hc_dhw_dhw_boost
color: yellow
name: WW-Boost
icon: mdi:water-boiler
size: 25%
show_name: true
show_icon: true
show_state: false
state:
  - value: 'on'
    styles:
      icon:
        - animation: blink 1.2s linear infinite
        - color: rgb(from firebrick r g b / 100%)
tap_action:
  action: none
icon_tap_action:
  action: more-info
styles:
  card:
    - height: 167px
  icon:
    - color: rgb(from NavajoWhite r g b / 65%)
    - color: |
        [[[
          if (states['binary_sensor.hc_dhw_dhw_demand'].state == 'on')
            return 'firebrick';
          if (states['binary_sensor.hc_dhw_dhw_demand'].state == 'off')
            return 'rgb(from yellow r g b / 55%)';
        ]]]
uix:
  style: |
    ha-card {
      background: #010111; !important;
      --ha-card-border-color: #858585;
      --ha-card-border-width: 1.5px;
	  
Funktioniert auch zusammen mit Card_mod/UIX

Ist nur ein Vorschlag von mir, Wenn Du in card_mod fit bist und nichts anderes brauchst, ist es in Ordnung. Ich fand die Ergänzung mit der “button-Card” für meine Schalter einfach gut. Wenn Du die schon im Einsatz hast, umso besser.