Fun with custom:button-card

[fajrstartr]

Hi.

This is my code for switch, but i’m not happy with it.
I would just like to read state “on/off” of the switch instead of power of the sensor. Can someone help me?

    type: custom:button-card
    entity: sensor.shellyplug_s_power
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.shellyplug_s
    extra_styles: |
      @keyframes ball-scale {
        from {
          transform: scale(1);
          box-shadow: 0 8px 6px -6px #6C7A89;
        }
        to {
          transform: scale(1.10);
          box-shadow: 0 10px 6px -6px #6C7A89;
        }
      }
    show_name: false
    show_state: true
    state:
      - value: 2w
        operator: <
        icon: mdi:television-ambient-light
        styles:
          card:
            - background-color: transparent
            - filter: opacity(100%)
            - animation: null
          icon:
            - color: lightyellow
            - width: 80px
            - height: 80px
          state:
            - color: white
      - value: 2w
        operator: '>'
        icon: mdi:television-ambient-light
        styles:
          card:
            - background-color: lightyellow
            - filter: opacity(100%)
            - animation: ball-scale 1s ease-in-out infinite
          icon:
            - color: black
            - width: 80px
            - height: 80px
          state:
            - color: black

[Robert_Shed]

I created a music dashboard for my echo show and it looks awesome. The problem I’m having is when I press one of my buttons it does not highlight the choice I made, so I know what music I picked. I fixed that by adding a border to it. The new problem I’m having is I can’t get the size quite right to fit my dashboard. I have to do a whole new dashboard due to at first using the picture card, and it does not support custom button card. I want to recreate what I have already, but with a border for selection and the size I have now? Any help will be greatly appreciated. Echo Dash Picture Glance card:

Custom Button Card:

[thermseekr (Tales Maschio)]

Hello guys,

Here’s what I built a few years ago with custom:button-card. It takes a toll on hardware to the point I can’t use them with old devices but it works very well when fed with sufficient processing power

Along the years I tried other dashboard solutions like the new UI versions from HA, also tried Mushroom, Minimalist, etc, but I always ended coming back to this.

I’ll be happy to share the yamls if someone wants them.

[dos1973]

Hi,
i need some help with an backgroundimage

type: custom:button-card
aspect_ratio: 1/1
color_type: icon
color: red
show_icon: false
name: none
show_name: false
style: |
  ha-card {
    background-image: url("{{ state_attr('media_player.sky_q', 'entity_picture') }}");
    background-size: cover;
  }

i want the moviecover out of my mediaplayer as background.
There is definiv a url behind

[https://de.imageservice.sky.com/pd-image/af39e0a2-be15-4cc9-8559-3f6fbb92127f/16-9/1024?territory=DE&provider=SKY&proposition=SKYQ

chat gpt could not help me, thanks in andvance for yor support.

[poat]

Help with removing some white space
UPDATE - SOLVED
this was a problem w/ horizontal-stack, not button-card. this yaml fixed it

- type: custom:mod-card
        style:
          hui-horizontal-stack-card$: |
            #root { 
              justify-content: center;
              --stack-card-gap: 0;
            }
        card:
          type: horizontal-stack
          cards:

original issue
I have a card that hides itself when not needed, following yaml

state:
    - operator: "template"
      value: "[[[ return variables.optional && entity.state != variables.on_state && (isNaN(entity.state) || entity.state == 0); ]]]"
      styles:
        card:
          - display: none

This works - however there is a tiny space where the card was. All these spaces are a card that is hidden:

anyway to target the root hui-card instead and add the display there conditionally?

[Remcove (Remco)]

Hello all,

Currently im building my dashboard based on the ui minimalist template. I’m having trouble with the trash collection part. Can anyone help me out?

I use a template for button card called custom_card_trash.yaml with the following code. My dashboard doens’t give out an error but doens’t show anything either. Can anyone find the issue?

