Since you tagged me here’s the post doing exactly that. custom_icons.js is only for static icons.
1 Like
Can anyone help. Not sure whether I have code wrong or the actions I am requesting are not possible. Trying to set up a button for the Tesla integration which changes colour dependent upon the battery level (which works), but then also spins if the car is charging, or flashes if the battery level falls below a threshold. Neither of the last two seem to work. What I have is
entity: sensor.mike_s_tesla_range_sensor
icon: 'mdi:car-electric'
name: Tesla Range Sensor
show_state: true
styles:
card:
- border-radius: 10%
- '--paper-card-background-color': 'rgba(0, 0, 0, 0.4)'
- box-shadow: none
icon:
- color: |
[[[
if (entity.state >= 175) return 'green';
if (entity.state >= 125 && entity.state < 175) return 'yellow';
else return 'red';
]]]
- animation:
- - - if (entity.state <= 100) blink 2s ease infinite
- spin: |
[[[
if (states["binary_sensor.mike_s_tesla_charger_sensor"].state =
"Charging") return true
else return false
]]]
name:
- color: white
state:
- color: white
type: 'custom:button-card'
What does the ‘.’ (dot) mean in this line?
It means empty cell 
1 Like
How will this,
grid:
- grid-template-areas: '"i ." "n n" "s s"'
- grid-template-rows: 1fr min-content min-content
- grid-template-columns: 40% 1fr
appear different from this,
- grid-template-areas: '"i i" "n n" "s s"'
- grid-template-rows: 1fr min-content min-content
- grid-template-columns: 40% 1fr
I’m guessing that using "i ." the icon can only display in a maximum of 50% of the card width.
Using "i i" it can display in up to the entire card width.
But in the first case it is restricted (by the grid-template-columns) to 40% of that 50% and in the second case it is restricted to 40% of the entire card width.
So if I am correct this is equivalent to the original:
- grid-template-areas: '"i i" "n n" "s s"'
- grid-template-rows: 1fr min-content min-content
- grid-template-columns: 20% 1fr
Or do I need to go back again to the grid documentation?
I’m assuming there was a typo (columns/rows) in the original post which I’ve corrected here.
grid:
- grid-template-areas: '"i ." "n n" "s s"'
- grid-template-rows: 1fr min-content min-content
- grid-template-columns: 40% 1fr
This means the i element will take the left cell the first line of the grid and this first cell is 40% of the total width of the grid. The right cell of the first line will be empty (but will take the remaining 60% of the total width of the grid)
- grid-template-areas: '"i i" "n n" "s s"'
- grid-template-rows: 1fr min-content min-content
- grid-template-columns: 40% 1fr
This means the i element will expand to the 2 cells composing the first line of the grid thus taking 100% of the width of the grid because the grid is composed of 2 columns.
In the above examples, your grid is always 2 columns by 3 lines.
2 Likes
Have you shared your config with above butten cards, can’t find it on your github?
I have what @Mattias_Persson is using mostly working. I have added a style transition: fill 1s linear which does not work. My guess is that the SVG is loaded on every state change, meaning that the transition does not have a chance to do anything because the SVG is loaded with the current state colour hence there’s nothing to transition to. My SVG is below. Notable bits is the style tag. No wise crack at my attempts at art
The 4th path statement is the one with the style added. The colour change works, just the transition that does not work.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><g class="currentLayer"><g>
<path fill="#123456" stroke="#6d6d6d" stroke-linejoin="round" d="M2.754 99.954c0-20.085 43.415-36.354 97.015-36.354s97.015 16.269 97.015 36.354c0 20.084-43.415 36.353-97.015 36.353S2.754 120.038 2.754 99.954z"/>
<path fill="#efefef" stroke="#919191" stroke-linejoin="round" d="M2.847 104.598c0-17.57 43.422-31.802 97.03-31.802 53.609 0 97.031 14.232 97.031 31.802S153.486 136.4 99.878 136.4c-53.609 0-97.031-14.232-97.031-31.802z"/>
<path fill="#dadada" stroke="#919191" stroke-linejoin="round" d="M15.196 105.433c0-14.133 38.083-25.58 85.1-25.58 47.015 0 85.098 11.447 85.098 25.58s-38.083 25.581-85.099 25.581c-47.016 0-85.1-11.448-85.1-25.58z"/>
<path style="fill: var(--button-card-light-color); transition: fill 1s linear;" stroke="#b6b6b6" stroke-width="2" stroke-linejoin="round" d="M15.196 108.776c0-13.312 38.083-24.095 85.1-24.095 47.015 0 85.098 10.783 85.098 24.095s-38.083 24.095-85.099 24.095c-47.016 0-85.1-10.783-85.1-24.095z"/></g></g>
</svg>
CSS doesn’t process the svg fill attribute that’s why you don’t have transitions. You have to use extra_styles for that but please read the documentation as there is an important note to read about extra_styles. You can also consider card-mod for that, which might be a better alternative.
Also see here: https://stackoverflow.com/a/20012937
Thanks. It works sometimes. I have the exact same card multiple times (except for the entity) and some of them work and others do not. I looked in the inspector and the style is applied to the path in all cases. Is it possible that there is a timing issue on loading the custom_field with the SVG icon? What should I be looking for? I tried both ways, using extra_styles and using card_mod. Both ways the transition is on the path that should transition but it fails to work in some cases.
If the css is there and correctly applied, it should work. Maybe a browser issue. I honestly don’t know what to look at in your case unfortunately 
Thank you. I’ll strip down my config and post it. Maybe someone will see something I don’t.
Can you share your config for the media player itself ?
Hey, i got a button card card that is shown in the pictures. I want to style the entity picture to fill the whole card, but i cannot handle the css. I dont know how to change up the icon and the entity picture seperate. This card is part of a stack which is in a mod card.
Note: this is the same card with different states
- aspect_ratio: 1/1 ## Wohnzimmer 2.2 ##
entity: media_player.ps4
name: Playstation
show_entity_picture: true
show_state: true
state:
- operator: template
value: >
[[[ return states['switch.ps4'].state === 'on' ]]]
styles:
icon:
- color: var(--state-icon-active-color)
style: |
ha-card {
box-shadow: var(--card-box-shadow);
}
styles:
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- display: flex
- justify-content: left
- padding-left: 19px
- height: 35px
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- text-transform: lowercase
- font-size: 12px
state:
- justify-self: start
- padding-left: 10px
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.ps4
hold_action:
action: more-info
type: 'custom:button-card'
I’m loving the template options (don’t need the !include method anymore this way) and save me a lot of time when editing my styling options for certain groups. I am having some difficulties understanding the chaing though. For instance, this is my button card setup for light entities:
- template: light
entity: light.woonkamer_yeelights
label: |
[[[
var bri = Math.round(states['light.woonkamer_yeelights'].attributes.brightness / 2.55);
return (bri ? bri : '0');
]]]
name: Yeelights
This all works excellent. But I feel like I should be able to template the label variabel as well. So that it automatically catches the entity I filled in inside that area. Perhaps I’m mistaken about the functionality and this is not possible. Anyone can shine some light?
You can use entity as a variable, this points to the state of the entity declared in the button-card. For eg:
var bri = Math.round(entity.attributes.brightness / 2.55);
You can define styles for icon and entity_picture instead of img_cell
1 Like
if i just replace img_cell with icon it looks like this
man css is hard…
Thanks, that works!
I tried to do the same with my music entities by templating the label (for volume) and icon state. Unfortunately I don’t have any luck there.
I use this for volume percentage as label. Tried replacing media_player.multispeakers_cast with entity but it doesn’t seem to work (get a blank/empty button)
label: |
[[[
return Math.round(states['media_player.multispeakers_cast'].attributes.volume_level * 100);
]]]
This is to change the icon depending on what’s playing.
- icon: 'mdi:spotify'
operator: template
styles:
card:
- background-color: var(--card-background-music)
icon:
- color: var(--music-entity-color)
name:
- color: var(--button-text-color)
value: |
[[[
return states['media_player.multispeakers_cast'].attributes
&& (states['media_player.multispeakers_cast'].attributes.app_name == 'Spotify')
I’m not sure what I’m doing wrong. I tried by removing the apostrophies as well, but I can’t seem to geg it to work. Do you know what I’m doing wrong?
Edit: I got it! I read again what you wrote, and you literally meant that entity = state AND entity. So I had to remove the ‘state’ variable from the code. Thanks!
This is so amazing. I just reduced 768 lines of code to 30 lines of code for my music buttons. Updating and changing the buttons will be sooooo much faster and easier now as well.
would you mind sharing how you have done this?
almost all my buttons have the same styling. It would be very good to centralize the styling so if i want to change something up i dont have to apply it to every card seperate. Especially grid layout and stuff is annoying.
Basically just follow the ReadMe of button card. If you can post your code of your button, I can help you with creating it as a template so you can copy/paste.
1 Like