Alarm panel: change background color of status button

oldguy207244 · December 8, 2023, 3:03pm

I am posting a reply to this older post because - I was running HA Core 11.3 and upgraded to Core 12.0 and had issues. I did not write any of this code - but have enjoyed the benefit of the color change to green and red on the alarm panel provided by kolia - I have posted the code as well which now fails - it is not all kolia’s code - Being a senior I needed the keypad a little larger all around - it now fits full screen to my Fire HD8 - so there are 2 sets of styling in the attached code one for state color change and one for larger key pad - after the 12.0 upgrade it was once again a small keypad and the state background was gray - I took apart these 2 and found with just the styling of the larger keypad lines 18-52 - it worked - I had a larger keypad again. I am at a loss at finding out what happened with the card mod color changes - lines 8-17 - kolia as I understand it will gracefully take a look at if on his end it was affected - I am running Home Assistant add on - not running docker - if that matters - Thanks for any help with this - all my efforts for 2 days were to no avail - its been a while for the larger key pad code I found - I did not write it was from another HA member - again I have enjoyed the benefit of

states:
  - arm_home
  - arm_away
type: alarm-panel
entity: alarm_control_panel.alarmo
name: Alarm
card_mod:
  style:
    ha-chip:
      $: |
        div:nth-child(1) {
            {% if is_state("alarm_control_panel.alarmo", "disarmed") %}
              background-color: green;
            {% else %}
              background-color:red;
            {% endif %}
            }                                           
      style: |
        ha-card { 
               --paper-input-container-shared-input-style_-_font-size: 2.5rem;
               --keypad-font-size:2.5rem;
               --mdc-typography-button-font-size: 1.3rem;
               --mdc-button-outline-color: rgba(0, 0, 0, 0);
               --paper-font-subhead_-_font-size: 1.5rem;
               --mdc-shape-small: 100%;
             }
             #keypad {
               width: 30%;
               max-width: 500px !important;
             }
             #keypad mwc-button {
               border-radius: 5px;
             }
             mwc-button.numberkey {
               border-color: rgba(100,100,100,.1);
               border-width: 2px;
               border-style: solid;
             }
             #keypad mwc-button:hover {
               background: rgba(100,100,100,.2);
             }
             #keypad mwc-button {
               padding: 17px !important;
               margin: 4px;
               width: 10%;
               box-sizing: border-box;
               height: 73px;           
             }
             paper-input {
                 max-width: 300px !important;
             } 
               }

sdavides · December 11, 2023, 1:37pm

@kolia
Your awesome code doesn’t work anymore, can you help us?

kolia · December 11, 2023, 3:03pm

I haven’t yet upgraded. I’ll keep you posted as soon as it done and have the solution

oldguy207244 · December 11, 2023, 3:13pm

After upgrading to HA Core 12.0 and had the issue of the state now gray again I used a recent backup to go back to HA Core 11.3 and of course everything is working again - I was wondering if the version of Alarmo was updated in the HA Core 12.0 update- In HA Core 11.3 the version of Alarmo is V1.9.13 - sdavides if you are still in HA Core 12.0 can you tell me what the version of Alarmo is ? trying to figure out if it was an updated core issue or updated Alarmo version issue -

I ran across another post of Kolia where he was replying to another user who wanted the background color changed on buttons and the armed badge - there were no if-then for states and that partially worked - meaning in HA 12.0 it failed on the change for the state- armed or disarmed to green but worked on the button part of it - being a novice and if I were to hazard a guess it would be the addressing of the line div:nth-child(1) not working in 12.0

This is the other code I am referring to - it’s relevance is the alarm state badge div:nth-child(1) does not turn green stays gray - the button however turns green

type: alarm-panel
states:
  - arm_home
  - arm_away
entity: alarm_control_panel.610
card_mod:
  style:
    ha-chip:
      $: |
        div:nth-child(1) {
          background-color: green;
        }
    '#armActions':
      mwc-button:nth-child(1):
        $: |
          #button  {
            background-color: green
          }
            span.slot-container > slot {
              color: yellow;
            }

kolia · December 12, 2023, 12:27am

Some change occured in the DOM.
Here is the new 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: 20px 20px 20px 20px;
          border-bottom: hidden;
          }
        ha-assist-chip:
          $: |
            div > md-ripple {
              {% if is_state("alarm_control_panel.610", "disarmed") %}
                background-color: green;
              {% else %}
                background-color:darkred;
              {% endif %}             
            }

oldguy207244 · December 12, 2023, 2:12am

Thanks so much for your time - very much appreciated - I upgraded to 12.1 and it works again with your revision - just trying to figure out how to get the sizing working again - I’m not the best at that but I’m sure Ill figure it out somehow - Thanks again

sdavides · December 12, 2023, 8:56am

Thankyou Kolia, you are the best.

kolia · December 12, 2023, 11:11am

For the buttons, basically you’d like to have bigger buttons, isn’t?
Edit with solution
Maybe you could try that?

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

oldguy207244 · December 12, 2023, 2:18pm

