styles:
card:
- background-color: '#000044'
icon:
- color: red
Im banging my head against the table trying to get how i can expand my sensor icon over the button.
cards:
- cards:
- template: button
type: 'custom:button-card'
styles:
left: 50%
top: 50%
width: 100%
heigth: 100%
img_cell:
- justify-content: center
- align-items: center
- margin: none
- text-align: start
icon:
- height: 96%
- width: 85%
- border-radius: 20px
grid:
- grid-template-areas: '"icn temp" "n n" "i i"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr 1fr 10fr
name:
- padding-top: 4px
custom_fields:
temp: |
[[[
return `<ha-icon icon='mdi:motion-sensor' style='width: 12px; height: 12px; color: yellow;'></ha-icon>
<span>${states['sensor.jimmy_status'].state}</span>`
]]]
entity: sensor.jimmy_status
show_entity_picture: 'true'
- template: button
type: 'custom:button-card'
styles:
img_cell:
- justify-content: center
- align-items: center
- margin: none
- text-align: start
icon:
- height: 96%
- width: 85%
- border-radius: 20px
grid:
- grid-template-areas: '"icn temp" "n n" "i i"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr 1fr 10fr
name:
- padding-top: 4px
custom_fields:
temp: |
[[[
return `<ha-icon icon='mdi:motion-sensor' style='width: 12px; height: 12px; color: yellow;'></ha-icon>
<span>${states['sensor.maria_status'].state}</span>`
]]]
entity: sensor.maria_status
show_entity_picture: 'true'
type: horizontal-stack
type: vertical-stack
Anyone have a suggestion and or not on what im doing wrong?
Im not using yaml mode. but i have most card funktions made by @LbDab in place.
So im hoping just to complete my Sensor for my device_tracking
I donāt get what result you expect? You want the picture of each person to expand and to take the full size of the button? (if yes, solution in the next post 
)
Try this CSS for your card to make the image as a background:
styles:
card:
- background-image: url("/local/images/person.jpg")
i cant find it, when iām clicking on the the camera icon, i can see the streamā¦ so weird.
any idea what do ?
Thx man! Sometimes its so simple. Thx for taking your time to help me.
sorry to get back to this, but Im still not abel to get the droplet on the button, either by using this:
label: >
[[[
return '\U0001F4A7 ' + (states['weather.home_darksky'].attributes.forecast[0].precipitation || 0) + ' mm';
]]]
or trying to use the droplet directly in some way.
Could you please confirm this is the correct code?
Seeing:
so all else is alright (though still no more-info eitherā¦)
I need some help with the templating bit, Iāve tried everything I can think of and Iām out of idĆ©as now.
I want to change the icon of a custom_field entry based on itās state. so as an easy example Iām using the example provided on the gitub for āCustom fieldsā, the āOr you can use the grid. Each element will have itās name positioned as the grid-area:ā to be specific.
I would like to update the icon of the CPU custom field to be red when itās above 90%, instead of updating the state like the example provides.
custom_fields:
temp:
- align-self: start
- justify-self: end
cpu:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- --text-color-sensor: '[[[ if (states["sensor.raspi_cpu"].state > 80) return "red"; ]]]'
Iām guessing it should be possible to edit the last row āātext-color-sensorā but Iām not sure how to find what it should be to apply on the icon?.
Iām in love with the new templates. Super powerful
Here is what I have been working on for my presence card!
https://pastebin.com/raw/k61GXwiK
6 Likes
Iām not looking for a complete solution here, just a pointer - Lovelace has become a victim of its own success in that it is becoming very hard to remember what is possible using what custom card!
Is there a way to only show buttons based on the value of its state? Iām thinking of batteries when they go below a certain percentage value.
Apart from config-template-card which I know can do almost anything and I do use quite a lot but I always look for a āsimplerā method first as that card can make your config hard to read at a later date!
Hi everyone,
first thanks for your great job and developments!
I created one template to achieve the following result (thanks elRadix and RomRider), I was able to modify the āblindsā icon color (green=open, red=closed) but the card background color keeps staying yellow independently from the state. How can I disable it just for the blinds?
Thank you
SoL
template:
line01:
color: 'rgb(3,169,244)'
color_off: var(--disabled-text-color)
color_type: card
default_color: var(--primary-text-color)
style:
card:
- font-size: 20px
- font-weight: bold
- padding: 0px
- height: 45px
- border-color: '#ed17cc'
- border-radius: 25px
mod01:
color: 'rgb(255, 255, 0)'
color_off: 'var(--disabled-text-color)(189, 255, 5)'
color_type: card
default_color: var(--primary-text-color)
show_name: false
hold_action:
action: more-info
haptic: success
styles:
card:
- height: 50px
- width: 50px
- size: 75%
- border-radius: 50%
- box-shadow: '0px 0px 2px 2px rgba(0,0,0,0.3)'
state:
- value: open
styles:
icon:
- color: green
- value: closed
styles:
icon:
- color: red
card:
- name: CUCINA
template: line01
type: 'custom:button-card'
- cards:
- type: 'custom:button-card'
color_type: blank-card
- entity: light.hue_cucina
icon: 'mdi:led-strip'
name: Luce Cucina
template: mod01
type: 'custom:button-card'
- entity: switch.motion_sensor_state_cucina
icon: 'mdi:instagram'
name: Sensore cucina
template: mod01
type: 'custom:button-card'
- entity: cover.scuro_cucina_cover
icon: 'mdi:blinds'
name: Scuro Cucina
template: mod01
type: 'custom:button-card'
- entity: switch.microondeforno
icon: 'mdi:toaster-oven'
name: MicroondeForno
template: mod01
type: 'custom:button-card'
- type: 'custom:button-card'
color_type: blank-card
type: horizontal-stack
Thanks alot for sharing your code! I found the answer for my question in your code! 
motion: >
[[[
var wifi_icon = states['binary_sensor.kontor_rorelsesensor'].state === 'on' ? 'mdi:run-fast' : 'mdi:run';
var wifi_icon_color = states['binary_sensor.kontor_rorelsesensor'].state === 'on' ? 'yellow' : '#424242';
return '<ha-icon icon="' + wifi_icon +'" style="width: 14px; color:' + wifi_icon_color +';"></ha-icon>'
]]]
Now I need to figure out how to edit the grid to place the custom_fields next to each other.
Iām trying to create a button with hidden (same color as background) icons that lights up when they are active. Motion, windows, lights, doors, fire etc. I like to keep my gui simplistic but still have information available when needed
1 Like
Skipping the grid configuration and going with absolut position was easier for me.
Now I have a simplistic button which will show activity in the specific room.
Now I need to figure out how the decluttering card works and make this into a template and update all other cards, because 1 button consists of 113 rows of code right now.
And I could also redo the buttons above my graphs since thatās duplicate info when these buttons are in place.
Picture with āeverythingā active in that room, without activity there are no icons, just temperature.
3 Likes
Hi all!
I am trying to use a local svg-file for the icon on my weather card to get more options but I cant get it to work.
Or maybe you cant replace the icon with a local file?
- type: "custom:button-card"
entity: sensor.yr_symbol_current
entity_picture: >
[[[
if (states['sun.sun'].state == 'above_horizon') return "/local/icons/yr/(states['sensor.yr_symbol']state)d.svg";
else return "/local/icons/yr/(states['sensor.yr_symbol']state)n.svg";
]]]
name: YR
tap_action:
action: more-info
show_state: true
show_name: true
layout: icon_label
template: button
I have also just tried without the entity_picture and tried to use the entity icon but cant get it to workā¦
Any ideas?
You have not set it to show the entity picture:
show_entity_picture: true
1 Like
you might want to try:
[[[
if (states['sun.sun'].state == 'above_horizon') return "/local/icons/yr/" + entity.state + "d.svg";
return "/local/icons/yr/" + entity.state + "n.svg";
]]]
this is presuming thereās no _ for the final d/n in the icon names?
ive taken the entity.state, because I think itās the sensor.yr_symbol_current giving you the state for the icon name? In you template you use sensor.yr_symbol. If you really need that sensor than use:
[[[
if (states['sun.sun'].state == 'above_horizon') return "/local/icons/yr/" + states['sensor.yr_symbol'].state + "d.svg";
return "/local/icons/yr/" + states['sensor.yr_symbol'].state + "n.svg";
]]]
1 Like
Now it works like a charm! Thx guys!
I love this card a lot. Together with the decluttering card it uses only 5 lines of code.
One question though, how can i make a transparent card when i only have two lights. Below i got three lights which make my buttons the perfect size. But when i got two it resizes it.
1 Like
you can use a blank card for this:
- type: 'custom:button-card'
color_type: blank-card
aspect_ratio: 1/1
Can you share your lovelace.yaml for this view ?