Alarm panel: change background color of status button

[kolia]

Hello,
I’m trying to figure out without success so far to change the background color of the status button of the alarm panel

I’d like to get it green for instance. I’ve no clue on how to access this property using card_mod
Thank you

[tom_l]

What version of Home Assistant are you on?

Pretty sure this has been changed back to green in the latest version.

[kolia]

oh sorry I should have reported it: 2023.1.0

[kolia]

After a lot of sweat; but this is a good exercise, here is the working code. Can it be optimized?

type: vertical-stack
cards:
  - type: alarm-panel
    states:
      - arm_night
      - arm_away
    entity: alarm_control_panel.610
    card_mod:
      style:
        ha-chip:
          $: |
            div:nth-child(1) {
                {% if is_state("alarm_control_panel.610", "disarmed") %}
                  background-color: green;
                {% else %}
                  background-color:orangered;
                {% endif %} 
              }

[ukro]

Disarmed is still gray

[kolia]

Can you post your code, I can assure you this code is working on my side

[ukro]

states:
  - arm_home
  - arm_away
entity: alarm_control_panel.domek
card_mod:
  style:
    ha-chip:
      $: |
        div:nth-child(1) {
            {% if is_state("alarm_control_panel.domek", "disarmed") %}
              background-color: green;
            {% else %}
              background-color:orangered;
            {% endif %} 
          }

[kolia]

In order to make sure this is nothing in the code that could prevent it to work could you please post the code of the whole card?
Do you confirm that card_mod is indeed installed and working?
EDIT: as you see in the original code I posted there is a vertical stack on top. It could be that the reference of the object we want to change color is not the same. Try to put a vertical stack in case there is none

[ukro]

Thank you for taking the time!!! I didn’t know that card_mod is some script that need to be setup. Now its working perfectly!!!

[ukro]

Is it possible that on android APP the card_mod is not working? :-X

[kolia]

Its working on mine including iOS

[sdavides (p)]

hi Kolia in my case still grey:

Can you help me?
Thank

[sdavides (p)]

If I edit html code manual it work:

[kolia]

After style: you put the > character that is not present in the solution I gave

[sdavides (p)]

Hi Kolia, in the screenshot “>” is already present

[kolia]

I think you don’t understand what I’m trying to say. > is not present in the solution I gave, hence it shall be removed

[sdavides (p)]

OK sorry work:

but i have also “ha-card” in the style and if i remove “>” code is invalid:

[kolia]

There is a very nice tutorial (French) that explains how to handle both. Jump at the end of it, you’ll see how to proceed

[sdavides (p)]

Thanks, I already read but I can’t understand
how do i add

My original code:

type: alarm-panel
states:

• arm_home
• arm_away
  entity: alarm_control_panel.allarme
  name: Allarme
  card_mod:
  style: >
  ha-card { border-radius: 10px 10px 0px 0px ;border-bottom: hidden;
  z-index:5; {% set state=states(‘alarm_control_panel.allarme’) %} {% if
  state==‘armed_away’ %} border-width: 10px; border-color: red; {% elif
  state==‘armed_home’ %} border-width: 8px; border-color: orange; {% elif
  state==‘disarmed’ %} border-width: 4px; border-color: green; {% elif
  state==‘triggered’ %} border-width: 15px; border-color: red; {% elif
  state!=‘disarmed’ %} {% else %} {% endif %} {% set
  state_errore=states(‘sensor.stato_allarme’) %} {% if state_errore==‘errore’
  %} border-width: 10px; border-color: red; {% else %} {% endif %} {% set
  state_sos=states(‘switch.tasto_sos’) %} {% if state_sos==‘on’ %}
  border-width: 10px; border-color: red; {% else %} {% endif %} }

[kolia]

Could you please the entire code of this card using the code button in order to see all indentations? Thank you
EDIT
And can you tell us whether the ha-card alone is working
EDIT1: here is the working code

type: vertical-stack
cards:
  - type: alarm-panel
    states:
      - arm_night
      - arm_away
    entity: alarm_control_panel.610
    card_mod:
      style:
        .: |
          ha-card {
          border-radius: 10px 10px 10px 10px;
          border-bottom: hidden;
          }
        ha-chip:
          $: |
            div:nth-child(1) {
                {% if is_state("alarm_control_panel.610", "disarmed") %}
                  background-color: green;
                {% else %}
                  background-color:darkred;
                {% endif %} 
              }