But then the icons will be pretty big. I’m looking for a consistent way of having small icons that are centered on the screen. I have highlighted each button in red to make it easier to see. As you can see the grid card is aligned to the left causing some space to the right of the grid card but not to the left. Maybe it is more a grid card problem and that the solution would be to align the grid card in the middle horizontally?
probably a really simple one but can I get a custom button card with a custom field slider along the bottom but with an image in the centre of the bottom, not an icon. This is the config at the moment and cannot work out how to add an image without it breaking:
- type: custom:button-card
styles:
card:
- background-color: rgb(3, 169, 244)
- box-shadow: none;
- overflow: unset
name:
- color: white
label:
- color: yellow
grid:
- grid-template-areas: '"n" "i" "l" "slider"'
- grid-template-columns: 1fr
- grid-template-rows: min-content fr min-content min-content
size: 40%
state:
- value: "off"
styles:
icon:
- color: white
- value: "on"
styles:
icon:
- color: yellow
- value: "unavailable"
styles:
icon:
- color: red
custom_fields:
slider:
card:
full_row: true
hide_state: true
type: custom:slider-entity-row
entity: light.hue_filament_bulb_1
overflow: unset
filter: opacity(80%)
color: rgb(3, 169, 244)
entity: light.hue_filament_bulb_1
name: tak
icon: mdi:hanger
Also, does anyone know how I can change the colour of the slider when its part of a custom_field?
I cannot work out how to add a card mod or style to it. The slider: color: bit does not seem to be doing anything?
I believe you can add padding left and right to style the card. Check out the docs and try it out.
Hey guys, how do I display the timer value inside a custom field?
I would like to display it only if the timer is greater than 0 also.
The state works like so but I need to get actual time left on the counter:
custom_fields:
notification: |
[[[ return states['timer.robovac_timer'].state ]]]
What’s the syntax for that?
Thanks
(Didn’t reply directly to the question by error. Reposting.)
You can have a look at my config posted here. I put a another custom button card inside the custom field. As for the condition, check the conditional statement where I manipulate the colours for something similar — if you don’t want to display “Idle” when the timer has run out.
Great, that’s exactly it, thank you.
Just need to get rid of the idle state being displayed and looks like there is a surround around the actual timer, how do I remove both of these?
Thanks, getting closer… Getting an error on this template
template: button_default_title
Also Its not clear to me where the following sensors are getting their data
binary_sensor.ha_update_available
sensor.ha_local_version
sensor.ha_remote_versio
sensor.ha_current_stable_version
sensor.ha_available_version
sensor.ha_current_beta_version
sensor.ha_current_dev_version
sensor.supervisor_updates
Hello!
I show battery and signal strength with the card.
i would like the battery to be 20% and the signal level below 20 to be a different color. I found the code here (thank you)
- type: 'custom:button-card'
entity: sensor.0x04cf8cdf3c772d2d_battery
icon: 'mdi:white-balance-sunny'
aspect_ratio: 1/1
name: WC lux
styles:
card:
- background-color: ivory
- border-radius: 6%
- padding-left: 5px
- color: grey
- font-size: 15px
- text-transform: capitalize
- box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
grid:
- grid-template-areas: '"i i" "n n" "current current" "local local" '
- grid-template-columns: 3fr
- grid-template-rows: 3fr min-content min-content
name:
- font-weight: bold
- font-size: 15px
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- justify-content: start
- align-items: start
icon:
- color: |
[[[
if (entity.state == 'on') return 'red';
return 'grey';
]]]
- width: 50%
custom_fields:
current:
- align-self: start
- justify-self: start
- '--text-color-sensor': |
[[[ if (entity.state == 'on') return 'red'; return 'green'; ]]]
local:
- align-self: start
- justify-self: start
custom_fields:
current: |
[[[
return `<ha-icon
icon='mdi:battery'
style='width: 20px; height: 20px; color: deepskyblue;'>
</ha-icon><span>Battery: <span style='color: var(--text-color-sensor);'>${states['sensor.0x04cf8cdf3c772d2d_battery'].state}</span></span>`
]]]
local: |
[[[
return `<ha-icon
icon='mdi:signal'
style='width: 20px; height: 20px; color: deepskyblue;'>
</ha-icon><span>Signal: <span style='color: green;'>${states['sensor.0x04cf8cdf3c772d2d_linkquality'].state}</span></span>`
]]]
without the error we cant really help you…
which of those sensors did you actually try to find in the community here, they are readily available, of course, next to the core sensors for version.
Let me know so we can have a look where to add to your findings
This is in the docs but in short:
cards:
- type: custom:button-card
...
show_state: false
UPDATE: I misread what you said and missed the “Idle”. Do you just want to display nothing in case the timer is idle?
Have a look at the state section of the docs.
Add this to the card main section:
styles:
card:
- box-shadow: none
I have been trying to get my popup working again after the browser_mod change. This code works for a standard button card (thanks to suxlala helping me with this post), but not the custom button card. The popup never pops up.
type: 'custom:button-card'
icon: 'mdi:music'
name: Media Players
layout: icon_name
entity: media_player.tv_room
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Sonos
hide_header: false
large: false
deviceID:
- this
card:
cards:
- artwork: cover
entity: media_player.dining_room
hide:
power: true
source: false
info: short
speaker_group:
entities:
- entity_id: media_player.tv_room
name: Living Room
- entity_id: media_player.bedroom_2
name: Office
- entity_id: media_player.bedroom
name: Master Bedroom
expanded: false
platform: sonos
show_group_count: true
type: 'custom:mini-media-player'
- artwork: cover
entity: media_player.tv_room
hide:
power: true
source: false
info: short
speaker_group:
entities:
- entity_id: media_player.dining_room
name: Dining Room
- entity_id: media_player.bedroom_2
name: Office
- entity_id: media_player.bedroom
name: Master Bedroom
expanded: false
platform: sonos
show_group_count: true
type: 'custom:mini-media-player'
- artwork: cover
entity: media_player.bedroom_2
hide:
power: true
source: false
info: short
type: 'custom:mini-media-player'
- type: 'custom:button-card'
name: Pause after Next Track
icon: 'mdi:music-off'
color: var(--accent-color)
color_type: card
tap_action:
action: call-service
service: automation.turn_on
service_data:
entity_id: automation.stop_music_after_current_track
layout: icon_name
type: vertical-stack
Can someone please point out where I’ve gone wrong? Thank you!
Both versions are up to date, and nuking my cache didn’t fix it. 
Thank you for much for the quick response and such a great custom card!
You also have to remove:
deviceID:
- this
Awesome, must have missed it, I was going through the docs alright 
And for the hiding of the “Idle” I can set the color to white when state = idle so it is not seen.
Many thanks
Another card (button-card + card-mod) :
code
name: Sonorisation
show_name: true
icon: 'mdi:speaker'
styles:
custom_fields:
wave:
- background-color: 'rgba(0, 0, 0, 0)'
- position: absolute
- right: 5%
- top: 5%
- font-size: 13px
- line-height: 20px
- display: |
[[[
if (states["input_boolean.test2"].state == 'on') return '';
else return 'none';
]]]
- '--icon-color': |
[[[
if (states["input_boolean.test2"].state == 'on') return 'var(--mail-color)';
else return 'var(--primary-color)';
]]]
card:
- border: 2px solid var(--primary-color)
- border-radius: 10px
icon:
- color: var(--primary-color)
name:
- font-variant: small-caps
- color: var(--primary-color)
custom_fields:
wave: |
[[[
return `
<div class="loader-container">
<div class="loader-3">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>
<div class="item-5"></div>
</div>
</div>`
]]]
type: 'custom:button-card'
style: |
.loader-3{
width: 40px;
height: 40px;
}
.loader-3 div {
height: 100%;
width: 3px;
display: inline-block;
}
.loader-3 div .item-1{
height: 50%;
}
.loader-3 .item-1 {
animation: loader-3-first-div 1.2s infinite linear;
background-color: red;
}
.loader-3 .item-2 {
animation: loader-3-second-div 1.2s infinite linear;
animation-delay: -1.1s;
background-color: darkorange;
}
.loader-3 .item-3 {
animation: loader-3-third-div 1.2s infinite linear;
animation-delay: -1.0s;
background-color: gold;
}
.loader-3 .item-4 {
animation: loader-3-fourth-div 1.2s infinite linear;
animation-delay: -0.9s;
background-color: green;
}
.loader-3 .item-5 {
animation: loader-3-last-div 1.2s infinite linear;
animation-delay: -0.8s;
background-color: DarkOrchid;
}
@keyframes loader-3-first-div {
25%,75% {
transform: scaleY(0.2);
}
0%,50%,100%{
transform: scaleY(0.6);
}
}
@keyframes loader-3-second-div {
25%,75% {
transform: scaleY(0.4);
}
0%,50%,100%{
transform: scaleY(1);
}
}
@keyframes loader-3-third-div {
25%,75% {
transform: scaleY(0.4);
}
0%,50%,100%{
transform: scaleY(1);
}
}
@keyframes loader-3-fourth-div {
25%,75% {
transform: scaleY(0.4);
}
0%,50%,100%{
transform: scaleY(1);
}
}
@keyframes loader-3-last-div {
25%,75% {
transform: scaleY(0.2);
}
0%,50%,100%{
transform: scaleY(0.6);
}
}
Inspired by https://codepen.io/ruslan_khomiak/pen/MbqWaK
Another card:
Code
style: |
@keyframes pulsation {
25% {
transform: scale(1.3);
}
100% {
box-shadow: 0 0 0 40px rgba(128, 0, 128, 0), 0 0 0 6px rgba(128, 0, 128, 0) inset;
transform: scale(1)
}
}
#courrier{
animation:
{% if is_state('input_boolean.test2', 'on') %}
pulsation 1s infinite ease-in;
{% else %}
None
{% endif %}
;
entity: input_boolean.doors_opened
name: Ouvertures
show_name: true
state:
- icon: 'mdi:door-open'
value: 'on'
- icon: 'mdi:door'
value: 'off'
styles:
custom_fields:
courrier:
- border-radius: 50%
- box-shadow: >-
rgb(247 193 57 / 60%) 0px 0px 0px 0px, rgb(247 193 57 / 60%) 0px 0px
0px 6px inset
- position: absolute
- right: 5%
- top: 5%
- font-size: 13px
- line-height: 20px
- display: |
[[[
if (states["input_boolean.test2"].state == 'on') return '';
else return 'none';
]]]
- '--icon-color': |
[[[
if (states["input_boolean.test2"].state == 'on') return 'var(--mail-color)';
]]]
card:
- border-radius: 10px
- border: 2px solid var(--primary-color)
icon:
- color: var(--primary-color)
name:
- font-variant: small-caps
- color: var(--primary-color)
custom_fields:
courrier: |
[[[
return `
<ha-icon
icon="mdi:mail"
style="width: 30px; height: 30px; color: var(--icon-color);">
</ha-icon>`
]]]
type: 'custom:button-card'
Inspiration : https://codepen.io/matchboxhero/pen/pWLOQb?editors=1100
this is awesome 