I have a couple of questions about using this card. First off, itās a very versatile card that allows a lot of possibilities, so if these issues could be solved, itād be amazing!
- Iām making a card with a small animation using CSS transitions inside the card style. however, when I added the config template card, the animation seemed to stop. It just āblinksā or āpopsā when turning from a state to another, without any animations or transition. Here is a gif explaining what happens.
![ezgif.com-gif-maker](https://community-assets.home-assistant.io/original/3X/9/f/9f4f9bed5cc090cc869fbf4b8063ad81693239fb.gif)
The Lower card is the expected behaviour and the upper one is using the config template card.
Extra Notes: The way I understand why this is such, is because the whole card gets re-drawn when changing states. I donāt know how this should be fixed.
- I canāt seem to add a style to the config card itself. I can style the card inside, but not the config card. The reason I want to do this is to add a ādisplay: noneā property so I can show and hide the card when I want.
- The only way to update the card is by adding an entity. Sometimes I want other triggers. For example, Iām hiding the cards based on screen resolution, but it doesnāt respond as the entity hasnāt been changed. The only time they will change is when I turn the lights on or off. I will attach two gifs showing what I want and what is happening.
![responsive](https://community-assets.home-assistant.io/original/3X/6/3/63cf3ce96bc58c43c5d4a60dcf2a540404e6fbca.gif)
^Expected^
![not_responsive](https://community-assets.home-assistant.io/original/3X/0/5/05ff6e089bab124ff80fdb54ef164666fef20ee1.gif)
^Actual^
I hoped that I can add a trigger-update that updates all the time like here in custom button card. They have an option ātriggers_update: allā
If you want to take a look at the code, Iāll paste it all here. Itās a bit long so check the parts of the style inside the button card and the variables:
type: 'custom:config-template-card'
entities:
- light.bathroom_corridor_s1_engineering_room
variables:
input_entity: ("input_select.test_state")
on_state: ("lights")
tile_width: 120
card:
type: 'custom:layout-card'
layout_type: grid
cards:
- type: 'custom:button-card'
entity: light.bathroom_corridor_s1_engineering_room
color_type: icon
show_entity_picture: false
show_icon: true
show_state: true
show_label: false
show_name: true
tap_action:
action: toggle
triggers_update: all
style: |-
"${ var tile_no = 1;
var base_tile = (tile_no <= 3);
var position = tile_width*tile_no;
var cur_state = states[input_entity].state;
var vport_width = window.innerWidth*0.9 - (25*4);
var homekit_fits = (position < 360) && (window.matchMedia("(max-width: 768px)")).matches;
var size_fits = (window.matchMedia("(min-width: 768px)")).matches && (vport_width > position);
var view_more = cur_state == on_state;
if (!(base_tile || size_fits || homekit_fits || view_more)) {
':host { display: none !important; }'
} else {
':host { display: block !important; }'
}
}"
name: '${on_state}'
icon: 'hue:pendant-round'
state:
- value: 'on'
color: '#D43A41'
styles:
card:
- background-image: 'linear-gradient(to top, #c7c7c7, #ffffff)'
- box-shadow: 0 0 10px 0px
name:
- color: black
- transition: .4s ease
state:
- color: 'rgba(0, 0, 0, 0.8)'
- transition: .4s ease
icon:
- transition: .4s ease-out
custom_fields:
circle:
- transition: '.4s cubic-bezier(.54, 1.60, .5, 1)'
- transform: translateX(20px)
rect:
- background: 'linear-gradient(to bottom, #c32650, #f15a29)'
- transition: .4s ease
- value: 'off'
color: '#ffffff'
styles:
icon:
- transition: .4s ease-in
card:
- background: '#454545'
- transition: 'off'
name:
- color: white
- transition: .4s ease
state:
- color: 'rgba(255, 255, 255, 0.8)'
- transition: .4s ease
custom_fields:
circle:
- transition: '.3s cubic-bezier(.54, 1.60, .5, 1)'
rect:
- background: 'linear-gradient(to bottom, #202020, #343434)'
- transition: .4s ease
custom_fields:
rect: |
[[[
return `<ha-card
style= "background-color: transparent; border-radius: 200px 200px; box-shadow: 0px 0px;">
</ha-card>`
]]]
circle: |
[[[
return `<ha-icon
icon="mdi:brightness-1"
style="width: 20px; height: 20px; color: rgba(255,255,255,1); ">
</ha-icon>`
]]]
styles:
card:
- padding: 5px 5px
- border-radius: 13px
- height: 94px
- width: 109px
- '--mdc-ripple-press-opacity': 0
grid:
- position: relative
custom_fields:
circle:
- position: absolute
- right: calc(7% + 20px)
- top: 13%
- height: 25px
rect:
- position: absolute
- right: 7%
- top: 15%
- height: 20px
- width: 40px
- border-radius: 200px 200px
state:
- font-size: 11px
- justify-self: start
- padding: 0px 0px
- position: relative
- bottom: 8px
- left: 6px
name:
- font-size: 12px
- justify-self: start
- font-weight: bold
- position: relative
- left: 6px
- bottom: 10px
icon:
- position: absolute
- left: 0%
- top: '-12%'
- width: 35%
- type: 'custom:button-card'
entity: light.bathroom_corridor_s1_engineering_room
color_type: icon
show_entity_picture: false
show_icon: true
show_state: true
show_label: false
show_name: true
tap_action:
action: toggle
triggers_update: all
name: Main Spot
icon: 'hue:pendant-round'
style: |-
"${ var tile_no = 2;
var base_tile = (tile_no <= 3);
var position = tile_width*tile_no;
var cur_state = states[input_entity].state;
var vport_width = window.innerWidth*0.9 - (25*4);
var homekit_fits = (position < 360) && (window.matchMedia("(max-width: 768px)")).matches;
var size_fits = (window.matchMedia("(min-width: 768px)")).matches && (vport_width > position);
var view_more = cur_state == on_state;
if (!(base_tile || size_fits || homekit_fits || view_more)) {
':host { display: none !important; }'
} else {
':host { display: block !important; }'
}
}"
state:
- value: 'on'
color: '#D43A41'
styles:
card:
- background-image: 'linear-gradient(to top, #c7c7c7, #ffffff)'
- box-shadow: 0 0 10px 0px
name:
- color: black
- transition: .4s ease
state:
- color: 'rgba(0, 0, 0, 0.8)'
- transition: .4s ease
icon:
- transition: .4s ease-out
custom_fields:
circle:
- transition: '.4s cubic-bezier(.54, 1.60, .5, 1)'
- transform: translateX(20px)
rect:
- background: 'linear-gradient(to bottom, #c32650, #f15a29)'
- transition: .4s ease
- value: 'off'
color: '#ffffff'
styles:
icon:
- transition: .4s ease-in
card:
- background: '#454545'
- transition: 'off'
name:
- color: white
- transition: .4s ease
state:
- color: 'rgba(255, 255, 255, 0.8)'
- transition: .4s ease
custom_fields:
circle:
- transition: '.3s cubic-bezier(.54, 1.60, .5, 1)'
rect:
- background: 'linear-gradient(to bottom, #202020, #343434)'
- transition: .4s ease
custom_fields:
rect: |
[[[
return `<ha-card
style= "background-color: transparent; border-radius: 200px 200px; box-shadow: 0px 0px;">
</ha-card>`
]]]
circle: |
[[[
return `<ha-icon
icon="mdi:brightness-1"
style="width: 20px; height: 20px; color: rgba(255,255,255,1); ">
</ha-icon>`
]]]
styles:
card:
- padding: 5px 5px
- border-radius: 13px
- height: 94px
- width: 109px
- '--mdc-ripple-press-opacity': 0
grid:
- position: relative
custom_fields:
circle:
- position: absolute
- right: calc(7% + 20px)
- top: 13%
- height: 25px
rect:
- position: absolute
- right: 7%
- top: 15%
- height: 20px
- width: 40px
- border-radius: 200px 200px
state:
- font-size: 11px
- justify-self: start
- padding: 0px 0px
- position: relative
- bottom: 8px
- left: 6px
name:
- font-size: 12px
- justify-self: start
- font-weight: bold
- position: relative
- left: 6px
- bottom: 10px
icon:
- position: absolute
- left: 0%
- top: '-12%'
- width: 35%
- type: 'custom:button-card'
entity: light.bathroom_corridor_s1_engineering_room
color_type: icon
show_entity_picture: false
show_icon: true
show_state: true
show_label: false
show_name: true
tap_action:
action: toggle
triggers_update: all
name: Main Spot
icon: 'hue:pendant-round'
style: |-
"${ var tile_no = 3;
var base_tile = (tile_no <= 3);
var position = tile_width*tile_no;
var cur_state = states[input_entity].state;
var vport_width = window.innerWidth*0.9 - (25*4);
var homekit_fits = (position < 360) && (window.matchMedia("(max-width: 768px)")).matches;
var size_fits = (window.matchMedia("(min-width: 768px)")).matches && (vport_width > position);
var view_more = cur_state == on_state;
if (!(base_tile || size_fits || homekit_fits || view_more)) {
':host { display: none !important; }'
} else {
':host { display: block !important; }'
}
}"
state:
- value: 'on'
color: '#D43A41'
styles:
card:
- background-image: 'linear-gradient(to top, #c7c7c7, #ffffff)'
- box-shadow: 0 0 10px 0px
name:
- color: black
- transition: .4s ease
state:
- color: 'rgba(0, 0, 0, 0.8)'
- transition: .4s ease
icon:
- transition: .4s ease-out
custom_fields:
circle:
- transition: '.4s cubic-bezier(.54, 1.60, .5, 1)'
- transform: translateX(20px)
rect:
- background: 'linear-gradient(to bottom, #c32650, #f15a29)'
- transition: .4s ease
- value: 'off'
color: '#ffffff'
styles:
icon:
- transition: .4s ease-in
card:
- background: '#454545'
- transition: 'off'
name:
- color: white
- transition: .4s ease
state:
- color: 'rgba(255, 255, 255, 0.8)'
- transition: .4s ease
custom_fields:
circle:
- transition: '.3s cubic-bezier(.54, 1.60, .5, 1)'
rect:
- background: 'linear-gradient(to bottom, #202020, #343434)'
- transition: .4s ease
custom_fields:
rect: |
[[[
return `<ha-card
style= "background-color: transparent; border-radius: 200px 200px; box-shadow: 0px 0px;">
</ha-card>`
]]]
circle: |
[[[
return `<ha-icon
icon="mdi:brightness-1"
style="width: 20px; height: 20px; color: rgba(255,255,255,1); ">
</ha-icon>`
]]]
styles:
card:
- padding: 5px 5px
- border-radius: 13px
- height: 94px
- width: 109px
- '--mdc-ripple-press-opacity': 0
grid:
- position: relative
custom_fields:
circle:
- position: absolute
- right: calc(7% + 20px)
- top: 13%
- height: 25px
rect:
- position: absolute
- right: 7%
- top: 15%
- height: 20px
- width: 40px
- border-radius: 200px 200px
state:
- font-size: 11px
- justify-self: start
- padding: 0px 0px
- position: relative
- bottom: 8px
- left: 6px
name:
- font-size: 12px
- justify-self: start
- font-weight: bold
- position: relative
- left: 6px
- bottom: 10px
icon:
- position: absolute
- left: 0%
- top: '-12%'
- width: 35%
- type: 'custom:button-card'
entity: light.bathroom_corridor_s1_engineering_room
color_type: icon
show_entity_picture: false
show_icon: true
show_state: true
show_label: false
show_name: true
tap_action:
action: toggle
triggers_update: all
name: Main Spot
icon: 'hue:pendant-round'
style: |-
"${ var tile_no = 4;
var base_tile = (tile_no <= 3);
var position = tile_width*tile_no;
var cur_state = states[input_entity].state;
var vport_width = window.innerWidth*0.9 - (25*4);
var homekit_fits = (position < 360) && (window.matchMedia("(max-width: 768px)")).matches;
var size_fits = (window.matchMedia("(min-width: 768px)")).matches && (vport_width > position);
var view_more = cur_state == on_state;
if (!(base_tile || size_fits || homekit_fits || view_more)) {
':host { display: none !important; }'
} else {
':host { display: block !important; }'
}
}"
state:
- value: 'on'
color: '#D43A41'
styles:
card:
- background-image: 'linear-gradient(to top, #c7c7c7, #ffffff)'
- box-shadow: 0 0 10px 0px
name:
- color: black
- transition: .4s ease
state:
- color: 'rgba(0, 0, 0, 0.8)'
- transition: .4s ease
icon:
- transition: .4s ease-out
custom_fields:
circle:
- transition: '.4s cubic-bezier(.54, 1.60, .5, 1)'
- transform: translateX(20px)
rect:
- background: 'linear-gradient(to bottom, #c32650, #f15a29)'
- transition: .4s ease
- value: 'off'
color: '#ffffff'
styles:
icon:
- transition: .4s ease-in
card:
- background: '#454545'
- transition: 'off'
name:
- color: white
- transition: .4s ease
state:
- color: 'rgba(255, 255, 255, 0.8)'
- transition: .4s ease
custom_fields:
circle:
- transition: '.3s cubic-bezier(.54, 1.60, .5, 1)'
rect:
- background: 'linear-gradient(to bottom, #202020, #343434)'
- transition: .4s ease
custom_fields:
rect: |
[[[
return `<ha-card
style= "background-color: transparent; border-radius: 200px 200px; box-shadow: 0px 0px;">
</ha-card>`
]]]
circle: |
[[[
return `<ha-icon
icon="mdi:brightness-1"
style="width: 20px; height: 20px; color: rgba(255,255,255,1); ">
</ha-icon>`
]]]
styles:
card:
- padding: 5px 5px
- border-radius: 13px
- height: 94px
- width: 109px
- '--mdc-ripple-press-opacity': 0
grid:
- position: relative
custom_fields:
circle:
- position: absolute
- right: calc(7% + 20px)
- top: 13%
- height: 25px
rect:
- position: absolute
- right: 7%
- top: 15%
- height: 20px
- width: 40px
- border-radius: 200px 200px
state:
- font-size: 11px
- justify-self: start
- padding: 0px 0px
- position: relative
- bottom: 8px
- left: 6px
name:
- font-size: 12px
- justify-self: start
- font-weight: bold
- position: relative
- left: 6px
- bottom: 10px
icon:
- position: absolute
- left: 0%
- top: '-12%'
- width: 35%
- type: 'custom:button-card'
entity: light.bathroom_corridor_s1_engineering_room
color_type: icon
show_entity_picture: false
show_icon: true
show_state: true
show_label: false
show_name: true
tap_action:
action: toggle
triggers_update: all
name: Main Spot
icon: 'hue:pendant-round'
style: |-
"${ var tile_no = 5;
var base_tile = (tile_no <= 3);
var position = tile_width*tile_no;
var cur_state = states[input_entity].state;
var vport_width = window.innerWidth*0.9 - (25*4);
var homekit_fits = (position < 360) && (window.matchMedia("(max-width: 768px)")).matches;
var size_fits = (window.matchMedia("(min-width: 768px)")).matches && (vport_width > position);
var view_more = cur_state == on_state;
if (!(base_tile || size_fits || homekit_fits || view_more)) {
':host { display: none !important; }'
} else {
':host { display: block !important; }'
}
}"
state:
- value: 'on'
color: '#D43A41'
styles:
card:
- background-image: 'linear-gradient(to top, #c7c7c7, #ffffff)'
- box-shadow: 0 0 10px 0px
name:
- color: black
- transition: .4s ease
state:
- color: 'rgba(0, 0, 0, 0.8)'
- transition: .4s ease
icon:
- transition: .4s ease-out
custom_fields:
circle:
- transition: '.4s cubic-bezier(.54, 1.60, .5, 1)'
- transform: translateX(20px)
rect:
- background: 'linear-gradient(to bottom, #c32650, #f15a29)'
- transition: .4s ease
- value: 'off'
color: '#ffffff'
styles:
icon:
- transition: .4s ease-in
card:
- background: '#454545'
- transition: 'off'
name:
- color: white
- transition: .4s ease
state:
- color: 'rgba(255, 255, 255, 0.8)'
- transition: .4s ease
custom_fields:
circle:
- transition: '.3s cubic-bezier(.54, 1.60, .5, 1)'
rect:
- background: 'linear-gradient(to bottom, #202020, #343434)'
- transition: .4s ease
custom_fields:
rect: |
[[[
return `<ha-card
style= "background-color: transparent; border-radius: 200px 200px; box-shadow: 0px 0px;">
</ha-card>`
]]]
circle: |
[[[
return `<ha-icon
icon="mdi:brightness-1"
style="width: 20px; height: 20px; color: rgba(255,255,255,1); ">
</ha-icon>`
]]]
styles:
card:
- padding: 5px 5px
- border-radius: 13px
- height: 94px
- width: 109px
- '--mdc-ripple-press-opacity': 0
grid:
- position: relative
custom_fields:
circle:
- position: absolute
- right: calc(7% + 20px)
- top: 13%
- height: 25px
rect:
- position: absolute
- right: 7%
- top: 15%
- height: 20px
- width: 40px
- border-radius: 200px 200px
state:
- font-size: 11px
- justify-self: start
- padding: 0px 0px
- position: relative
- bottom: 8px
- left: 6px
name:
- font-size: 12px
- justify-self: start
- font-weight: bold
- position: relative
- left: 6px
- bottom: 10px
icon:
- position: absolute
- left: 0%
- top: '-12%'
- width: 35%
- type: 'custom:button-card'
entity: light.bathroom_corridor_s1_engineering_room
color_type: icon
show_entity_picture: false
show_icon: true
show_state: true
show_label: false
show_name: true
tap_action:
action: toggle
triggers_update: all
name: Main Spot
icon: 'hue:pendant-round'
style: |-
"${ var tile_no = 6;
var base_tile = (tile_no <= 3);
var position = tile_width*tile_no;
var cur_state = states[input_entity].state;
var vport_width = window.innerWidth*0.9 - (25*4);
var homekit_fits = (position < 360) && (window.matchMedia("(max-width: 768px)")).matches;
var size_fits = (window.matchMedia("(min-width: 768px)")).matches && (vport_width > position);
var view_more = cur_state == on_state;
if (!(base_tile || size_fits || homekit_fits || view_more)) {
':host { display: none !important; }'
} else {
':host { display: block !important; }'
}
}"
state:
- value: 'on'
color: '#D43A41'
styles:
card:
- background-image: 'linear-gradient(to top, #c7c7c7, #ffffff)'
- box-shadow: 0 0 10px 0px
name:
- color: black
- transition: .4s ease
state:
- color: 'rgba(0, 0, 0, 0.8)'
- transition: .4s ease
icon:
- transition: .4s ease-out
custom_fields:
circle:
- transition: '.4s cubic-bezier(.54, 1.60, .5, 1)'
- transform: translateX(20px)
rect:
- background: 'linear-gradient(to bottom, #c32650, #f15a29)'
- transition: .4s ease
- value: 'off'
color: '#ffffff'
styles:
icon:
- transition: .4s ease-in
card:
- background: '#454545'
- transition: 'off'
name:
- color: white
- transition: .4s ease
state:
- color: 'rgba(255, 255, 255, 0.8)'
- transition: .4s ease
custom_fields:
circle:
- transition: '.3s cubic-bezier(.54, 1.60, .5, 1)'
rect:
- background: 'linear-gradient(to bottom, #202020, #343434)'
- transition: .4s ease
custom_fields:
rect: |
[[[
return `<ha-card
style= "background-color: transparent; border-radius: 200px 200px; box-shadow: 0px 0px;">
</ha-card>`
]]]
circle: |
[[[
return `<ha-icon
icon="mdi:brightness-1"
style="width: 20px; height: 20px; color: rgba(255,255,255,1); ">
</ha-icon>`
]]]
styles:
card:
- padding: 5px 5px
- border-radius: 13px
- height: 94px
- width: 109px
- '--mdc-ripple-press-opacity': 0
grid:
- position: relative
custom_fields:
circle:
- position: absolute
- right: calc(7% + 20px)
- top: 13%
- height: 25px
rect:
- position: absolute
- right: 7%
- top: 15%
- height: 20px
- width: 40px
- border-radius: 200px 200px
state:
- font-size: 11px
- justify-self: start
- padding: 0px 0px
- position: relative
- bottom: 8px
- left: 6px
name:
- font-size: 12px
- justify-self: start
- font-weight: bold
- position: relative
- left: 6px
- bottom: 10px
icon:
- position: absolute
- left: 0%
- top: '-12%'
- width: 35%
- type: 'custom:button-card'
entity: light.bathroom_corridor_s1_engineering_room
color_type: icon
show_entity_picture: false
show_icon: true
show_state: true
show_label: false
show_name: true
tap_action:
action: toggle
triggers_update: all
name: Main Spot
icon: 'hue:pendant-round'
style: |-
"${ var tile_no = 7;
var base_tile = (tile_no <= 3);
var position = tile_width*tile_no;
var cur_state = states[input_entity].state;
var vport_width = window.innerWidth*0.9 - (25*4);
var homekit_fits = (position < 360) && (window.matchMedia("(max-width: 768px)")).matches;
var size_fits = (window.matchMedia("(min-width: 768px)")).matches && (vport_width > position);
var view_more = cur_state == on_state;
if (!(base_tile || size_fits || homekit_fits || view_more)) {
':host { display: none !important; }'
} else {
':host { display: block !important; }'
}
}"
state:
- value: 'on'
color: '#D43A41'
styles:
card:
- background-image: 'linear-gradient(to top, #c7c7c7, #ffffff)'
- box-shadow: 0 0 10px 0px
name:
- color: black
- transition: .4s ease
state:
- color: 'rgba(0, 0, 0, 0.8)'
- transition: .4s ease
icon:
- transition: .4s ease-out
custom_fields:
circle:
- transition: '.4s cubic-bezier(.54, 1.60, .5, 1)'
- transform: translateX(20px)
rect:
- background: 'linear-gradient(to bottom, #c32650, #f15a29)'
- transition: .4s ease
- value: 'off'
color: '#ffffff'
styles:
icon:
- transition: .4s ease-in
card:
- background: '#454545'
- transition: 'off'
name:
- color: white
- transition: .4s ease
state:
- color: 'rgba(255, 255, 255, 0.8)'
- transition: .4s ease
custom_fields:
circle:
- transition: '.3s cubic-bezier(.54, 1.60, .5, 1)'
rect:
- background: 'linear-gradient(to bottom, #202020, #343434)'
- transition: .4s ease
custom_fields:
rect: |
[[[
return `<ha-card
style= "background-color: transparent; border-radius: 200px 200px; box-shadow: 0px 0px;">
</ha-card>`
]]]
circle: |
[[[
return `<ha-icon
icon="mdi:brightness-1"
style="width: 20px; height: 20px; color: rgba(255,255,255,1); ">
</ha-icon>`
]]]
styles:
card:
- padding: 5px 5px
- border-radius: 13px
- height: 94px
- width: 109px
- '--mdc-ripple-press-opacity': 0
grid:
- position: relative
custom_fields:
circle:
- position: absolute
- right: calc(7% + 20px)
- top: 13%
- height: 25px
rect:
- position: absolute
- right: 7%
- top: 15%
- height: 20px
- width: 40px
- border-radius: 200px 200px
state:
- font-size: 11px
- justify-self: start
- padding: 0px 0px
- position: relative
- bottom: 8px
- left: 6px
name:
- font-size: 12px
- justify-self: start
- font-weight: bold
- position: relative
- left: 6px
- bottom: 10px
icon:
- position: absolute
- left: 0%
- top: '-12%'
- width: 35%
layout:
grid-template-columns: 'repeat(auto-fill, minmax(115px, auto))'
view_layout:
grid-area: list
Thanks!