Multiple custom button cards, one common style?

Can one style be applied to multiple entities?
I have a dashboard consisting of multiple custom button cards showig f.ex doors/windows.
Currently I’m setting the styles for the states ‘on’/‘off’ separately for each button card.
Would be great to be able to set this for all/multiple at once.

Yes, that’s possible by using templates, see here: https://github.com/custom-cards/button-card#configuration-templates

1 Like

Oh damn, right in front of me in the readme :slight_smile:

All good, it’s a long readme :slightly_smiling_face:

Hmm, I cant seem to get the “state” templating to work :frowning:
This is from the raw config, I put it on top of the config, above “views”.

I can see that the template works, if I remove the “state” parts it does apply the template.

If you change the box-shadow property to


            - box-shadow: inset -2px 2px 5px, inset 2px -2px 5px

you’ll get:

(off)

(on)

What do you want to achieve?

Thanks! Works perfectly with that change.
I simply wanted to apply a different style based on the state, and have that defined in the template

Ok, cool, nice work!

Sooo…I’m struggling to get some more functionality working in the custom:button card.
I have some “occupancy” entities in my system, these are template binary sensors. Each of these represent a room in my house and they have attributes to them:

  • motion (true/false)
  • temperature
  • illuminated (true/false)
  • lightlevel

Can I implement the use of a template for these sensors to display the relevant attributes in the cards?
It would be great if I could have a template created for a “button” showing the room name (name) the occupancy state (icon) temperature (attribute) and motion (attribute)
However I’m not sure how to get this working as a template without having to specify the individual sensors/attributes in each card…

Oh…got it, will have to play around a bit to get it right, but found out how :slight_smile:
"

styles:
  custom_fields:
    temp:
      - align-self: start
      - justify-self: end
custom_fields:
  temp: '[[[ return `${entity.attributes.temperature}` ]]]'

Yes, I like that, too:

Just to be complete, you can shorten the code:


  temp: '[[[ return entity.attributes.temperature ]]]'

1 Like

Do you use a template to count devices in the room based on the area assigned?

I use this template to count entities on/off/unavailable to do “system checks”, but I’m not sure if/how to do it by area.
{{ (states.light|rejectattr('attributes.is_deconz_group', 'eq', 'false')|selectattr('state', 'eq', 'on')|list|count) }}

1 Like

I’ve made template sensors for every room including lights and mediaplayers (Echos and TV):


#### ALLE GERÄTE WOHNZIMMER
  - sensor:
      - unique_id: eingeschaltete_geraete_wohnzimmer
        name: 'eingeschaltete Geräte Wohnzimmer'
        icon: mdi:lightbulb-on-outline
        state: |
          {{ expand('group.wohnzimmer')
           | rejectattr('state', 'equalto', 'off')
           | rejectattr('state', 'equalto', 'standby')
           | rejectattr('state', 'equalto', 'idle')
           | rejectattr('state', 'equalto', 'unavailable')
           | list
           | count
          }}
        attributes: 
          friendly_name: 'eingeschaltete Geräte Wohnzimmer'
        unit_of_measurement: 'Geräte'

Since 2021.8.? you can do some more stuff with areas, but I haven’t tried it yet.

Stuck again, trying to color the “motion” icon based on the attribute state
I’ve tried to follow the instructions in the readme, but I cant seem to reverse engineer it to use the attribute of the sensor. :sob:

      custom_fields:
        motion:        
          - color: >
              [[[
                if (states['entity.attributes.motion'] == 'on')
                  return "green";
                return "red";
              ]]]

What is the entity?

The entity is a template binary_sensor which has a attribute “motion”
I’m (still) trying to define this into a template for a custom button card.

Then you want to call the entity.state, no attribute needed.

Hmmm, really? The entity state is not what I want to use, I want to use the attribute to color this icon.

bilde bilde

Yes, but what is a motion sensor doing? Its state is on, if motion is detected, and off, if no motion is detected anymore.

If you want to call an attribute of the main entity, use

[[[ if (entity.attributes.motion == 'on') return 'red'; ]]]
1 Like

Well…the way I’ve done this is that the state (occupancy) has a delay off.
So even if there is no motion in the room, the occupancy will stay on for some minutes,
The “plan” for this was to have a card showing the room occupied/unoccupied as well as if there currently is motion in the room with an additional “motion” icon.
Naturally the layout of the button is not finished yet :slight_smile:

I had to change it slightly to get it working it seems:

    motion:
      - color: >
          [[[ 
            if (entity.attributes.motion == 'on') return 'red';
          ]]]