oh sorry I should have reported it: 2023.1.0
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 %}
}
Disarmed is still gray 
Can you post your code, I can assure you this code is working on my side
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 %}
}
1 Like
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
1 Like
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!!! 
Is it possible that on android APP the card_mod is not working? :-X
Its working on mine including iOS
1 Like
After style: you put the > character that is not present in the solution I gave
Hi Kolia, in the screenshot “>” is already present
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
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
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 %} }
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 %}
}
type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.alarmo
name: ALLARME STUDIO
states:
- armed_home
- armed_away
- armed_custom_bypass
- disarmed
layout: horizontal
fill_container: false
show_keypad: false
style: |
ha-card {
background-color: {{ 'rgba(222, 40, 27, 0.4)' if is_state('alarm_control_panel.alarmo', 'disarmed') else 'rgba(177, 222, 27, 0.2)' }};
overflow: hidden !important;
box-shadow: none !important;
}
card_mod:
style: |
ha-card {
background: {{ 'rgba(222, 40, 27, 0.4)' if is_state('alarm_control_panel.alarmo', 'disarmed') else 'rgba(177, 222, 27, 0.2)' }};
--ha-card-box-shadow: 0px;
--ha-card-box-shadow: {{ "0px 0px 4px green" if is_state('alarm_control_panel.alarmo', 'armed_away') }};
}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
title: ALARMO
data:
content:
type: custom:mod-card
style: |
ha-card {
padding-right: 25px;
padding-left: 25px;
padding-bottom: 25px;
padding-top: 25px;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ALARMO
secondary: '{{ states.alarm_control_panel.alarmo.state }}'
icon_color: red
icon: mdi:plus-circle-outline
fill_container: true
layout: vertical
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
card_mod:
style: |
ha-card {
height: 102px;
background: url('/local/alarmo/alarmos.jpg') center;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.8);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: script.sensore_presenza_studio_fp1_reset_nopresence_status
icon: mdi:lock-off
name: DISARMA ALLARME
icon_color: yellow
tap_action:
action: call-service
service: alarmo.disarm
data:
entity_id: alarm_control_panel.alarmo
code: 'XXXXXX'
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: light.luce_studio
icon: mdi:lock-alert-outline
name: ALLARME FUORI CASA
icon_color: yellow
tap_action:
action: call-service
service: alarmo.arm
data:
entity_id: alarm_control_panel.alarmo
code: 'XXXXXX'
mode: away
force: true
skip_delay: true
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: light.striscia_led_mobile_studio
icon: mdi:lock-off-outline
name: ALLARME CUSTOM
icon_color: yellow
tap_action:
action: call-service
service: alarmo.arm
data:
entity_id: alarm_control_panel.alarmo
code: 'XXXXXX'
mode: custom
force: true
skip_delay: true
1 Like
Thank Kolia !!! You are the best !!!
type: vertical-stack
cards:
- type: alarm-panel
states:
- arm_away
- arm_home
entity: alarm_control_panel.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 %} }
ha-chip:
$: |
div:nth-child(1) {
{% if is_state("alarm_control_panel.allarme", "disarmed") %}
background-color: green;
{% elif is_state("alarm_control_panel.allarme", "armed_away") %}
background-color: red;
{% elif is_state("alarm_control_panel.allarme", "armed_home") %}
background-color: orange;
{% else %}
background-color: grey;{% endif %} }