---
custom_card_trash:
  template:
    - "icon_more_info_new"
    - "ulm_translation_engine"
  variables:
    ulm_card_generic_swap_icon: "[[[ return entity.attributes.icon ]]]"
    ulm_card_generic_swap_name: "[[[ return entity.attributes.friendly_name ]]]"
    ulm_outlet_power_enable_popup: false
  custom_fields:
    item1:
      card:
        extra_styles: |
          @-webkit-keyframes pulsate-fwd {
            0% {
              -webkit-transform: scale(1);
                      transform: scale(1);
            }
            50% {
              -webkit-transform: scale(1.1);
                      transform: scale(1.1);
            }
            100% {
              -webkit-transform: scale(1);
                      transform: scale(1);
            }
          }
          @keyframes pulsate-fwd {
            0% {
              -webkit-transform: scale(1);
                      transform: scale(1);
            }
            50% {
              -webkit-transform: scale(1.1);
                      transform: scale(1.1);
            }
            100% {
              -webkit-transform: scale(1);
                      transform: scale(1);
            }
          }
        styles:
          card:
            - animation: >
                [[[
                  if (((states[entity.entity_id].attributes.message == 'groente-, fruit- en tuinafval') || (states[entity.entity_id].attributes.message == 'plastic, metaal en drankenkartons') || (states[entity.entity_id].attributes.message == 'oud papier & karton')) || (states[entity.entity_id].attributes.message == 'grof tuinafval')) || (states[entity.entity_id].attributes.message == 'restafval')) && ((states['sensor.trash_tomorrow'].state == 'tomorrow') || (states['sensor.trash_tomorrow'].state == 'today')))
                    return 'pulsate-fwd 1s ease-in-out infinite';
                  else
                    return '';
                ]]]
        type: "custom:button-card"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              state:
                - operator: "template"
                  value: |
                    [[[ return states[entity.entity_id].attributes.message == 'groente-, fruit- en tuinafval'; ]]]
                  icon: mdi:recycle
                  styles:
                    icon:
                      - color: "rgba(186, 146, 0, 1)"
                    img_cell:
                      - background-color: "rgba(186, 146, 0, 0.2)"
                    # card:
                    #   - animation: >
                    #       [[[
                    #         if (((states[entity.entity_id].attributes.message == 'groente-, fruit- en tuinafval') || (states[entity.entity_id].attributes.message == 'plastic, metaal en drankenkartons') || (states[entity.entity_id].attributes.message == 'oud papier & karton')) || (states[entity.entity_id].attributes.message == 'grof tuinafval')) || (states[entity.entity_id].attributes.message == 'restafval')) && ((states['states['sensor.trash_tomorrow'].state == 'tomorrow') || (states['states['sensor.trash_tomorrow'].state == 'today')))
                    #           return 'blink 3s ease infinite';
                    #         else
                    #           return '';
                    #       ]]]
                - operator: "template"
                  value: |
                    [[[ return states[entity.entity_id].attributes.message == 'plastic, metaal en drankenkartons'; ]]]
                  icon: mdi:delete
                  styles:
                    # card:
                    # - animation: >
                    #     [[[
                    #       if (((states[entity.entity_id].attributes.message == 'groente-, fruit- en tuinafval') || (states[entity.entity_id].attributes.message == 'plastic, metaal en drankenkartons') || (states[entity.entity_id].attributes.message == 'oud papier & karton')) || (states[entity.entity_id].attributes.message == 'grof tuinafval')) || (states[entity.entity_id].attributes.message == 'restafval')) && ((states['states['sensor.trash_tomorrow'].state == 'tomorrow') || (states['states['sensor.trash_tomorrow'].state == 'today')))
                    #         return 'blink 3s ease infinite';
                    #       else
                    #         return '';
                    #     ]]]
                    icon:
                      - color: "rgba(160, 160, 160, 1)"
                    img_cell:
                      - background-color: "rgba(160, 160, 160, 0.2)"
                - operator: "template"
                  value: |
                    [[[ return states[entity.entity_id].attributes.message == 'oud papier & karton'; ]]]
                  icon: mdi:paper-cut-vertical
                  styles:
                    icon:
                      - color: "rgba(0, 100, 200, 1)"
                    img_cell:
                      - background-color: "rgba(0, 100, 200, 0.2)"
                    # card:
                    #   - animation: >
                    #       [[[
                    #         if (((states[entity.entity_id].attributes.message == 'groente-, fruit- en tuinafval') || (states[entity.entity_id].attributes.message == 'plastic, metaal en drankenkartons') || (states[entity.entity_id].attributes.message == 'oud papier & karton')) || (states[entity.entity_id].attributes.message == 'grof tuinafval')) || (states[entity.entity_id].attributes.message == 'restafval')) && ((states['states['sensor.trash_tomorrow'].state == 'tomorrow') || (states['states['sensor.trash_tomorrow'].state == 'today')))
                    #           return 'blink 3s ease infinite';
                    #         else
                    #           return '';
                    #       ]]]
                - operator: "template"
                  value: |
                    [[[ return states[entity.entity_id].attributes.message == 'grof tuinafval'; ]]]
                  icon: mdi:paper-cut-vertical
                  styles:
                    icon:
                      - color: "rgba(0, 100, 200, 1)"
                    img_cell:
                      - background-color: "rgba(0, 100, 200, 0.2)"
                    # card:
                    #   - animation: >
                    #       [[[
                    #         if (((states[entity.entity_id].attributes.message == 'groente-, fruit- en tuinafval') || (states[entity.entity_id].attributes.message == 'plastic, metaal en drankenkartons') || (states[entity.entity_id].attributes.message == 'oud papier & karton')) || (states[entity.entity_id].attributes.message == 'grof tuinafval')) || (states[entity.entity_id].attributes.message == 'restafval')) && ((states['states['sensor.trash_tomorrow'].state == 'tomorrow') || (states['states['sensor.trash_tomorrow'].state == 'today')))
                    #           return 'blink 3s ease infinite';
                    #         else
                    #           return '';
                    #       ]]]
                - operator: "template"
                  value: |
                    [[[ return states[entity.entity_id].attributes.message == 'restafval'; ]]]
                  icon: mdi:paper-cut-vertical
                  styles:
                    icon:
                      - color: "rgba(0, 100, 200, 1)"
                    img_cell:
                      - background-color: "rgba(0, 100, 200, 0.2)"
                    # card:
                    #   - animation: >
                    #       [[[
                    #         if (((states[entity.entity_id].attributes.message == 'groente-, fruit- en tuinafval') || (states[entity.entity_id].attributes.message == 'plastic, metaal en drankenkartons') || (states[entity.entity_id].attributes.message == 'oud papier & karton')) || (states[entity.entity_id].attributes.message == 'grof tuinafval')) || (states[entity.entity_id].attributes.message == 'restafval')) && ((states['states['sensor.trash_tomorrow'].state == 'tomorrow') || (states['states['sensor.trash_tomorrow'].state == 'today')))
                    #           return 'blink 3s ease infinite';
                    #         else
                    #           return '';
                    #       ]]]        
              styles:
                icon:
                  - color: "rgba(var(--color-theme),0.3)"
          item2:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              styles:
                name:
                  - color: >
                      [[[
                        if (((states[entity.entity_id].attributes.message == 'groente-, fruit- en tuinafval') || (states[entity.entity_id].attributes.message == 'plastic, metaal en drankenkartons') || (states[entity.entity_id].attributes.message == 'oud papier & karton')) || (states[entity.entity_id].attributes.message == 'grof tuinafval')) || (states[entity.entity_id].attributes.message == 'restafval')) && ((states['sensor.trash_tomorrow'].state == 'tomorrow') || (states['sensor.trash_tomorrow'].state == 'today')))
                          return 'rgba(33, 33, 33, 1.0)';
                        else
                          return 'rgba(33, 33, 33, 0.4)';
                      ]]]
              label: >
                [[[ 
                  { return states['sensor.trash_tomorrow'].state; }
                ]]]
              name: >
                [[[
                  if (states[entity.entity_id].attributes.message === 'groente-, fruit- en tuinafval' )
                    return 'Groente-, fruit- en tuinafval';
                  if (states[entity.entity_id].attributes.message === 'plastic, metaal en drankenkartons')
                    return 'plastic, metaal en drankenkartons';
                  if (states[entity.entity_id].attributes.message === 'oud papier & karton')
                    return 'oud papier & karton';
                  if (states[entity.entity_id].attributes.message === 'grof tuinafval')
                    return 'grof tuinafval';
                  else
                    return 'restafval';
                ]]]
              state_display: >
                [[[ 
                  { return states['sensor.trash_tomorrow'].state; }
                ]]]

