Nemu
February 15, 2024, 6:50pm
416
This is my code for the card.
type: custom:button-card
entity: switch.steckdose_waschkuche
name: Waschmaschine
icon: |
[[[
if (states['sensor.waschmaschine_status'].attributes.cycle == 'starting') {
return 'mdi:dots-circle';
} else if (states['sensor.waschmaschine_status'].attributes.cycle == 'washing') {
return 'mdi:circle-half-full';
} else if (states['sensor.waschmaschine_status'].attributes.cycle == 'finishing') {
return 'mdi:dots-circle';
} else if (states['sensor.waschmaschine_status'].attributes.cycle == 'end') {
return 'mdi:washing-machine';
}
]]]
show_name: true
show_icon: true
show_label: true
show_state: false
hold_action:
action: more-info
label: |
[[[
if (states['sensor.waschmaschine_status'].attributes.cycle == 'starting') {
return 'starten';
} else if (states['sensor.waschmaschine_status'].attributes.cycle == 'washing') {
return 'wƤscht';
} else if (states['sensor.waschmaschine_status'].attributes.cycle == 'finishing') {
return 'wird beendet';
} else if (states['sensor.waschmaschine_status'].attributes.cycle == 'end') {
return 'Ende';
}
]]]
custom_fields:
bar: |
[[[
var color = "green";
var state = 100 - states['sensor.waschmaschine_timer'].attributes.remaining_perc;
if (state < 10) color = "red";
else if (state < 50) color = "yellow";
else if (state < 70) color = "orange";
return `
<div>
<div style="background:${color}; height: 12px; width:${state}%">
</div>
</div>`
]]]
rem:
card:
type: conditional
conditions:
- condition: state
entity: switch.steckdose_waschkuche
state: 'on'
card:
type: custom:button-card
entity: sensor.waschmaschine_timer
name: |
[[[
var remainingTime = states['sensor.waschmaschine_timer'].attributes.remaining;
return `Restlaufzeit: ${remainingTime}`;
]]]
show_icon: false
styles:
card:
- width: min
- background: none
- overflow: visible
name:
- font-size: 14px
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
- font-weight: 500
start:
card:
type: conditional
conditions:
- condition: state
entity: switch.steckdose_waschkuche
state: 'on'
card:
type: custom:button-card
entity: sensor.waschmaschine_timer
name: |
[[[
var endTime = states['sensor.waschmaschine_timer'].attributes.triggered;
// Extract time from the end time
var time = new Date(endTime).toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit', hour12: false});
return `${time} Uhr`;
]]]
show_icon: false
styles:
card:
- width: min
- padding: 5px
- background: none
name:
- font-size: 12px
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
end:
card:
type: conditional
conditions:
- condition: state
entity: switch.steckdose_waschkuche
state: 'on'
card:
type: custom:button-card
entity: sensor.waschmaschine_timer
name: |
[[[
var endTime = states['sensor.waschmaschine_timer'].attributes.end_time;
// Extract time from the end time
var time = new Date(endTime).toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit', hour12: false});
return `${time} Uhr`;
]]]
show_icon: false
styles:
card:
- width: min
- padding: 5px
- background: none
name:
- font-size: 12px
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
icon1: |
[[[
return '<ha-icon icon="mdi:washing-machine"></ha-icon>';
]]]
icon2: |
[[[
if (entity.state == "on"){
return '<ha-icon icon="mdi:toggle-switch-outline"></ha-icon>';
} else {
return '<ha-icon icon="mdi:toggle-switch-off-outline"></ha-icon>';
}
]]]
styles:
grid:
- grid-template-areas: '". icon1" "l l" "n icon2" "rem icon2" "bar bar" "start end"'
- grid-template-rows: 24px 1fr 24px min-content min-content min-content
- grid-template-columns: 60% 40%
card:
- height: 100%
- padding: 1rem
- background: |
[[[
if (entity.state == 'on') {
return 'var(--green)';
} else {
return 'var(--primary-text-color)';
}
]]]
img_cell:
- position: absolute
- top: 20%
- left: 40%
- overflow: visible
icon:
- position: absolute
- width: 20em
- opacity: 20%
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
- transform: rotate(-20deg)
- animation: |
[[[
if (states['sensor.waschmaschine_status'].attributes.cycle == 'end') {
return 'null';
} else if (states['sensor.waschmaschine_status'].attributes.cycle == 'starting') {
return 'blink 1.5s linear infinite';
} else if (states['sensor.waschmaschine_status'].attributes.cycle == 'washing') {
return 'rotating 2s linear infinite';
} else if (states['sensor.waschmaschine_status'].attributes.cycle == 'finishing') {
return 'blink 1.5s linear infinite';
}
]]]
label:
- text-align: left
- font-size: 14px
- font-weight: 500
- justify-self: start
- align-self: end
- overflow: visible
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
name:
- text-align: left
- font-size: 12px
- opacity: 0.7
- justify-self: start
- align-self: center
- overflow: visible
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
custom_fields:
bar:
- justify-self: start
- width: 100%
- height: |
[[[
if (entity.state == 'off') {
return '0px';
} else {
return '12px';
}
]]]
- background: '#cccccc'
- border-radius: 24px
end:
- justify-self: end
start:
- justify-self: start
rem:
- justify-self: start
- align-self: end
- height: |
[[[
if (entity.state == 'off') {
return '0px';
} else {
return '27px';
}
]]]
icon1:
- justify-self: end
- width: 24px
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
icon2:
- justify-self: end
- align-self: end
- width: 24px
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
hold_action:
action: more-info
1 Like
Nemu
February 16, 2024, 1:51pm
417
Just one further code. To get the washing machine timer / countdown to also count the seconds, add this to your automation.yaml
- alias: "Update waschmaschine_timer every second"
trigger:
- platform: time_pattern
seconds: "/1"
action:
- service: homeassistant.update_entity
entity_id: sensor.waschmaschine_timer
1 Like
jlnbln
February 28, 2024, 9:33am
419
Hey, first thanks for all the work! I like your design. I tried implementing your alarm card into my dashboard. I had to change it a bit to make it work properly, but one thing I canāt figure out is how to change the color of the selected mode.
This is the template code I am using.
alarm:
template: base
icon: mdi:shield-home
variables:
active_color: red
state:
- value: disarmed
icon: mdi:shield-off-outline
custom_fields:
cs: Disarmed
- value: armed_night
icon: mdi:shield-moon
custom_fields:
cs: Night
- value: arming
icon: mdi:shield-lock-open
styles:
icon:
- animation: blink 2s ease infinite
custom_fields:
cs: Arming...
- value: armed_away
icon: mdi:shield-lock
custom_fields:
cs: Away
- value: armed_home
icon: mdi:shield-home
custom_fields:
cs: Home
- value: triggered
icon: mdi:shield-alert-outline
styles:
card:
- background-color: var(--red)
name:
- color: var(--black)
icon:
- color: var(--black)
- animation: blink 2s ease infinite
custom_fields:
cs:
- color: var(--black)
es:
- color: var(--black)
custom_fields:
cs: Triggered
styles:
grid:
- grid-template-areas: '"i i" "cs ec" "n ec"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
ec:
- justify-self: start
- justify-content: center
cs:
- color: var(--contrast18)
es:
- color: var(--contrast18)
card:
- background: var(--contrast2)
icon:
- color: var(--contrast18)
name:
- color: var(--contrast12)
custom_fields:
ec:
card:
type: tile
entity: '[[[ return entity.entity_id; ]]]'
color: red
features:
- type: alarm-modes
modes:
- armed_away
- armed_night
- armed_home
- disarmed
card_mod:
style:
.: |
ha-card .content {
display: none;
} ha-card {
width: 200px;
background: transparent;
border-radius: 0px;
} ha-card.active {
height: 40px;
}
.features hui-alarm-modes-tile-feature $: |
.container {
padding: 0px !important;
}
.features hui-alarm-modes-tile-feature $ .container ha-control-select $ .container: |
.option {
background-color: transparent !important;
border-radius: 13px !important;
}
.option.selected {
--control-select-color: var(--yellow) !important;
}
This is the part that I think doesnāt work.
.features hui-alarm-modes-tile-feature $ .container ha-control-select $ .container: |
.option {
background-color: transparent !important;
border-radius: 13px !important;
}
.option.selected {
--control-select-color: var(--yellow) !important;
}
Any ideas how I can fix it?
And I also have a second question. I was trying to use your apex-chart code, but for some reason the colors donāt work. If I put regular colors it works, but if I use a variable like var(āgreen) it doesnāt. Any ideas how to fix that?
jlnbln
February 28, 2024, 10:34pm
420
I took this card and made two person cards of it. In case anyone wants to use them here is the code.
Big Version:
type: custom:button-card
name: Person
show_name: false
show_state: false
show_icon: true
show_entity_picture: true
entity: person.person
tap_action:
action: more-info
styles:
card:
- background-color: var(--contrast2)
- padding: 10px 0px 10px 10px
grid:
- grid-template-areas: '"name name btn" "state btn1 btn" "icon btn1 btn"'
- grid-template-columns: 3fr min-content min-content
- grid-template-rows: 1em 1em 1fr
img_cell:
- justify-content: start
- position: absolute
- width: 90px
- height: 90px
- left: 0
- bottom: 0
- margin: 0 0 -10px -10px
- border-radius: 500px
entity_picture:
- justify-content: start
- position: absolute
- width: 90px
- height: 90px
- left: 0
- bottom: 0
- margin: 0 0 0 0
- border-radius: 500px
icon:
- width: 45px
- color: var(--contrast1)
custom_fields:
name:
- align-self: start
- justify-self: start
- background: none
- padding: 5px
state:
- align-self: start
- justify-self: start
- background: none
- padding: 5px
- margin-top: 5px
btn1:
- align-self: end
- justify-self: end
- padding-right: 8px
btn:
- align-self: end
- justify-self: end
- padding-right: 5px
icon:
- align-self: start
- justify-self: start
custom_fields:
name:
card:
type: custom:button-card
name: Person
styles:
card:
- color: var(--contrast20)
- font-size: 18px
- font-weight: 500
- background: none
state:
card:
type: custom:button-card
entity: person.person
show_icon: false
name: |
[[[
return states['person.person'].state;
]]]
state:
- value: home
name: Home
- value: not_home
name: Away
styles:
card:
- color: var(--contrast20)
- font-size: 13px
- background: none
- opacity: '0.7'
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: entity
tap_action:
action: more-info
entity: sensor.person_battery_level
content_info: none
card_mod:
style: |
ha-card {
--chip-background: {{ 'var(--contrast4)' if states('sensor.person_battery_level') | float > 10 else 'var(--red)' }};
--color: {{ 'var(--contrast20)' if states('sensor.person_battery_level') | float > 10 else 'var(--black)' }};
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: entity
tap_action:
action: more-info
entity: sensor.person_iphone_steps
content_info: none
card_mod:
style: |
ha-card {
--chip-background: {{ 'var(--green)' if states('sensor.person_iphone_steps') | float > states('sensor.person2_iphone_steps') | float else 'var(--red)' }};
--color: var(--black);
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: entity
tap_action:
action: more-info
entity: sensor.home_person_direction_of_travel
content_info: none
card_mod:
style: |
ha-card {
--chip-background: var(--contrast4);
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
}
Small Version:
type: custom:button-card
name: Person
show_name: false
show_state: false
show_icon: true
show_entity_picture: true
entity: person.Person
tap_action:
action: more-info
styles:
card:
- background-color: var(--contrast2)
- padding: 10px 10px 10px 0px
grid:
- grid-template-areas: '"icon name btn" "icon state btn"'
- grid-template-columns: 60px 1fr min-content
- grid-template-rows: min-content
img_cell:
- justify-content: start
- position: absolute
- width: 40px
- height: 40px
- left: 0
- bottom: 0
- margin: 0 0 8px 10px
- border-radius: 500px
entity_picture:
- justify-content: start
- position: absolute
- width: 40px
- height: 40px
- left: 0
- bottom: 0
- margin: 0 0 0 0
- border-radius: 500px
icon:
- width: 50px
- color: var(--contrast1)
custom_fields:
name:
- align-self: start
- justify-self: start
- background: none
- padding: 0
state:
- align-self: start
- justify-self: start
- background: none
- padding: 0
- margin-top: '-5px'
btn:
- align-self: end
- justify-self: end
icon:
- align-self: start
- justify-self: start
custom_fields:
name:
card:
type: custom:button-card
name: Person
styles:
card:
- color: var(--contrast20)
- font-size: 14px
- font-weight: 600
- background: none
state:
card:
type: custom:button-card
entity: person.Person
show_icon: false
name: |
[[[
return states['person.Person'].state;
]]]
state:
- value: home
name: Home
- value: not_home
name: Away
styles:
card:
- color: var(--contrast20)
- font-size: 12px
- background: none
- opacity: '0.7'
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: entity
tap_action:
action: more-info
entity: sensor.Persons_battery_level
content_info: none
card_mod:
style: |
ha-card {
--color: {{ 'var(--contrast20)' if states('sensor.Persons_battery_level') | float > 10 else 'var(--black)' }};
--chip-background: {{ 'var(--contrast4)' if states('sensor.Persons_battery_level') | float > 10 else 'var(--red)' }};
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
5 Likes
ald112
February 29, 2024, 4:46pm
421
how I remove from the code the bottom sticky icons?
ZOXSOCKS
March 2, 2024, 11:49am
422
Can you please share how you managed to get a custom font working?
Iām using the same font as you; Varela Round ā but Iām not sure how to get it working. Thanks in advance <3
RSZEE
March 3, 2024, 9:58am
423
Has anyone got the bottom navbar to work in 24.2.5?
djacid
March 3, 2024, 2:38pm
424
Can you upload the icons for tv apps?
jeells102
March 5, 2024, 9:03am
425
I loved the alarm card you created, however, as a lot of my dashboard is lovelace based, and not template based, I couldnāt directly add the card and have it work how I wanted, without breaking my whole dashboard and having to recreate it.
So I reverse engineered your alarm card and made a lovelace friendly version that anyone can just add the code into their dashboard.
The code is below:
type: custom:button-card
entity: alarm_control_panel.<your_alarm_panel_entity>
name: House Alarm
icon: mdi:shield-lock
variables:
active_color: red
state:
- value: disarmed
icon: mdi:shield-home
custom_fields:
cs: Disarmed
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ? 'var(--' +
variables.active_color + ')' : 'var(--contrast6)'; ]]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'disarmed' ? '#676867'
: '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 900
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
- value: armed_night
icon: mdi:shield-moon
custom_fields:
cs: Night
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#2b2243' : '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#959497' : '']]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#676867' : '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 500
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#959497' : '']]]
- value: arming
icon: mdi:shield-alert
custom_fields:
cs: Arming
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ? 'var(--' +
variables.active_color + ')' : 'var(--contrast6)'; ]]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- animation: blink 2s ease infinite
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'arming' ? '#676867' :
'']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 500
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
- value: armed_away
icon: mdi:shield-car
custom_fields:
cs: Armed Away
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#3b8048' : '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#000000' : '']]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#959497' : '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 18px
- font-weight: 500
- line-height: 16px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#000000' : '']]]
styles:
grid:
- grid-template-areas: '"i i" "cs cs" "n ec" "n ec"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content 1fr min-content
custom_fields:
cs:
- text-align: start
- white-space: no-wrap
- font-weight: 50
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ? 'var(--black)'
: 'var(--contrast18)'; ]]]
- text-overflow: ellipsis
es:
- color: var(--black)
ec:
- justify-self: start
- justify-content: center
card:
- background: '[[[ return ''var(--'' + variables.active_color + '')'';]]]'
icon:
- color: var(--black)
name:
- color: var(--black)
custom_fields:
ec:
card:
type: tile
entity: '[[[ return entity.entity_id; ]]]'
color: red
features:
- type: alarm-modes
modes:
- armed_away
- armed_night
- disarmed
card_mod:
style:
.: |
ha-card .content {
display: none;
} ha-card {
width: 200px;
background: transparent;
border-radius: 0px;
} ha-card.active {
height: 40px;
}
.features hui-alarm-modes-tile-feature $: |
.container {
padding: 0px !important;
}
.features hui-alarm-modes-tile-feature $ .container ha-control-select $ .container: |
.option {
background-color: transparent !important;
border-radius: 13px !important;
}
.option.selected {
--control-select-color: var(--yellow) !important;
}
4 Likes
jlnbln
March 5, 2024, 11:23am
426
nice one! Thanks for the work!
I tried using your code. But the background of the selected tile state in the tile card stays the regular green color instead of the themes one.
Any ideas why?
jeells102
March 5, 2024, 12:16pm
427
Yeah this is because I hard-coded the colours in the selection. Rather than choosing contrast colours. I can update it to be the contrast colours, but I couldnāt settle for which colour should be what.
If you choose the colours from the diagram that was given in the original theme, I can update the code
jlnbln
March 5, 2024, 12:25pm
428
haha. I thought so! That would be great if you could update it with the colors. I think home should be green, night blue, away red and disarmed can be grey. Thanks for your help!
jeells102
March 5, 2024, 12:48pm
429
Give this a go, should now be using the theme colours
type: custom:button-card
entity: alarm_control_panel.<your_entity>
name: House Alarm
icon: mdi:shield-lock
variables:
active_color: red
state:
- value: disarmed
icon: mdi:shield-lock-open
custom_fields:
cs: Disarmed
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'disarmed' ?
'var(--contrast10)' : '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast1)'; ]]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'disarmed' ? 'var(--contrast6)'
: '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 900
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast1)'; ]]]
- value: armed_night
icon: mdi:shield-moon
custom_fields:
cs: Armed Night
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'var(--blue)' : '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#000000' : '']]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#676867' : '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 500
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#000000' : '']]]
- value: armed_home
icon: mdi:shield-home
custom_fields:
cs: Armed Home
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'armed_home' ?
'var(--green)' : '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state === 'armed_home' ?
'#000000' : '']]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'armed_home' ?
'#676867' : '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 500
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state === 'armed_home' ?
'#000000' : '']]]
- value: arming
icon: mdi:shield-alert
custom_fields:
cs: Arming
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ? 'var(--' +
variables.active_color + ')' : 'var(--contrast6)'; ]]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- animation: blink 2s ease infinite
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'arming' ? '#676867' :
'']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 500
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
- value: armed_away
icon: mdi:shield-car
custom_fields:
cs: Armed Away
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'var(--red)' : '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#000000' : '']]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#959497' : '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 18px
- font-weight: 500
- line-height: 16px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#000000' : '']]]
styles:
grid:
- grid-template-areas: '"i i" "cs cs" "n ec" "n ec"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content 1fr min-content
custom_fields:
cs:
- text-align: start
- white-space: no-wrap
- font-weight: 50
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ? 'var(--black)'
: 'var(--contrast18)'; ]]]
- text-overflow: ellipsis
es:
- color: var(--black)
ec:
- justify-self: start
- justify-content: center
card:
- background: '[[[ return ''var(--'' + variables.active_color + '')'';]]]'
icon:
- color: var(--black)
name:
- color: var(--black)
custom_fields:
ec:
card:
type: tile
entity: '[[[ return entity.entity_id; ]]]'
color: red
features:
- type: alarm-modes
modes:
- armed_home
- armed_away
- armed_night
- disarmed
card_mod:
style:
.: |
ha-card .content {
display: none;
} ha-card {
width: 200px;
background: transparent;
border-radius: 0px;
} ha-card.active {
height: 40px;
}
.features hui-alarm-modes-tile-feature $: |
.container {
padding: 0px !important;
}
.features hui-alarm-modes-tile-feature $ .container ha-control-select $ .container: |
.option {
background-color: transparent !important;
border-radius: 13px !important;
}
.option.selected {
--control-select-color: var(--yellow) !important;
}
EDIT: Just to say, I also changed some of the icons to match better, as well as some of the text colours with the brighter colours just to make everything match better.
jlnbln
March 5, 2024, 1:02pm
430
hmm this looks the same for me. I think there might have been a confusion. I wasnāt talking about the background color of the button card. I mean the color of the Tile Card. Here this one here on the picture. It is still the same for me.
Looks interesting!
jeells102
March 6, 2024, 9:13am
432
So I had to do some additional googling, and get some extra help, but Iāve managed to get it working for a single colour. Not with multiple colours so itās better than just the yellow.
Take a look below:
type: custom:button-card
entity: alarm_control_panel.jem_alarm
name: House Alarm
icon: mdi:shield-lock
variables:
active_color: red
state:
- value: disarmed
icon: mdi:shield-lock-open
custom_fields:
cs: Disarmed
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ? 'var(--' +
variables.active_color + ')' : 'var(--contrast6)'; ]]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'disarmed' ? '#676867'
: '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 900
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
- value: armed_night
icon: mdi:shield-moon
custom_fields:
cs: Night
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#2b2243' : '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#959497' : '']]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#676867' : '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 500
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#959497' : '']]]
- value: arming
icon: mdi:shield-alert
custom_fields:
cs: Arming
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ? 'var(--' +
variables.active_color + ')' : 'var(--contrast6)'; ]]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- animation: blink 2s ease infinite
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'arming' ? '#676867' :
'']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 500
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
- value: armed_away
icon: mdi:shield-car
custom_fields:
cs: Armed Away
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#3b8048' : '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#000000' : '']]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#959497' : '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 18px
- font-weight: 500
- line-height: 16px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#000000' : '']]]
styles:
grid:
- grid-template-areas: '"i i" "cs cs" "n ec" "n ec"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content 1fr min-content
custom_fields:
cs:
- text-align: start
- white-space: no-wrap
- font-weight: 50
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ? 'var(--black)'
: 'var(--contrast18)'; ]]]
- text-overflow: ellipsis
es:
- color: var(--black)
ec:
- justify-self: start
- justify-content: center
card:
- background: '[[[ return ''var(--'' + variables.active_color + '')'';]]]'
icon:
- color: var(--black)
name:
- color: var(--black)
custom_fields:
ec:
card:
type: tile
entity: '[[[ return entity.entity_id; ]]]'
color: red
features:
- type: alarm-modes
modes:
- armed_away
- armed_night
- disarmed
card_mod:
style:
.: |
ha-card .content {
display: none;
} ha-card {
width: 200px;
background: transparent;
border-radius: 0px;
} ha-card.active {
height: 40px;
}
.features hui-alarm-modes-tile-feature $: |
.container {
padding: 0px !important;
}
.features hui-alarm-modes-tile-feature $ .container ha-control-select $ .container: |
.option {
background-color: transparent !important;
border-radius: 13px !important;
}
card_mod:
hui-card-features $:
hui-alarm-modes-card-feature $:
ha-control-select$: |
.container {
color: grey !important;
--control-select-color: var(--contrast14) !important;
}
1 Like
jlnbln
March 6, 2024, 11:35am
433
yeah that worked! Thanks a lot!
jeells102
March 11, 2024, 12:21pm
434
Hey,
So Iāve done some further tweaks to this, so now when the alarm is pending, it will show correctly and also triggered.
Updated code is below:
type: custom:button-card
entity: alarm_control_panel.<your_alarm_entity>
name: House Alarm
icon: mdi:shield-lock
variables:
active_color: red
state:
- value: disarmed
icon: mdi:shield-lock-open
custom_fields:
cs: Disarmed
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ? 'var(--' +
variables.active_color + ')' : 'var(--contrast6)'; ]]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'disarmed' ? '#676867'
: '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 900
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
- value: armed_night
icon: mdi:shield-moon
custom_fields:
cs: Night
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#2b2243' : '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#959497' : '']]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#676867' : '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 500
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#959497' : '']]]
- value: arming
icon: mdi:shield-alert
custom_fields:
cs: Arming
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ? 'var(--' +
variables.active_color + ')' : 'var(--contrast6)'; ]]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- animation: blink 2s ease infinite
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'arming' ? '#676867' :
'']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 500
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
- value: armed_away
icon: mdi:shield-car
custom_fields:
cs: Armed Away
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#3b8048' : '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#000000' : '']]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#959497' : '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 18px
- font-weight: 500
- line-height: 16px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#000000' : '']]]
- value: pending
icon: mdi:shield-alert-outline
custom_fields:
cs: Alarm Pending
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'pending' ? '#FFBF00'
: '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state === 'pending' ? '#000000'
: '']]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'pending' ? '#959497'
: '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 18px
- font-weight: 500
- line-height: 16px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state === 'pending' ?
'#000000' : '']]]
- value: triggered
icon: mdi:shield-alert
custom_fields:
cs: Alarm Triggered
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'triggered' ?
'#FF0000' : '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state === 'triggered' ?
'#000000' : '']]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'triggered' ?
'#959497' : '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 18px
- font-weight: 500
- line-height: 16px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state === 'triggered' ?
'#000000' : '']]]
styles:
grid:
- grid-template-areas: '"i i" "cs cs" "n ec" "n ec"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content 1fr min-content
custom_fields:
cs:
- text-align: start
- white-space: no-wrap
- font-weight: 50
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ? 'var(--black)'
: 'var(--contrast18)'; ]]]
- text-overflow: ellipsis
es:
- color: var(--black)
ec:
- justify-self: start
- justify-content: center
card:
- background: '[[[ return ''var(--'' + variables.active_color + '')'';]]]'
icon:
- color: var(--black)
name:
- color: var(--black)
custom_fields:
ec:
card:
type: tile
entity: '[[[ return entity.entity_id; ]]]'
color: red
features:
- type: alarm-modes
modes:
- armed_away
- armed_night
- disarmed
card_mod:
style:
.: |
ha-card .content {
display: none;
} ha-card {
width: 200px;
background: transparent;
border-radius: 0px;
} ha-card.active {
height: 40px;
}
.features hui-alarm-modes-tile-feature $: |
.container {
padding: 0px !important;
}
.features hui-alarm-modes-tile-feature $ .container ha-control-select $ .container: |
.option {
background-color: transparent !important;
border-radius: 13px !important;
}
card_mod:
hui-card-features $:
hui-alarm-modes-card-feature $:
ha-control-select$: |
.container {
color: grey !important;
--control-select-color: var(--contrast14) !important;
}
1 Like
jeells102
March 17, 2024, 5:17pm
435
Hey Nemu,
Iāve adapted your design to update some of my switch cards, and Iām struggling with the padding to get everything aligned properly.
I wanted the main icon to appear above the name of the entity, but as you can see in my screenshot below, itās a bit tight, and I want the switch icon on the far right-hand side to be on the same level as the label.
Can you help?
Hereās a screenshot:
Hereās my code:
type: custom:button-card
entity: switch.media_centre
name: Media Centre
icon: mdi:television-classic
show_name: true
show_icon: true
show_label: true
show_state: false
hold_action:
action: more-info
label: |
[[[
var state = states['switch.media_centre'].state
var power = states['sensor.media_centre_power'].state
if(state == "on")
return `<span style="color: black;">${power}W</span>`;
else
return `<span style="color: grey;">Off</span>`;
]]]
custom_fields:
icon1: |
[[[
return '<ha-icon icon="mdi:television"></ha-icon>';
]]]
icon2: |
[[[
if (entity.state == "on"){
return '<ha-icon icon="mdi:toggle-switch-outline"></ha-icon>';
} else {
return '<ha-icon icon="mdi:toggle-switch-off-outline"></ha-icon>';
}
]]]
styles:
grid:
- grid-template-areas: '"icon1" "n l" "icon2 icon2" '
- grid-template-rows: 24px min-content min-content
- grid-template-columns: auto 1fr
card:
- height: 100%
- padding: 1rem
- background: |
[[[
if (entity.state == 'on') {
return 'var(--green)';
} else {
return 'var(--primary-text-color)';
}
]]]
img_cell:
- position: absolute
- top: 20%
- left: 40%
- overflow: visible
icon:
- position: absolute
- width: 20em
- opacity: 20%
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
- transform: rotate(-20deg)
label:
- text-align: left
- font-size: 12px
- justify-self: start
- align-self: end
- overflow: visible
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
name:
- text-align: left
- font-size: 16px
- font-weight: 500
- justify-self: start
- align-self: center
- overflow: visible
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
custom_fields:
icon1:
- justify-self: start
- width: 24px
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
icon2:
- justify-self: end
- align-self: end
- width: 24px
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
Does anyone know where I can find the rounded.js file?