Yes both centre and center seem to work.
Unfortunately this:
- justify-self: start
- text-align: center
Just moves the text to the left while maintaining the same vertical position.
Try
template: switch_button
aspect_ratio: 4/3
layout: icon_state
show_label: false
styles:
card:
- border-radius: 10px
- padding: 3px 3px 3px 3px
- margin: 0% 0% 0% 0%
- '--paper-card-background-color': 'rgba(0, 0, 0, 0)'
grid:
- grid-template-area: '"i n" "i n" "i n"'
- grid-template-rows: 33% 1fr
- grid-template-columns: 33% auto
name:
- justify-self: middle
- font-size: 14px
- padding: 0px 0px 0px 0px
- color: var(--primary-text-color)
- align-self: end
1 Like
Thatās it! Thank you.
Is there a way to specify more than one value for a state style, so I donāt have to define the same thing over and over?
- styles:
value: 'cleaning' or 'returning' or 'paused' # not like this obviously
card:
- border: solid 1px var(--paper-item-icon-active-color)
- box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
The state operator can be a template so something like this?:
state:
- operator: template
value: >
[[[
var state = entity.state;
var source = entity.attributes.source === 'none' ? null : entity.attributes.source;
return (state === 'playing' &&
source != 'TV')
]]]
Iām going to have a look. The problem is not related to the link youāve sent but I still donāt understand why core devs donāt publish changes for developers of custom cards. Theyāve probably changed the style of the icons (like theyāve changed the default style of ha-card in 0.109 without publishing anythingā¦)
align-self: end
EDIT I see someone else has replied, disregard.
1 Like
I should have warned you. I heard about this change a week or so ago. My bad.
The Home, Normal and No holiday icons used to be full size as well. I tried the 1/1 and the buttons are the right size now but the icons are small and up the top and the text is on the bottomā¦ Pretty ugly.
It seems that this is also affecting buttons with the lock.
Iām sure itās very frustrating for you.
Iām sorry klogg, I have no idea how to apply that to my use case.
cant you do something like this:
- operator: template
value: >
[[[
return entity.attributes.country_code && entity.attributes.country_code in [ 'nl', 'de','be']
]]]
color: 'white'
in your case:
- operator: template
value: >
[[[
return entity.attributes.value && entity.attributes.value in [ 'cleaning', 'returning','paused']
]]]
card:
- border: solid 1px var(--paper-item-icon-active-color)
- box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
2 Likes
That I can understand. Thanks!
Yeah, my bad, sorry.
I used an example that didnāt really match what you wanted.
Itās not been a good day today for me on the forumā¦
1 Like
Iād try by setting the height and width you actually want on the style object (the one used by the picture-element) and then set height and width to 100% on the styles.card object.
I seem to have a problem when defining states in templates. I basically want a button to have the same state styles set via the template but then change the icon state on the card itself as each button is unique.
For example, this all lights button will have my standard template state colours for on/off but the icon i would like to change based on the state which has been defined on the card itself. This would allow me to have multiple quick toggles with different state icons but the look/feel remains the same.
It seems these dont merge like styles do.
Card:
entity: light.all_lights
state:
- icon: 'mdi:lightbulb-off'
value: 'off'
- icon: 'mdi:lightbulb-on'
value: 'on'
template: quick_toggle_btn
type: 'custom:button-card'
Template:
quick_toggle_btn:
aspect_ratio: 2/1
show_name: false
state:
- styles:
card: null
icon:
- filter: grayscale(100%)
- filter: opacity(30%)
label:
- filter: opacity(30%)
name:
- filter: opacity(30%)
state:
- filter: opacity(30%)
value: 'off'
- styles:
card:
- background-color: '#0DD58C'
icon:
- color: white
label:
- color: white
name:
- color: white
state:
- color: white
value: 'on'
I thought as much, i read the docs but i dont get it the syntax to be honest. Ill try and figure it out. Thanks.
Like this:
entity: light.all_lights
state:
- icon: 'mdi:lightbulb-off'
id: id_off
- icon: 'mdi:lightbulb-on'
id: id_on
template: quick_toggle_btn
type: 'custom:button-card'
quick_toggle_btn:
aspect_ratio: 2/1
show_name: false
state:
- styles:
card: null
icon:
- filter: grayscale(100%)
- filter: opacity(30%)
label:
- filter: opacity(30%)
name:
- filter: opacity(30%)
state:
- filter: opacity(30%)
value: 'off'
id: id_off
- styles:
card:
- background-color: '#0DD58C'
icon:
- color: white
label:
- color: white
name:
- color: white
state:
- color: white
value: 'on'
id: id_on
2 Likes
This looks amazing! Could you please share the yaml for the irrigation card? Iād like to see how you did the inputs and days of week selector.