this screenshot works as a perfect fit to my Fire Tablet HD8 - it is my inability or lack of knowledge on how to join this code for the large key pad and the newly revised code for the green and red color changes all in one so I get the big key pad and green and red on the armed badge. Here are both sets that work independent of each other I do not know how to join them

states:
  - arm_home
  - arm_away
type: alarm-panel
entity: alarm_control_panel.alarmo
name: Alarm
card_mod:
  style:
    ha-assist-chip:
      $: |
        div > md-ripple {
          {% if is_state("alarm_control_panel.alarmo", "disarmed") %}
            background-color: green;
          {% else %}
            background-color: red;
          {% endif %}             
        }

and for the key pad

card_mod:
  style:
    .: |
      ha-card { 
           --paper-input-container-shared-input-style_-_font-size: 2.5rem;
           --keypad-font-size:2.5rem;
           --mdc-typography-button-font-size: 1.3rem;
           --mdc-button-outline-color: rgba(0, 0, 0, 0);
           --paper-font-subhead_-_font-size: 1.5rem;
           --mdc-shape-small: 100%;
         }
         #keypad {
           width: 30%;
           max-width: 500px !important;
         }
         #keypad mwc-button {
           border-radius: 5px;
         }
         mwc-button.numberkey {
           border-color: rgba(100,100,100,.1);
           border-width: 2px;
           border-style: solid;
         }
         #keypad mwc-button:hover {
           background: rgba(100,100,100,.2);
         }
         #keypad mwc-button {
           padding: 17px !important;
           margin: 4px;
           width: 10%;
           box-sizing: border-box;
           height: 73px;           
         }
         paper-input {
             max-width: 300px !important;
         } 
        }

kolia · December 12, 2023, 2:33pm

Did you try that?

states:
  - arm_home
  - arm_away
type: alarm-panel
entity: alarm_control_panel.alarmo
name: Alarm
card_mod:
  style:
    .: |
      ha-card { 
           --paper-input-container-shared-input-style_-_font-size: 2.5rem;
           --keypad-font-size:2.5rem;
           --mdc-typography-button-font-size: 1.3rem;
           --mdc-button-outline-color: rgba(0, 0, 0, 0);
           --paper-font-subhead_-_font-size: 1.5rem;
           --mdc-shape-small: 100%;
         }
         #keypad {
           width: 30%;
           max-width: 500px !important;
         }
         #keypad mwc-button {
           border-radius: 5px;
         }
         mwc-button.numberkey {
           border-color: rgba(100,100,100,.1);
           border-width: 2px;
           border-style: solid;
         }
         #keypad mwc-button:hover {
           background: rgba(100,100,100,.2);
         }
         #keypad mwc-button {
           padding: 17px !important;
           margin: 4px;
           width: 10%;
           box-sizing: border-box;
           height: 73px;           
         }
         paper-input {
             max-width: 300px !important;
         } 
        }          
    ha-assist-chip:
      $: |
        div > md-ripple {
          {% if is_state("alarm_control_panel.alarmo", "disarmed") %}
            background-color: green;
          {% else %}
            background-color: red;
          {% endif %}             
        }

oldguy207244 · December 12, 2023, 3:12pm

Kolia
I got it to work - it was a format issue on my part - THANKS AGAIN !

maxxar · December 19, 2023, 9:39am

I’ve been using the following code to change the color on the chip in upper right corner
But i’ll think since last update the color not changing.
Anyone else having this problem?

card_mod:
       style:
         ha-chip:
      $: |
        div:nth-child(1) {
             {% if is_state("alarm_control_panel.dscalarm_partition_1", "disarmed") %}
                 background-color: green;
             {% elif is_state("alarm_control_panel.dscalarm_partition_1", "armed_away") %}
               background-color: red;
             {% elif is_state("alarm_control_panel.dscalarm_partition_1", "armed_home") %}
               background-color: orange;
             {% else %}
               background-color: grey;
            {% endif %} }

kolia · December 19, 2023, 2:15pm

Review post 44 solution is here

maxxar · December 28, 2023, 12:58pm

Thank you kolia!

I can confirm that it works after code change as follows

card_mod:
  style:
    ha-assist-chip:
      $: |
        div > md-ripple {
             {% if is_state("alarm_control_panel.dscalarm_partition_1", "disarmed") %}
               background-color: green;
             {% elif is_state("alarm_control_panel.dscalarm_partition_1", "armed_away") %}
               background-color: red;
             {% elif is_state("alarm_control_panel.dscalarm_partition_1", "armed_home") %}
               background-color: orange;
             {% else %}
               background-color: grey;
			 {% endif %} }

kolia · December 29, 2023, 6:54am

thank you for confirming.

sdavides · February 9, 2024, 1:28am

Hi Kolia, what’s been happening to the icon for a few days?
is not online

immagine

kolia · February 9, 2024, 5:30am

Could you be more specific? I’m currently running HAOS 2024.1.4 without any trouble

sdavides · February 9, 2024, 6:05pm

HAOS 2024.2.0
CARD-MOD 3.4.1

immagine

sdavides · February 9, 2024, 6:13pm

I believe add “leading icon” “margin-top=-8px;”

kolia · February 9, 2024, 8:32pm

strange, mine is centered. Are you using a specific theme for instance?