how to disable color state on/off. thanks you.
So another frontend update it seems has screwed my card up?
- type: horizontal-stack
cards:
- type: entity-button
entity: switch.sonoff51083
tap_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.sonoff51083
- type: entity-button
entity: switch.sonoff63719
tap_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.sonoff63719
- type: custom:button-card
entity: input_boolean.alarmgaragedoor
icon: mdi:security
color_type: icon
lock:
enabled: true
duration: 2
state:
- value: 'off'
color: var(--state-icon-color)
- value: 'on'
color: var(--state-icon-active-color)
name: Exit-Enter
show_state: false
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.alarmgaragedoor
The button on the right is now a ddifferent size to the ones on the left. How can I make them all the same size again? The gap at the top of that stack is because of a conditional card - I presume I cannot get rid of that gap?
Switching to use custom-button-card for all 3 looks better
But Iād like to now increase the spacing between the icon and the text to mimic the core card?
2 Likes
Iām new to HAā¦
- Could you share your code for this type of button?
Is it a template etc etc?
Iāve been having this issue on my current 2021.3.2 release too (still need to upgrade).
I canāt offer you a full solution but Iāve been fiddling with the margins for a field (under styles) to try and get it right, e.g.:
name:
- margin-top: -1px
- margin-bottom: 0px
The problem is when I get it right for the browser itās off on mobile (iOS app) and vice versa. Iāve sat with the code inspector in my browser quite a bit but couldnāt figure out why it would be off in the first place.
Like you changed yours, I tend to use the same kind of button card on a row to eliminate other possible differences in how the buttons render.
1 Like
I can live with it but it just randomly changing for no reason is perplexing.
You can change the size of the icon and also add padding using the style options, to set the icon or name higher/lower.
Can you show an example?
For example:
size: 50%
styles:
name:
- padding-bottom: 5px
- font-weight: bold
Size variable changes the icon size. Change the padding-bottom to change the position of the name. You can also use those stylings for icons, then use the correct variable (so add that under style option).
1 Like
Hello together,
i read severeal threads an nearly everywhere custom:button-card is suggested as a great solution for several āproblemsā 
So i thought, lets give it a try and i must say, wow what a great addon.
At the moment i try to build Buttons in Buttons to get a new solution for my covers.
The Problem i have at the moment is the spacing in the yellow area.
I donāt find a solution to reduce the spacing between the 3 Buttons.
type: 'custom:button-card'
entity: light.virtual_l01
name: Spots
icon: 'mdi:lightbulb'
aspect_ratio: 5/1
styles:
grid:
- padding: 0%
- grid-template-areas: '"i n n . . . cf_up cf_stop cf_down"'
- grid-template-rows: 1fr
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
icon:
- color: 'rgb(169, 177, 188)'
custom_fields:
cf_up:
- justify-self: middle
cf_stop:
- justify-self: middle
cf_down:
- justify-self: middle
custom_fields:
cf_up:
card:
type: 'custom:button-card'
entity: light.virtual_l02
icon: 'mdi:triangle'
style: |
ha-card {
box-shadow: none;
}
tap_action: none
cf_stop:
card:
type: 'custom:button-card'
entity: light.virtual_l02
icon: 'mdi:square'
style: |
ha-card {
box-shadow: none;
}
tap_action: none
cf_down:
card:
type: 'custom:button-card'
entity: light.virtual_l02
icon: 'mdi:triangle'
style: |
ha-card {
box-shadow: none;
}
tap_action: none
tap_action: none
I am not sure if my grid-layout is right or where the problem could be.
Perhaps anybody of you can give me a hint how to solve the issue?
Thx a lot
Read up on CSS grids and maybe try this (the link is also in the docs):
- grid-template-areas: '"i n cf_up cf_stop cf_down"'
- grid-template-rows: 1fr
- grid-template-columns: min-content 1fr min-content min-content min-content
This will make the icon and 3 buttons take up the minimum space while the name takes the rest.
Thereās no spacing, itās the padding of each of the embedded buttons.
cf_down:
card:
type: 'custom:button-card'
entity: light.virtual_l02
icon: 'mdi:triangle'
styles:
card: # I replaced card-mod's style with that
- box-shadow: none
- padding: 0px
thank you both
@parautenbach
I tried your suggestion, but with min-content for the icon, the icon disappears completly. In the evening i will read the docs an try some different approaches.
@RomRider
Thx for the hint with styles
I really need some help! Could someone tell me how I can get my location field to wrap or break or something?
type: 'custom:button-card'
entity: person.g3_1
show_icon: false
show_name: false
aspect_ratio: 1/1
styles:
card:
- background-color: transparent
- border-radius: 10%
- padding: 20%
- font-size: 10px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"n n" "i i" "zone zone""location location""battery battery"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 12px
- align-self: start
- justify-self: start
- padding-bottom: 4px
custom_fields:
zone:
- font-weight: bold
- font-size: 12px
- align-self: start
- justify-self: start
- padding-bottom: 4px
location:
- entity: sensor.g3_4_iphone
- align-self: start
- justify-self: start
- padding-bottom: 4px
battery:
- align-self: start
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.g3_1_iphone_12_pro_max_battery_state_2"].state
<= 20) return "red"; ]]]
custom_fields:
i: |
<img width= 38% src='/local/images/me_g3-1.png'>
zone: |
[[[
return `<ha-icon
icon="mdi:google-maps"
style="width: 12px; height: 12px; color: red;">
</ha-icon><span> : ${states['person.g3_1'].state} </span>`
]]]
location: |
[[[
return `<ha-icon
icon="mdi:map"
style="width: 12px; height: 12px; color: red;">
</ha-icon><span>: ${states['sensor.g3_1_iphone'].attributes['Formatted Address']}<span>`
]]]
battery: |
[[[
return `<ha-icon
icon="mdi:battery"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span> : <span style="color: var(--text-color-sensor);">${states['sensor.g3_1_iphone_12_pro_max_battery_state_2'].state}% - ${states['device_tracker.g3_1_iphone_12_pro_max_2'].attributes.battery_status}</span></span>`
]]]
Dope looking card!
At the moment i am trying to get depper into the template function to reduce the amount of the same definitions over and overā¦
Is it possible to include the template definition with a separate file?
That would be great because i use different Dashboards for different devices
The custom decluttering card can handle it.
Is there a way to colour an SVG part based on a state?
I have the following custom field which creates a hue bulb. At the moment the base (bulb) is a set colour of #C0C0C0 and the light is filled with āvar(ābutton-card-light-color)ā which for Hue bulbs works fine as the light part displays the light of the bulb nicely and it goes grey when off.
custom_fields:
icon_hue: >
<svg viewBox="0 0 32 32"><path id="Bulb" d="M16,11.999c1.523,0 3.746,-0.143
5.539,-0.553c-1.358,4.219 -1.591,8.078 -1.545,9.176c0.011,0.255 -0.076,0.496
-0.242,0.689l-0.441,0.504c-0.952,0.113 -2.055,0.184 -3.311,0.184c-1.256,0
-2.359,-0.071 -3.311,-0.184l-0.441,-0.504c-0.166,-0.193 -0.253,-0.434
-0.242,-0.689c0.046,-1.098 -0.187,-4.957 -1.545,-9.176c1.793,0.41
4.016,0.553 5.539,0.553Zm-2.998,10.862c1.042,0.101 2.188,0.138
3.002,0.138c0.814,0 1.96,-0.037 3.002,-0.138l-0.501,3.108c-0.026,0.218
-0.132,0.42 -0.3,0.573l-0.467,0.424c-0.032,0.029 -0.061,0.06
-0.089,0.092l-0.493,0.583c-0.19,0.226 -0.48,0.358
-0.787,0.358l-0.365,0l-0.365,0c-0.307,0 -0.596,-0.132
-0.786,-0.358l-0.495,-0.583c-0.027,-0.032 -0.056,-0.063
-0.087,-0.092l-0.467,-0.424c-0.168,-0.153 -0.275,-0.355
-0.301,-0.573l-0.501,-3.108Z" style="fill:#C0C0C0;"/><path id="Light"
d="M22.304,5.398c1.525,1.402 0.137,3.985 -0.329,4.907c-1.257,0.366
-3.269,0.695 -5.975,0.695c-2.706,0 -4.717,-0.329 -5.974,-0.695c-0.466,-0.922
-1.855,-3.505 -0.329,-4.907c1.631,-1.499 6.028,-1.396 6.303,-1.396c0.276,0
4.672,-0.103 6.304,1.396Z"
style="fill:var(--button-card-light-color)"/></svg>
However when the light is off i would also like the bulb part to be dimmer as #C0C0C0 is quite bright. I have tried the following but with no success:
state:
- styles:
custom_fields:
icon_hue:
- fill: red
state:
- color: var(--disabled-text-color)
label:
- color: var(--disabled-text-color)
value: 'off'
Normally the bulb is a sudo element and is access via the .bulb entity within CSS and fill being the value but in the button card its handled differently.
Any ideas how to achieve this?
ā
Side note, after setting this up i have noticed that Hue bulbs go grey when off however zigbee bulbs dont and stay the last colour/temp they where at. Not sure exactly why this happens.
Edit: above comment, just noticed --button-card-light-color-no-temperature value can be used however this sets it to the icon active colour from the theme. Anyway to override this value without changing the theme?
Thatās how YAML works, so yes you can split your templates, but thatās not up to button-card, but how YAML works. Use !include to split your code.
See docs for more info: Splitting up the configuration - Home Assistant
I have separate files for button-card templates, decluttering-card, popup cards, markdown style options and more.
thx, sometimesā¦ i made an error an then i thought the simple way does not workā¦
And then my ideaās get more and more complexā¦
1 Like