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 %} }
Glad that it helped you. I might “steal” a bit of your code, I find it nice to change border color depending on state. Still waiting to get a real integration though. Did you for vote for this feature request?
I’m glad you steal my code, I just updated the post with my correct code, now I’m voting but I don’t know how it’s my first time using the community, can I ask you one more thing about css? card_mod no longer works with “type:custom:more-info-card”
Font size and backgroud color for title
Sorry I’m not familiar with “type:custom:more-info-card”
OK thank you
Are you using android? Is the correct color also?
Yes also on Android
Interesting, will try your config 
Thx
Nah still gray on android :-/ did it work right away? Are you using android app or webapp? Is connection https?
Working on android app using https
1 Like
https, official app homeassistant, you put
frontend:
extra_module_url:
- /local/community/lovelace-card-mod/card-mod.js
in configuration.yaml ?
Yeah
frontend:
themes: !include themes.yaml
extra_module_url:
- /local/card-mod.js
did you install card-mod manually or from hacs?
manualy just downloaded the file
Install from hacs !!
It seems to me, but I’d like confirmation by community, that the need to change button colors is due to a recent change to some default of the theme alarm_control_panel values look here. In other words, if I’m right, a definitive change would require overriding these values with a specific theme. Any thoughts?
Thank you for pointing me to right direction 
I used this guide, now its working 
1 Like
Hi
Is it possible to change the color of the status icon? In the .yaml file of the theme I can’t find references (Google Dark theme ), I use the custom Alarmo card…
It is certainly achievable, you have to get familiar with card_mod. I’m using regular alarm panel, so I unfortunately can’t help you on this specific matter.