The code in the dashboard thats using the template is super simple and looks like this:

      - type: grid
        columns: 2
        square: false
        view_layout:
          grid-area: house
        cards:
          - type: 'custom:button-card'
            template: custom_card_trash
            entity: sensor.afvalwijzer_today

the two sensors that are used “sensor.trash_tomorrow” and “sensor.afvalwijzer_today” have the following state.

sensor.trash_tomorrow = tomorrow
sensor.afvalwijzer_today = groente-, fruit- en tuinafval

Does anyone have a suggestion on what I can do to test/debug or fix the code? I already tried multiple variations like this:

Change the code from:

(states[entity.entity_id].attributes.message == 'groente-, fruit- en tuinafval')

to:

(states[entity.entity_id].state == 'groente-, fruit- en tuinafval')

and also removing all different variables back to just the one above but still with no success.

I hope someone can help me out.

Kind regards,
Remco

[stoehr.jona (gubl)]

type: custom:button-card
entity: input_boolean.auto_klima_helfer
tap_action:
  action: call-service
  service: input_boolean.auto_klima_helfer
name: Corsa
icon: mdi:car
styles:
  card:
    - background: |
        [[[
          if (entity.state == "off") return "#252a38 url(/local/Icons/strasse.png)"
          if( entity.state == "on" && (states["sensor.psa_preconditioning_status"].state == 'Enabled' ))  return "#643843 url(/local/Icons/strasse.png)"  
         ]]]     
    - background-position: right center
    - background-size: 70%
    - background-repeat: no-repeat
    - border: 0px
    - height: 100%
  icon:
    - width: 32px
    - height: 32px
    - color: var(--primary-text-color)
    - padding: 14px
    - margin-left: 16px
  name:
    - font-size: 14px
    - padding-left: 4px
    - font-weight: bold
    - justify-self: start
  custom_fields:
    label_reichweite:
      - font-size: 14px
      - padding-left: 24px
      - font-weight: bold
      - justify-self: start
      - color: var(--secondary-text-color)
      - margin-top: 24px
    reichweite:
      - font-size: 36px
      - padding-left: 24px
      - font-weight: 300
      - justify-self: start
      - color: var(--primary-text-color)
    label_batterie:
      - font-size: 14px
      - padding-left: 24px
      - font-weight: bold
      - justify-self: start
      - color: var(--secondary-text-color)
      - margin-top: 24px
    batterie:
      - font-size: 46px
      - padding-left: 24px
      - font-weight: 300
      - justify-self: start
      - color: var(--primary-text-color)
    label_wasser:
      - font-size: 14px
      - padding-left: 24px
      - font-weight: bold
      - justify-self: start
      - color: var(--secondary-text-color)
      - margin-top: 24px
    wasser:
      - font-size: 20px
      - padding-left: 24px
      - font-weight: 300
      - justify-self: start
      - color: var(--primary-text-color)
      - margin-top: 4px
    next:
      - font-size: 20px
      - padding-left: 24px
      - font-weight: 300
      - justify-self: start
      - color: var(--primary-text-color)
      - margin-top: 24px
      
  grid:
    - grid-template-areas: >-
        "i n" "label_reichweite label_reichweite" "reichweite
        reichweite""label_batterie label_batterie""batterie
        batterie""label_wasser label_wasser""wasser wasser" "next next" 
    - grid-template-columns: 64px 1fr
    - grid-template-rows: 32px 1fr
