Way out of my league here, So might misunderstand. But I’m not in YAML mode and are using the templates. Not by !including but by adding the template code using the “Raw editor”.
2 Likes
Right, so if that’s possible, it’s good 
(I never used storage mode and thought you couldn’t edit the “yaml” directly)
I’ll edit my post, thanks for pointing it out.
That explains it, thank you. I’ll disregard the HA templating docs.
I made the change you suggested and after some trial and error, this is the new statement.:
return states['fan.office_fan'].attributes.speed === 'low'
The results, however, are puzzling. My desired text effects are not applying. I’ve confirmed that the above statement does indeed return true when I set the fan speed to low. I suspect there is a conflict somewhere between my button template and the card but I can’t see it.
Template
button_card_templates:
fan-speed-settings:
show_icon: false
styles:
card:
- height: 30px
- font-size: 12px
- border: 1px solid white
- border-radius: 5px
- text-transform: uppercase
icon:
- icon-size: 14px
Card
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: fan.office_fan
state: "on"
card:
type: horizontal-stack
cards:
- type: custom:button-card # Low Button
template: fan-speed-settings
name: low
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.office_fan
speed: low
state:
- operator: ==
value: >
return states['fan.office_fan'].attributes.speed === 'low'
styles:
name:
- color: rgba(181, 142, 49, 0)
- operator: default
styles:
name:
- color: '#292929'
Operator should be operator: template 
Ugh… I really shouldn’t do this when I’m tired. Thank you!
Hi there
thanks for the hint
i have tried like this but no luck:
- color: auto
color_type: card
dbltap_action:
action: more-info
entity: light.yeelight_color1_04cf8c9557ff
icon: 'mdi:floor-lamp'
name: CANDEEIRO DE PÉ
show_entity_picture: true
size: 80%
state:
- entity_picture: /local/images/salapeon.jpg
value: 'on'
- entity_picture: /local/images/salapeoff.jpg
value: 'off'
styles:
entity_picture:
- transform: rotate(90deg)
when i change size the image resizes, but the card also resizes…i want to freeze the card size, but change the image size. is it possible?
has for this hint:
state:
- value: 'on'
styles:
name:
- background-color: your_color
- value: 'off'
styles:
name:
- background-color: other_color
it works great…but is there anyway that the background is applied to the whole line?
i AM REALLY LOVING THIS CARD !!!
I don’t understand what you are trying to achieve? Can you show me what happens?
You could try:
styles:
name:
- width: 100%
Yes of course
so for question number 1:
i want that the 3rd light have always the same size as 1 and 2
i want to reduce the image size
then i want to apply question 2 in all cards so that for example on card 2 i have:
IMAGE
STATE OF THE IMAGE “SALA DE JANTAR” WITH FULL ROW IN COLOR RELATED TO STATE
question numner 2:
tried:
show_entity_picture: true
size: 80%
state:
- value: 'on'
entity_picture: /local/images/HallOFF.jpg
- styles:
name:
width: 100%
background-color: 'rgb(255, 228, 181)'
- entity_picture: /local/images/HallON.jpg
value: 'off'
but background color does not change 
(only want background of the ‘name’ to change, not the card)
Feedback welcome as alway
BREAKING CHANGES
- I had to change some default styles to support aspect ratio and icon auto-resizing, this might break some of your custom styles. Hopefully not too much. Feel free to request some help on the forum.
- Deprecate
style. Same result with:- before:
style: - font-size: 10px - after:
styles: card: - font-size: 10px
- before:
NEW FEATURES
-
You can now merge states together by
idwhen using templates. The states you want to merge have to have the sameid. Thisidparameter is new and can be anything (string, number, …). States withoutidwill still be appended. Styles embedded in a state are merged together as usual. Fixes #165button_card_templates: sensor: styles: card: - font-size: 16px - width: 75px tap_action: action: more-info state: - color: orange value: 75 id: my_id sensor_humidity: template: sensor icon: 'mdi:weather-rainy' state: - color: 'rgb(255,0,0)' operator: '>' value: 50 - color: 'rgb(0,0,255)' operator: '<' value: 25 sensor_test: template: sensor_humidity state: - color: pink id: my_id operator: '>' value: 75 styles: name: - color: '#ff0000' ############### Used like this ############## - type: custom:button-card template: sensor_test entity: input_number.test show_entity_picture: trueWill result in this state object for your button (styles, operator and color are overridden for the
id: my_idas you can see):state: - color: pink operator: '>' value: 75 styles: name: - color: '#ff0000' - color: 'rgb(255,0,0)' operator: '>' value: 50 - color: 'rgb(0,0,255)' operator: '<' value: 25 -
Icon will auto adapt to the height of the card and not only to it’s width. This will enable you to skip using
size: xx%when you defined the width, height or aspect-ratio of a card. -
You can now define an aspect ratio for your cards using
aspect_ratioin the main config, and the card will adapt to all of your screen size. This will enable you to skip setting the width and the height of a card to make it square for example.
- type: vertical-stack cards: - type: horizontal-stack cards: - type: custom:button-card name: 1/1 icon: mdi:lightbulb aspect_ratio: 1/1 - type: custom:button-card name: 2/1 icon: mdi:lightbulb aspect_ratio: 2/1 - type: custom:button-card name: 3/1 icon: mdi:lightbulb aspect_ratio: 3/1 - type: custom:button-card name: 4/1 icon: mdi:lightbulb aspect_ratio: 4/1 - type: horizontal-stack cards: - type: custom:button-card name: 1/1.2 icon: mdi:lightbulb aspect_ratio: 1/1.2 - type: custom:button-card name: 1/1.3 icon: mdi:lightbulb aspect_ratio: 1/1.3 - type: custom:button-card name: 1/1.4 icon: mdi:lightbulb aspect_ratio: 1/1.4 - type: custom:button-card name: 1/1.5 icon: mdi:lightbulb aspect_ratio: 1/1.5 -
New option to ignore the light temperature (Fixes #153):
color: auto-no-temperature -
name_templateandentity_picture_template. Also available per state (because why not). For both, the javascript code needs to return a string. Fixes #162 -
color: auto-no-temperature: This will have the same effect ascolor: autobut will ignore your light temperature. -
When
action: more-info, you can now define also an entity other than the one assigned to the card (Fixes #163):- type: custom:button-card entity: light.my_light tap_action: action: more-info entity: sensor.my_sensor
5 Likes
after reviewing last release i am having trouble…
i still cannot achieve my goal
can you please check my code?
cards:
- name: ILUMINAÇÃO DA SALA
template: header_marcelo
type: 'custom:button-card'
- cards:
- entity: light.luz_sala_de_estar
dbltap_action:
action: more-info
icon: 'mdi:ceiling-light'
name: SALA DE ESTAR
show_entity_picture: true
show_state: true
state:
- entity_picture: /local/images/SalaON.jpg
value: 'on'
- styles:
name:
- width: 100%
- background-color: 'rgb(255, 230, 181)'
- value: 'off'
tap_action:
action: toggle
template: cartao
type: 'custom:button-card'
- color: 'rgb(255, 228, 181)'
color_type: card
dbltap_action:
action: more-info
entity: light.luz_sala_de_jantar
icon: 'mdi:ceiling-light'
name: SALA DE JANTAR
show_entity_picture: true
size: 100%
state:
- entity_picture: /local/images/JantarON.jpg
value: 'on'
- entity_picture: /local/images/JantarOFF.jpg
value: 'off'
styles:
entity_picture:
- transform: rotate(180deg)
tap_action:
action: toggle
template: cartao
type: 'custom:button-card'
- color: auto
color_type: card
dbltap_action:
action: more-info
entity: light.yeelight_color1_04cf8c9557ff
icon: 'mdi:floor-lamp'
name: CANDEEIRO DE PÉ
show_entity_picture: true
size: 80%
state:
- entity_picture: /local/images/salapeon.jpg
value: 'on'
- entity_picture: /local/images/salapeoff.jpg
styles:
entity_picture:
- transform: rotate(90deg)
value: 'off'
tap_action:
action: toggle
template: cartao
type: 'custom:button-card'
type: horizontal-stack
aspect_ratio: 2/1
- cards:
- dbltap_action:
action: more-info
entity: light.luz_hall
icon: 'mdi:lightbulb'
name: HALL
show_entity_picture: true
size: 80%
state:
- value: 'on'
entity_picture: /local/images/HallOFF.jpg
- style:
name:
- width: 100%
- background-color: 'rgb(255, 228, 181)'
- entity_picture: /local/images/HallON.jpg
value: 'off'
tap_action:
action: toggle
template: cartao
type: 'custom:button-card'
- color: auto
color_type: card
dbltap_action:
action: more-info
entity: light.luz_philips_xiaomi
icon: 'mdi:lamp'
name: APARADOR
size: 80%
tap_action:
action: toggle
template: cartao
type: 'custom:button-card'
- color: auto
color_type: card
dbltap_action:
action: more-info
state: null
entity: light.yeelight_color2_04cf8c842ee1
icon: 'mdi:television-box'
name: AMBILIGHT
size: 80%
tap_action:
action: toggle
template: cartao
type: 'custom:button-card'
type: horizontal-stack
type: vertical-stack
I’ve been waiting for this to shorten my config. Thanks for all the hard work. I’ll test it out today when I get home.
wow, I love this layout for harmony buttons…
If you didn’t already, could you share your config for this layout?
I’ve setup mine like this (consitional to the activity) but I LOVE those buttons
1 Like
Does this version have the ability to change the ‘on press’ graphic (I forgot the name you used)?
No sorry, there is a bug in the component I use unfortunately it needs to be resolved before I can do anything…
If it takes too long, I’ll think about something else.
Is it possible to have this
- type: "custom:button-card"
template: sensori_button_card_template
entity: binary_sensor.motion_sensor_giu
name: Giù
state:
- value: 'on'
icon: mdi:window-open
- value: 'off'
icon: mdi:window-closed
and in the template
sensori_button_card_template:
state:
- value: 'on'
styles:
icon:
- color: yellow
name:
- color: yellow
state:
- color: yellow
card:
- --paper-card-background-color: 'rgba(255, 0, 0, 1)'
- value: 'off'
styles:
icon:
- color: white
name:
- color: white
label:
- color: white
so repeating the state: having just the icon setting within the card and all the others in the template?
Thanks
No biggie. I have a temporary solution that works ‘okay’.
Sorry, I haven’t seen the new release.
Thanks!!!
Is it normal in 1.10.0 that a simple button card
- type: custom:button-card
entity: switch.lg_tv
name: TV
icon: mdi:television
color: var(--my-green)
tap_action:
action: toggle
hold_action:
action: more-info
shows no icon?
Probably not Did you clear the cache? Is it happening on all the buttons? And which browser is that?
(I don’t have any problem on my side on my test instance with chrome and firefox, thus the questions)