Can you draw what you mean? Are you asking for 1 button thats 4 buttons long and 1 button thats 1 button long?
Hi there,
why this code does not work?
what i want is the background and letters to change according to sensor data
cards:
- color: 'rgb(107, 140, 150)'
color_type: label-card
name: INFORMAÇÃO
styles:
card:
- height: 5px
- border-radius: 5px
type: 'custom:button-card'
- cards:
- color: auto
entity: sensor.riscoincendio
name: Risco de Incendio
show_label: true
show_state: true
size: 70%
styles:
card:
- height: 170px
- color_type: label-card
width: 150px
- color: GREEN
value: REDUZIDO
- color: green
value: ELEVADO
type: 'custom:button-card'
type: horizontal-stack
type: vertical-stack
Because you aren’t following the documentation for changing styles for states. Look at this section of code and attempt to replicate it with your own states:
- type: custom:button-card
entity: switch.skylight
name: <3 Apple
icon: mdi:fire
show_state: true
state:
- value: 'off'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
Take note of the states section as that is what drives the styles when the state changes.
Yes, exactly!
I just discovered the Configuration Templates and can’t seem to get it to work with anything other than styles. Everything under Styles works as expected but none of the other configuration shows up when I use the template. Is this expected behavior? Here is an example of my configuration in lovelace-ui.yaml
sensor:
styles:
card:
- font-size: 16px
width: 75px
tap_action:
action: more-info
sensor_humidity:
template: sensor
icon: 'mdi:weather-rainy'
state:
- color: 'rgb(255,0,0)'
operator: '>'
value: 50
- color: 'rgb(255,100,0)'
operator: '>'
value: 40
- color: 'rgb(255,200,0)'
operator: '>'
value: 35
- color: 'rgb(0,255,80)'
operator: '>'
value: 30
- color: 'rgb(0,255,255)'
operator: '>'
value: 25
- color: 'rgb(0,0,255)'
operator: <
value: 25
Hmm, I believe all you have to do is size the small card inside a horizontal stack
type: horizontal-stack
cards:
- type: button-card
...etc.. (Do not style the card size).
- type: button-card
style:
card:
width: 50px
first card should be auto sized, second card will be 50px.
sensor needs to be in the button_card_templates section at the top of the yaml file.
The card itself using the template will be somewhere else in your configuration.
Sorry I’m not sure how that cut out, this is directly from my button_card_templates section. Then I was trying to use it in the card like this. All of the styling works but nothing else does, such as icon, tap action, state etc.
- entity: sensor.humiditysensor
template: sensor_humidity
type: 'custom:button-card'Ah okay, sorry. I follow you now. Not sure, i’d have to try the configuration myself.
Does anyone knows how to fix the gap generated when this card is used with the conditional card? Already tried with the vertical-stack-in-card but the result is worst.
Can you share yours? I like your setup.
So I think your problem is how you have it set up. You have conditional cards on every card, each conditional card has a padding that is added which will get you that huge gap. I have mine setup like this:
type: vertical-stack
cards:
# ALL CONTROLS VISIBLE FOR ROKU
- type: condition
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
- type: custom:button-card
- type: custom:button-card
- type: horizontal-stack
cards:
- type: custom:button-card
- type: custom:button-card
- type: custom:button-card
- type: horizontal-stack
cards:
- type: custom:button-card
- type: custom:button-card
- type: custom:button-card
# ALL CONTROLS VISIBLE FOR XBOX
- type: condition
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
- type: custom:button-card
- type: custom:button-card
- type: horizontal-stack
cards:
- type: custom:button-card
- type: custom:button-card
- type: custom:button-card
- type: horizontal-stack
cards:
- type: custom:button-card
- type: custom:button-card
- type: custom:button-card
# ALL CONTROLS VISIBLE FOR PLAYSTATION
- type: condition
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
- type: custom:button-card
- type: custom:button-card
- type: horizontal-stack
cards:
- type: custom:button-card
- type: custom:button-card
- type: custom:button-card
- type: horizontal-stack
cards:
- type: custom:button-card
- type: custom:button-card
- type: custom:button-card
In the end, I have 5 or so total conditional cards.
I’ll be sharing my setup within the next week. I’m in the process of reworking it and it’s in shambles.
3 Likes
OK let me know if you get it working, or if you duplicate my same issue. It would be nice to not repeat so much code if this works out!
Hi all, I’m working on creating a new dashboard for my lights around the house and I have a question: Is it possible to create 1 button that switches 1 light, but has 3 states? What I try to achieve is to create a button that switches between off > dim > full and shows this as such. The dim setting can be a fixed setting. Currently the button switches between off and on, but uses the last known brightness.
Are you using Compact Custom Header by chance? There was a bug similar to this in CCH that may already have a fix.
Ends up looking odd, messing with the height as well:
Otherwise it would be exactly what I was looking for…
Oh, just add a height to it and it should fix that thickness of the second button. To clarify, add a height to both cards.