custom_fields:
  label_reichweite: |
    [[[ return "Reichweite"]]]
  reichweite: |
    [[[
        return   + (states["sensor.psa_range"].state ) + " km"
    ]]]
  label_batterie: |
    [[[ return "Batterie "]]]
  batterie: |
    [[[  
        return  + (states["sensor.psa_battery_level"].state ) + " %"   
    ]]]
  label_wasser: |
    [[[ return "Klima " ]]]  
  wasser: |
    [[[
      if (entity.state == "off") return 'Aus'
      if ( entity.state == "on" && (states["sensor.psa_preconditioning_status"].state == 'Disabled' )) return 'Wartet'
      if ( entity.state == "on" && (states["sensor.psa_preconditioning_status"].state == 'Enabled' ))  return  states["sensor.dauer_klima"].state + ' Minuten';
        return "Aus"
     ]]]  
  next: |
    [[[
      return `<ha-icon
        icon="mdi:fan"
        style="width: 24px; height: 24px; color:var(--primary-text-color); background: rgba(189,189,189,0.2); padding: 4px 16px 8px; border-radius: 8px;">
        </ha-icon>`               
    ]]] 

Hey guys how can i animate the fan icon in a custom field
with this [[[ if (states["sensor.psa_preconditioning_status"].state == 'Enabled' ) return 'rotating 1s infinite linear' ]]]

