Merge styles/state in custom:button-card

[poat]

Hoping someone can help me w/ merging templates in button-card. I made an issue here describing my problem: Merge styles in templates · Issue #1453 · UI-Lovelace-Minimalist/UI · GitHub

Here is the info from that issue:

Most likely my setup is just wrong - I am having 2 templates and I want to have them both apply styles based on different things. However sometimes all the styles from one or the other or used, or I get different results based on template order, or if I use the id functionality to “merge” states. However I’m not sure how this applies to styles.

I have a card based on a light entity

type: "custom:button-card"
template:
  - card_room
  - yellow_device_on
  - red_climate_problem_on
name: Office
entity: light.office_light
icon: mdi:controller

one template applies styles to different places on the card:

---
yellow_device_on:
  state:
    - styles:
        icon:
          - color: "rgba(var(--color-yellow),1)"
        label:
          - color: "rgba(var(--color-yellow-text),1)"
        name:
          - color: "rgba(var(--color-yellow-text),1)"
        img_cell:
          - background-color: "rgba(var(--color-yellow), 0.2)"
        card:
          - background-color: "rgba(var(--color-background-yellow),var(--opacity-bg))"
      value: "on"
      id: "on"

another JUST modifies the label

---
red_climate_problem_on:
  label: '[[[ return states[variables.temperature_entity].state + "°F - " + states[variables.humidity_entity].state + "%"  ]]]'
  state:
    - styles:
        label:
          - color: "rgba(var(--color-red-text),1)"
      operator: template
      value: >
        [[[ return states[variables.temperature_entity].state > 80 ||  states[variables.humidity_entity].state > 80 ]]]
      #id: "on"
      id: "label"
  triggers_update:
    - "[[[ return variables.temperature_entity; ]]]"
    - "[[[ return variables.humidity_entity; ]]]"

I’d like the red label template to override just the template of the yellow one, however the yellow one takes precedence

Swapping order of the templates produces same result.

If i use same id on both, then:
if the order is

- red_climate_problem_on
- yellow_device_on

If i swap order, it even affects not related cards

I’d like it to look like this:

[boheme61]

@poat

Most likely my setup is just wrong

yes i think your “setup” is wrong

1. you apply everything under " State "
2. if you want the label to change color/ or text you should apply this under Styles
   i.e use an if clause

    label: testing
    show_label: true
    styles:
      card:
        - color: ivory
        - font-size: 12px
        - height: 140px
      label:
        - color: |
[[[
if (variables.temperature_entity].state >= 80 &&  states[variables.humidity_entity].state >= 80 ) 
return `red`;
if (variables.temperature_entity].state < 80 &&  states[variables.humidity_entity].state < 80) 
return 'yellow';
else return 'grey';
]]]

Maybe

hmm actually i just copied your entities, but forgot about the brackets you use

Here is my working script used in template , for the name: should work for label as well as any place

        - color: |
            [[[
              if (entity.attributes.forecast[0].wind_bearing > 278)
              return `green`;
              if (entity.attributes.forecast[0].wind_bearing >= 180 && entity.attributes.forecast[0].wind_bearing < 277) return 'orange';
              if (entity.attributes.forecast[0].wind_bearing >= 90 && entity.attributes.forecast[0].wind_bearing < 180) return 'blue';
              
              else return 'red';
            ]]]

[poat]

hmm, is your example using card_mod, or button-card templates? I’m using these state templates: GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant

I updated my climate template to not use state, instead use styles like you suggested:

---
red_climate_problem_on:
  label: '[[[ return states[variables.temperature_entity].state + "°F - " + states[variables.humidity_entity].state + "%"  ]]]'
  styles:
    label:
      - color: |
          [[[
            if (states[variables.temperature_entity].state >= 80 || states[variables.humidity_entity].state >= 80)
              return 'rgba(var(--color-red-text),1)';
            else if (states[variables.temperature_entity].state < 80 || states[variables.humidity_entity].state < 80)
              return 'rgba(var(--color-amber-text),1)';
            else
              return 'grey';
          ]]]
  triggers_update:
    - "[[[ return variables.temperature_entity; ]]]"
    - "[[[ return variables.humidity_entity; ]]]"

However the card using the yellow_on template is dominating, trying to figure out how to control which is used.

[boheme61]

Yes, Im using Button-card
As i understand the template-merge, it is read/applied in order, first one comes first, so if you apply yellow in first template, that’s what it’s gonna be, red in second template is ignored
that is if you merge both 1 and 2, in both buttons
The templates is loaded upon loading the view, so that what initially sets the i.e color ( first template with label color is applied , next color is ignored ( initially )

However, styles in the button overwrites templates, at any time( so after the view is loaded, then the button-card is loaded, if you have set another color in a card, you would be able to see the templated color, in a split second, before it’s overwritten by the color set in the button-card

So if you have only a(1) color-template, for the label( or for colors ), it should work same for all.
That is if you have the same credentials ( i.e if temp > 80 & if humid > 80 )

It’s hard to get a full picture, of your scenario, with the various pictures, and snippets of code
But it looks like you first apply label-color yellow ( to all cards which use this template )
How the id_ function in a template works, i don’t know ( seems like it don’t work )

i think it’s best with 1 template with default-colors, if > 80. return red, if > 30 & <=80, return yellow, if >0 & <=30 return green
else grey

use color-templates in your button-template for all the items you want to color depending upon other factors

now you first, if (yellow_device_on:) is first in the view, is loaded to all which use this template.
How the order you place the the reference to the templates, in the buttons, im not sure, and specially not when it’s referenced from a state: instead of within it’s own “styles” tag ( i think maybe as some other cards, if you have a tag “color”, it overwrites state-colors ( become static color )