I’ve built a new card for you crazy graphing folks out there 
https://community.home-assistant.io/t/apexcharts-card-a-highly-customizable-graph-card/
Give it a go and let me know what you think
6 Likes
Doh! Yes, sorry!
Thanks for the reply, RomRider. I was hoping it might be possible as I’m able to get pairing mode to activate remotely by pressing and holding the bluetooth button in the harmony app. Is it that button card doesn’t distinguish between button down and button release states?
I don’t think there’s a direct ‘one tap’ command that can be sent from harmony remote to trigger pairing mode, but I’ll poke around a bit and see if something surfaces.
I’m working on a new button that has multiple icons inside it. I want to show a vertical-stack containing 4 button cards, at the right side of the main button card. But for the life of me I cannot change the size of the vertical-stack inside the button-card. Is there a way to change what the dimensions are of the vertical-stack inside the main button card, so all the button-cards inside the vertical-stack are nice and small?
Any advice?
Please share your code, hard to say like that
1 Like
My code is kind of a mess right now since I’m experimenting, but here it is for now:
- deep_press: true
hold_action:
action: more-info
haptic: heavy
icon: 'mdi:sofa'
name: Woonkamer
aspect_ratio: 1/1
show_icon: true
show_label: true
show_name: true
size: 30%
label: |
[[[
return states['climate.woonkamer_radiator'].attributes.local_temperature + '°C';
]]]
custom_fields:
status:
card:
type: vertical-stack
cards:
- entity: cover.woonkamer_gordijnen
show_name: false
show_label: false
show_icon: true
state:
- styles:
icon:
- filter: opacity(30%)
- color: '#000000'
icon: 'mdi:blinds'
value: 'closed'
- styles:
icon:
- color: 'var(--switch-accent-color)'
icon: 'mdi:blinds-open'
value: 'open'
styles:
card:
- background: none
tap_action: none
hold_action: none
type: 'custom:button-card'
- entity: cover.woonkamer_gordijnen
show_name: false
show_label: false
show_icon: true
state:
- styles:
icon:
- filter: opacity(30%)
- color: '#000000'
icon: 'mdi:blinds'
value: 'closed'
- styles:
icon:
- color: 'var(--switch-accent-color)'
icon: 'mdi:blinds-open'
value: 'open'
styles:
card:
- background: none
tap_action: none
hold_action: none
type: 'custom:button-card'
- entity: cover.woonkamer_gordijnen
show_name: false
show_label: false
show_icon: true
state:
- styles:
icon:
- filter: opacity(30%)
- color: '#000000'
icon: 'mdi:blinds'
value: 'closed'
- styles:
icon:
- color: 'var(--switch-accent-color)'
icon: 'mdi:blinds-open'
value: 'open'
styles:
card:
- background: none
tap_action: none
hold_action: none
type: 'custom:button-card'
- entity: cover.woonkamer_gordijnen
show_name: false
show_label: false
show_icon: true
state:
- styles:
icon:
- filter: opacity(30%)
- color: '#000000'
icon: 'mdi:blinds'
value: 'closed'
- styles:
icon:
- color: 'var(--switch-accent-color)'
icon: 'mdi:blinds-open'
value: 'open'
styles:
card:
- background: none
tap_action: none
hold_action: none
type: 'custom:button-card'
styles:
card:
- background-color: var(--card-background-off)
- font-size: 12px
custom_fields:
status:
- overflow: visible
- position: absolute
- right: 15px
- top: 10px
- justify-self: start
- align-self: start
- align-items: start
- align-content: start
- text-align: start
- height: 30px
grid:
- grid-template-areas: '"i" "n" "l'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
- position: absolute
- bottom: 5px
name:
- padding-bottom: 5px
- font-weight: bold
tap_action:
action: navigate
navigation_path: /smartphone-ui/kamer-woonkamer
haptic: medium
type: 'custom:button-card'
The thing I’m trying to create is the custom field: status part (where I used a vertical-stack with 4 button cards inside it).
Edit: The screenshot below shows the new card at the left and the old version on the right. Basically I want to re-create the right card, but using a 4 button cards inside a vertical-stack.
Hey I try to uses this card but the name will not disappear.
type: "custom:button-card"
entity: light.deckenlicht
icon: mdi:sofa
color: auto
action: more_info
The configuration is not correct, this is the very very very old one. Please have a look at the documentation
Crate thank you. The right doku helpes
HI Rom!
must confess clicking that link brought me to the ripple-color for the first time… 
and immediately makes me need it !
using this on entities with an on/off state works perfectly:
styles:
card:
- --mdc-ripple-color: >
[[[ return (entity.state == 'on')
? 'var(--background-color-off)' : 'var(--background-color-on)'; ]]]
Seems to be the easiest way to ‘auto-contrast’ the ripple, and do so in style of the current color scheme.
however, using that on a button which is set to service a script (and doesnt have an entity) doesn’t work at all of course. Made me wonder if I could use the ‘this’ and then eg this.background-color to have it oppose that (since I have background-color active on all of my buttons, that would be easiest:
styles:
card:
- --mdc-ripple-color: >
[[[ return (this.background-color == var(--background-color-on))
? 'var(--background-color-off)' : 'var(--background-color-on)'; ]]]
maybe? Since you warn us not to ‘mess with that’ I thought it better to ask first 
thanks!
Hi. First of all, flipping great addition to Home Assistant.
I am struggling a bit. Certainly something i changed, but for the life of me, i cant figure out want i am doing wrong.
I am struggling a bit with the --button-card-light-color-no-temperature
I have it on two different entity types, which previously acted the same way.
The light entity which get the correct color.
The switch entity which seems to get the color from paper-item-icon-active-color
Any insights?
What you are missing is the width of the styles.custom_fields.status.
By default, the vertical stack takes 100% of the width of the container and the container in your case takes the full width of the card. So adding: width: 10% or whatever else in the styles.custom_fields.status should fix your issue 
this is the button-card element in the DOM. It doesn’t have any background-color.
What you could try is this.shadowRoot.getElementById("card").style.background === 'var(--background-color-on)'
A switch has no color, so the behaviour is undefined
What are you trying to achieve?
Then maybe like this…
styles:
card:
- --mdc-ripple-color: >
[[[
let elt = this.shadowRoot;
elt = elt && elt.getElementById("card");
if (elt) {
return elt.style.background === 'var(--background-color-on)' ? 'var(--background-color-off)' : 'var(--background-color-on)';
}
return null;
]]]
1 Like
Hello all,
I was wondering if it is possible to show the current timer duration remaining, similar to when the timer is added to a standard entity card? I have found different posts around the forum giving different recommendations, but they are all from 2019 and do not seem to work for me.
Thank you,
-Curtis
Yes, just assign a timer entity to the card and add show_state: true
1 Like
Thank you, that worked for me! Previously I was using the entity assigned as an input select, so when I clicked my button I picked from my options. With the timer assigned, I now lose that. Is there a way to manually assign a click to still pull up the input select for this, instead of the timer? Thank you much for your time, I’ve been trying to get this figured out all evening!
Sure it’s possible!
Automatically selects the next option:
tap_action:
action: call-service
service: input_select.select_next
service_data:
entity_id: input_select.your_entity # replace with your input select here
Or if you wanted the more-info to show up instead
tap_action:
action: more-info
entity: input_select.your_entity # replace with your input select here
1 Like
Thank you so much! This is an incredible tool and I am very appreciative of the work you put in it!
2 Likes
Trying to get the same color as my lights when turned on.
And coloring a svg on the fly with the css var.
Makes sense ?