[KameDomotics]

Hi, I have a problem with extra_styles:

If my entity gives me a name-name value, the style is applied. However, if the value is name+name, or name_name, the style is not applied.

This works:

extra_styles: |

    --Organico-Vetro: hue-rotate(100deg) brightness(0.7); /* dark green */

This doesn’t work:

extra_styles: |

    --Organico+Vetro: hue-rotate(100deg) brightness(0.7); /* dark green */

extra_styles: |

    --Organico_Vetro: hue-rotate(100deg) brightness(0.7); /* dark green */

The extra_styles only accepts the - symbol?
Thanks

[larryo108 (Larry Overn)]

I am struggling with some code for my dashboard. I am trying to create a template for an embedded card within a custom button card. I have a template mostly worked out and determined how to get the entity from a new variable.

timer:
  variables:
    timer_on: >
      [[[ return states[variables.timer_entity].state == 'active' ]]]
  styles:
    custom_fields:
      timer:
        - display: block
        - position: absolute
        - top: >
            [[[
              return window.matchMedia('(max-width: 1200px)').matches
                  ? '82%'
                  : '92%';
            ]]]
        - left: -13%
        - width: 125%
  custom_fields:
    timer:
      card:
        type: custom:timer-bar-card
        entity: '[[[ return variables.timer_entity; ]]]'
        layout: full_row
        text_width: 0px
        invert: true
        bar_foreground: >
          [[[
            return variables.timer_on
                ? '#3182b7'
                : 'none';
          ]]]
        bar_background: none
        modifications:
          - elapsed: 90%
            bar_foreground: 'rgb(255,0,0)'

As you can see I am also trying to create a variable that looks at the variable timer_entity and whether it is active to make changes to the car color. I can’t get it to work. If I change my timer_on variable to look at the state of a specific timer entity it works, but I am trying to minimize the amount of redundant code. Can anyone help me to figure out what I am doing wrong? Thanks in advance.

[Catalin84]

Hi guys,any ideea how to remove the space from this ?

tried different themes,custom theme but nothing. the normal thermostat is working but custom button is not.

[TheScubadiver (Ramon)]

Sensor card with Scrolling text in Home Assistant

This is the guys Gumroad page. Will cost you only 2 dollars to get the code. He’s got great content, so just pay up!

[Lode1 (Lode Bongaerts)]

This is so cool !!!
Thanks for sharing !!!