Tried the code from @benm7 with your changes but still not working here (custom button card version 3.3.5) Could you share the code you got it working with?
I changed as you mentioned for example and have added --mdc-icon-size to my themes with 14px (themes reloaded
i can confirm that i think just like @benm7 mentioned above that its in the state part
work: >
[[[
return `<ha-icon
icon="mdi:car"
style="; height: var(--mdc-icon-size); color: var(--primary-line-color);">
</ha-icon><span>${states['sensor.lkr_to_work_waze'].state}mins</span>`
]]]
The issue comes from the icon taking full width pushing the text out of the card. So instead of saying my solution isn’t the proper one, please try it…
<ha-icon style="--mdc-icon-size: 14px; ...
@lubbertkramer , your syntax is wrong, you didn’t read my post
I did read but not fully understood what you meant as i can see now. But when i change the code into the code you propose it’s still giving a strange look and feel with blowing the icon size
- type: 'custom:button-card'
entity: person.lubbert_kramer
entity_picture: /local/test.png
size: 60%
color: auto
spin: false
show_name: false
show_state: true
show_label: false
show_icon: true
show_last_changed: false
show_entity_picture: true
tap_action:
action: more-info
haptic: light
aspect_ratio: 2/1
margin-right: 20px
label: ' '
off_icon_color: gray
off_name_color: gray
off_state_color: gray
styles:
card:
- border-radius: 12px
- --paper-card-background-color: var(--homekit)
icon:
- grid-column: 1
- grid-row: 1 / 4
label:
- color: gray
- font-size: 11px
- padding: 0px 10px
- justify-self: start
state:
- font-size: 12px
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
- color: var(--primary-text-color)
grid:
- grid-template-areas: '"i s" "i battery" "i home" "i work"'
- grid-template-columns: 50% 50%
- grid-template-rows: 25% 25% 25% 25%
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-size: 13px
entity_picture:
- height: 60px
- width: 60px
- border-radius: 100%
custom_fields:
battery:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
home:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
work:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
custom_fields:
battery: >
[[[
return `<ha-icon
icon="mdi:battery"
style="--mdc-icon-size: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['sensor.in2023_battery_level'].state}%</span>`
]]]
home: >
[[[
return `<ha-icon
icon="mdi:home-import-outline"
style="--mdc-icon-size: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['sensor.in2023_battery_level'].state}mins</span>`
]]]
work: >
[[[
return `<ha-icon
icon="mdi:car"
style="--mdc-icon-size: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['sensor.in2023_battery_level'].state}mins</span>`
]]]
state:
- value: "not_home"
styles:
card:
- opacity: 0.6
entity_picture:
- border: 1px solid var(--secondary-text-color)
- value: "home"
styles:
entity_picture:
- border: 1px solid var(--primary-line-color)
- value: "Ben Work"
styles:
entity_picture:
- border: 1px solid var(--secondary-line-color)
- value: "Jess Work"
styles:
entity_picture:
- border: 1px solid var(--secondary-line-color)
- value: "Poppy and Lola Home"
styles:
entity_picture:
- border: 1px solid var(--tertiary-line-color)
- value: "GPa and GMa Home"
styles:
entity_picture:
- border: 1px solid var(--tertiary-line-color)
Edit 1:
Edit 2:
Changing the style back to height it gives me the correct height for the icons but still the same error of no text before the icons just like @benm7
short code example:
work: >
[[[
return `<ha-icon
icon="mdi:car"
style="height: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['sensor.in2023_battery_level'].state}mins</span>`
]]]
My theme:
Default theme:
benm7
May 27, 2020, 12:52am
4011
Apologies RomRider, not my intent to ignore your advice, just wasn’t entirely sure how to apply your guidance. The code snippet helped immensely, and it is working again now thanks! The formatting is different now and is condensed between icon and text, plus icon is shifted left, but I’ll play around with it to get it similar to what I had it now it shows everything.
Before:
After:
Revised code for @lubbertkramer
- type: 'custom:button-card'
entity: person.ben
entity_picture: /local/ben6.png
size: 60%
color: auto
spin: false
show_name: false
show_state: true
show_label: false
show_icon: true
show_last_changed: false
show_entity_picture: true
tap_action:
action: more-info
haptic: light
aspect_ratio: 2/1
margin-right: 20px
label: ' '
off_icon_color: gray
off_name_color: gray
off_state_color: gray
styles:
card:
- border-radius: 12px
- --paper-card-background-color: var(--homekit)
icon:
- grid-column: 1
- grid-row: 1 / 4
label:
- color: gray
- font-size: 11px
- padding: 0px 10px
- justify-self: start
state:
- font-size: 12px
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
- color: var(--primary-text-color)
grid:
- grid-template-areas: '"i s" "i battery" "i home" "i work"'
- grid-template-columns: 50% 50%
- grid-template-rows: 25% 25% 25% 25%
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-size: 13px
entity_picture:
- height: 60px
- width: 60px
- border-radius: 100%
custom_fields:
battery:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
home:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
work:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
custom_fields:
battery: >
[[[
if (states['device_tracker.life360_ben'].attributes.battery_charging === false)
return `<ha-icon
icon="mdi:battery"
style="; --mdc-icon-size: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['device_tracker.life360_ben'].attributes.battery}%</span>`
else return `<ha-icon
icon="mdi:battery-charging"
style="; --mdc-icon-size: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['device_tracker.life360_ben'].attributes.battery}%</span>`
]]]
home: >
[[[
return `<ha-icon
icon="mdi:home-import-outline"
style="; --mdc-icon-size: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['sensor.ben_to_home_waze'].state}mins</span>`
]]]
work: >
[[[
return `<ha-icon
icon="mdi:car"
style="; --mdc-icon-size: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['sensor.ben_to_work_waze'].state}mins</span>`
]]]
state:
- value: "not_home"
styles:
card:
- opacity: 0.6
entity_picture:
- border: 1px solid var(--secondary-text-color)
- value: "home"
styles:
entity_picture:
- border: 1px solid var(--primary-line-color)
- value: "Ben Work"
styles:
entity_picture:
- border: 1px solid var(--secondary-line-color)
- value: "Jess Work"
styles:
entity_picture:
- border: 1px solid var(--secondary-line-color)
- value: "Poppy and Lola Home"
styles:
entity_picture:
- border: 1px solid var(--tertiary-line-color)
- value: "GPa and GMa Home"
styles:
entity_picture:
- border: 1px solid var(--tertiary-line-color)
3 Likes
Hi Guys ,
first post here and thanks to all who contribute . I’ve been trying to get my head around the button card and CSS grids and I’ve found 2 things that help me , maybe it can help someone else .
Using inspector in your browser can show you the grids and details of everything you place
and this tutorial . not sure if most of it is applicable but you learn quite a bit
with inspector you can even change your layout mode from mobile layout to screen layout with one click . Great for seeing how your layouts will look on a phone .
Regards
3 Likes
ricreis394
May 27, 2020, 9:46am
4013
How can I add buttons on top of a button? Can it be achieved with custom_fields?
You can add left and right padding on the ha-icon (probably 5px on each side), this should fix both issues.
zaibas01
May 27, 2020, 1:45pm
4015
after upgrade to 0.110.3 dont show mdi icons
ricreis394
May 27, 2020, 2:30pm
4016
How can I add buttons on top of a button? Can it be achieved with custom_fields?
Right now I’m using it in a combination of layout-card and 4 buttons, but if I possible I want to convert to a single button
[Screenshot_2]
nvm, didn’t knew I could add cards into custom_fields
ThaNerd
May 27, 2020, 2:50pm
4017
Everytime I set the height of a card I get a huge gap at the bottom. I tried setting padding to 0% and margin to 0% but nothing works…If I don’t set the height the card becomes to big.
Is there a way to fix this?
styles:
card:
- font-size: 20px
- color: green
- height: 100px
- padding-bottom: 0%
- padding-top: 0%
Upgrade to the latest button-card, this is already fixed.
What is the parent card in this setup?
ThaNerd
May 27, 2020, 3:09pm
4019
This is the start of the yaml:
title: Irrigation
icon: mdi:water-pump
cards:
- type: vertical-stack
cards:
- type: 'custom:button-card'
entity: timer.irrigation_timer
show_state: true
show_label: false
show_icon: false
show_name: false
aspect_ratio: 2/1
state_display: '[[[ if (entity.state === "idle") return "Irrigation is OFF"; else return null ]]]'
styles:
card:
- font-size: 20px
- color: green
- margin: 0%
- type: 'custom:button-card'
entity: script.irrigate
name: Irrigate All
aspect_ratio: 4/1
show_icon: false
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.irrigate
confirmation:
text: Are you sure you want to start all sprinklers?
styles:
card:
- font-size: 20px
- height: 100px
- padding-bottom: 0%
- padding-top: 0%
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: switch.irrig_front
icon: mdi:arrow-decision-outline
aspect_ratio: 1/1
tap_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.irrig_front
confirmation:
text: Are you sure you want to start Front Yard?
double_tap_action:
action: call-service
service: switch.turn_off
service_data:
entity_id: switch.irrig_front
confirmation:
text: Are you sure you want to stop Front Yard?
styles:
card:
- font-size: 12px
Don’t forget to clear your cache. Also if you use HACS, refresh the page twice, at least.
I guess it was aspect_ratio vs height? You can’t specify both at the same time
ThaNerd
May 27, 2020, 7:29pm
4024
Yeah I removed aspect ratio and it started to play nice
ThaNerd
May 27, 2020, 7:53pm
4025
Btw out of curiosity is there a way to use a gif within a card? Or any animated image?
Yes, just use your gif as the entity_picture, or in any CSS property which supports an image (like background for example).
1 Like
Nic0205
May 28, 2020, 11:44am
4027
Hey there, just another noob question:
How could i align the icon left?
aspect_ratio: 1/0.3
color: 'rgb(47, 186, 229)'
icon: 'fas:couch'
label: >
[[[ return states['sensor.heizung_wohnzimmer_temperature'].state + '°C / ' +
states['sensor.heizung_wohnzimmer_humidity'].state + '%' ]]]
name: Wohnzimmer
show_label: true
size: 40%
styles:
card:
- color: '#101012'
- padding-top: 0%
- align: left
label:
- color: '#adadb7'
- font-size: 13px
- padding-top: 5px
name:
- justify-self: center
- margin-bottom: 5%
- font-size: 18px
- font-weight: bold
- font-family: 'Roboto,sans-serif'
tap_action:
action: navigate
navigation_path: /lovelace/wohnzimmer
type: 'custom:button-card'
But align: lleft does not affect the icon. I’m neither a HA nor a CSS expert.
Could you help me?
Nic
add icon: under styles: and use justify-self: start
styles:
icon:
- justify-self: start
)
see above.
