Recently, styling for the alarm_card is updated (Update alarm card styling by bramkragten · Pull Request #25598 · home-assistant/frontend · GitHub). This means I lost the styling of the previous version of this card, showing now a bit of a messy dashboard (I combine alarm_panel with status view of all my open/closed doors, now everything is misaligned).
Question: how can I increase the horizontal and vertical spacing between the keypad buttons.
You will have to learn css and use card-mod.
Same problem here.
All work done with card-mod to slylish the alarm panel is not functional since this update…
Can you share the code please ?
thx
What portion are you trying to mod?
card_mod:
style: |
.keypad {
gap: 40px !important;
background: #333333;
border: 2px solid lime;
border-radius: 40px;
}
thx !
Yes, I try to increase key size (circle + font size)
a start
card_mod:
style: |
ha-control-button {
font-size: 40px !importaNT;
border-radius: 20px;
background: white !important;
}
Let me know if you need additional assistance
Thanks a lot for your help !
I have a last request.
I set background button to transparent, and I would like to increase size of the grey circle (probably a “clickable area” ?)
Here is the code :
card_mod:
style: |
ha-card {
background: transparent;
}
.keypad {
gap: 60px !important;
background: transparent;
border: 1px solid lightgreen;
border-radius: 30px;
}
ha-control-button {
font-size: 50px !important;
background: transparent;
border-radius: 10px;
}
I just crashed. It is Morning here.but I’ll follow up with you this evening
Within the ha-control-button part, add
height: xx px !important;
width: xx px !important;
With the xx values, you can size the circle around the number (can even make them kind of ellips shape)
A little fancier
type: alarm-panel
states:
- arm_home
- arm_away
entity: alarm_control_panel.home_alarm
card_mod:
style:
ha-control-button$: |
button{
--ha-ripple-color: lime;
background-color: black !important;
box-shadow: 0px 1px 0px 0px rgb(0,0,0),
0px 7px 10px 0px rgb(10,10,10),
inset 0px 1px 3px 0px rgba(250, 250, 250, .5),
inset 0px -5px 5px 0px rgba(0, 0, 0, .6);
}
ha-control-button:nth-child(10)$: |
button{
background-color: darkred !important;
color: white !important;
box-shadow: 0px 1px 0px 0px rgb(0,0,0),
0px 7px 10px 0px rgb(10,10,10),
inset 0px 1px 3px 0px rgba(250, 250, 250, .5),
inset 0px -5px 5px 0px rgba(0, 0, 0, .6);
}
.: |
ha-card {
background: transparent;
}
.card-header {
color: #0d9af2;
}
.keypad {
padding: 15px !important;
gap: 30px !important;
background: none;
border: .2px solid grey;
border-radius: 30px;
}
ha-control-button {
font-size: 40px !important;
height: 60px !important;
width: 70px !important;
}
ha-textfield {
max-width: 300px !important;
width: 220px;
background: black !important;
}
Thanks a lot !
That is exactly what I looked for.
Is use this on a wall tablet (10’’) so I need to make it bigger.
I rescale all by 3 2 (font-size: 80px instead of 20px 40px).
At first try, I had an issue with the red cross symbol, which is not affected by font-size, and stayed at same size, which looked a bit tiny !
But I managed to achieve this by rescaling the button (maybe there is a much simplier way to achieve it)
As I rescaled this button by “3” (with “2”, cross was still too small), I had to divide all the other parameters by “3” too, in order to match with the other buttons style.
So I added these lines in the ha-control-button:nth-child(10) field, and result is perfect !
transform: scale(3,3) translate(33%,33%);
height: 40px !important; #120÷3=40
width: 46px !important; #140÷3 ~ 43.3 but 46px looked better
border-radius: 10px !important; #30÷3 = 10
Complete card-mod code :
card_mod:
style:
ha-control-button$: |
button{
--ha-ripple-color: lime;
background-color: black !important;
box-shadow: 0px 1px 0px 0px rgb(0,0,0),
0px 7px 10px 0px rgb(10,10,10),
inset 0px 1px 3px 0px rgba(250, 250, 250, .5),
inset 0px -5px 5px 0px rgba(0, 0, 0, .6);
}
ha-control-button:nth-child(10)$: |
button{
background-color: darkred !important;
color: white !important;
transform: scale(3,3) translate(33%, 33%);
height: 40px !important;
width: 46px !important;
border-radius: 10px !important;
box-shadow: 0px 1px 0px 0px rgb(0,0,0),
0px 7px 10px 0px rgb(10,10,10),
inset 0px 1px 3px 0px rgba(250, 250, 250, .5),
inset 0px -5px 5px 0px rgba(0, 0, 0, .6);
}
.: |
ha-card {
background: transparent;
}
.card-header {
color: #0d9af2;
}
.keypad {
padding: 15px !important;
gap: 30px !important;
background: none;
border: .2px solid grey;
border-radius: 30px;
}
ha-control-button {
font-size: 80px !important;
height: 120px !important;
width: 140px !important;
}
ha-textfield {
max-width: 300px !important;
width: 220px;
background: black !important;
}
Happy to assist!! Looks great 
And yes, the 10th button had slightly different CSS properties. Well done!
