Hi there.
Im looking for some assistance into giving these icons some color.
What i would like is green when ok and red when not. I already know what icons i would like to use i just need a pointer in setting up the states if possible??
Thanks.
Can you show your card_generic template?
Please don’t post a picture of text. Paste the text and format it correctly.
This is the code i have in so far
cards:
- type: grid
columns: 2
square: false
cards:
- type: "custom:button-card"
template: card_generic
entity: binary_sensor.unvr_disk_0_health
- type: "custom:button-card"
template: card_generic
entity: binary_sensor.unvr_disk_1_health
- type: "custom:button-card"
template: card_generic
entity: binary_sensor.unvr_disk_2_health
- type: "custom:button-card"
template: card_generic
entity: binary_sensor.unvr_disk_3_health
Good job on the formatting, but what I asked for was the template this is pointing to:
its just a generic binary sensor card i pulled from the ui minimalist card templates
https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_binary_sensor/
it probably isnt the right card but i did a quick google and it didnt appear anyone else had asked the question
Without the template you are using I can’t help you other than to say you need to add this to the template:
button_card_templates:
card_generic:
state:
- value: 'off'
styles:
icon:
- color: green
- value: 'on'
styles:
icon:
- color: red
You could add this to every button in the card but it would be a lot less efficient. e.g.
cards:
- type: grid
columns: 2
square: false
cards:
- type: "custom:button-card"
template: card_generic
state:
- value: 'off'
styles:
icon:
- color: green
- value: 'on'
styles:
icon:
- color: red
entity: binary_sensor.unvr_disk_0_health
- type: "custom:button-card"
template: card_generic
state:
- value: 'off'
styles:
icon:
- color: green
- value: 'on'
styles:
icon:
- color: red
entity: binary_sensor.unvr_disk_1_health
- type: "custom:button-card"
template: card_generic
state:
- value: 'off'
styles:
icon:
- color: green
- value: 'on'
styles:
icon:
- color: red
entity: binary_sensor.unvr_disk_2_health
- type: "custom:button-card"
template: card_generic
state:
- value: 'off'
styles:
icon:
- color: green
- value: 'on'
styles:
icon:
- color: red
entity: binary_sensor.unvr_disk_3_health
where do i find the template?
### Card Generic ###
card_generic:
template:
- "icon_more_info_new"
- "ulm_actions_card"
- "ulm_translation_engine"
variables:
ulm_card_generic_icon: "[[[ return entity.attributes.icon ]]]"
ulm_card_generic_name: "[[[ return entity.attributes.friendly_name ]]]"
custom_fields:
item1:
card:
type: "custom:button-card"
template:
- "icon_more_info"
custom_fields:
item1:
card:
type: "custom:button-card"
entity: "[[[ return entity.entity_id ]]]"
variables:
ulm_input_select_option: "[[[ return variables.ulm_input_select_option; ]]]"
ulm_input_select: "[[[ return variables.ulm_input_select; ]]]"
icon: "[[[ return variables.ulm_card_generic_icon; ]]]"
styles:
icon:
- color: "rgba(var(--color-theme),0.9)"
item2:
card:
type: "custom:button-card"
entity: "[[[ return entity.entity_id ]]]"
variables:
ulm_input_select_option: "[[[ return variables.ulm_input_select_option; ]]]"
ulm_input_select: "[[[ return variables.ulm_input_select; ]]]"
name: "[[[ return variables.ulm_translation_state_unit ]]]"
label: "[[[ return variables.ulm_card_generic_name ]]]"
Usually at the top of the raw config, but I’m not familiar with the UI-Lovelace-Minimalist theme, it looks like it uses include files for this.
I’d just add it to the buttons you want to be red/green in the card or you will stuff up the whole look of the theme.
Or duplicate and rename the template.
i attempted the changes you suggested above, it made no obvious signs of change in the state display
- type: grid
columns: 1
square: false
cards:
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: card_generic
entity: sensor.unvr_storage_utilization
- type: "custom:gap-card"
height: 1px
- type: grid
columns: 2
square: false
cards:
- type: "custom:button-card"
template: card_generic
entity: binary_sensor.unvr_disk_0_health
state:
- value: "off"
style:
icon:
- color: green
- value: "on"
style:
icon:
- color: red
- type: "custom:button-card"
template: card_generic
entity: binary_sensor.unvr_disk_1_health
- type: "custom:button-card"
template: card_generic
entity: binary_sensor.unvr_disk_2_health
- type: "custom:button-card"
template: card_generic
entity: binary_sensor.unvr_disk_3_health
Yeah, I can confirm that this does not work, even when correcting style: to styles:.
I thought that options supplied in the card overrode those in the template. Looks like this is not the case.
So you would have to edit the template.
EDIT: there may actually be an issue. I could not get either of these override options to work:
But using the red / green style in one template did work. So it’s not an issue with the config we are attempting to use (after correcting the use of “style”).
EDIT2: yeah it’s new behaviour. You have to merge by using id:
when you say ID?? is that the entity id??
No, not the entity id, this id that you must supply if you want to merge or overwrite options:
So again you would have to edit the original button card template to add this.
