Fun with custom:button-card

Is it Possible to change the size of the entity picture?

    name: Network
    entity_picture: /local/PNGS/net.png
    show_name: true
    show_entity_picture: true
    styles:
      card:
        - padding: 5px
        - border: 0px
      grid:
        - grid-template-areas: '"n i"'
        - grid-template-columns: 3fr 1fr
      name:
        - justify-self: start
        - padding-left: 20px
        - font-size: 30px
        - font-weight: 300

Yes just add width and height to entity _picture under styles

styles:
  card:
        - padding: 5px
        - border: 0px
  grid:
        - grid-template-areas: '"n i"'
        - grid-template-columns: 3fr 1fr
  entity_picture:
        - height: 10px
        - width: 20px

image

1 Like

Thank you!!!

Happy to assist!

Here is an odd one. I have a button I want to use to select a preset of some lights in my house. So basically I need to use call service to set multiple select with a bunch of options… but if that preset is enabled when the button is pressed I actually want it to call light.turn_off on the main light…


                  - type: custom:button-card
                    entity: select.parker_wled_preset
                    name: Reading
                    icon: mdi:book-open-page-variant
                    tap_action:
                      action: call-service
                      service:  |
                        [[[ 
                          if (entity.state == "Reading") return 'light.turn_off'; 
                          return 'select.select_option'; 
                        ]]]
                      target:
                        entity_id:  |
                          [[[ 
                            if (entity.state == "Reading") return 'light.parker_wled_master; 
                            return 'select.parker_wled_preset'; 
                          ]]]
                      data: 
                        option: "Reading"

Something like this. But it is complaining that option is present for light.turn_off. So basically I need no data in one case and some data in the other. That’s what I’m struggling with. Any help appreciated.

Having some trouble with this. Is it possible to change the opacity of just the background image from " - background: url(‘/local/background/MasterBW.JPG’)"

Using “- opacity: 0.7” changes the opacity for the entire card and all the icons/text/entities I have layered over the top.

I seem to be able to adjust the opacity if I use an RGBA value for background. Can something be used here for an image?

cards:
  - type: custom:button-card
    name: Master
    icon: mdi:bed-king-outline
    entity: none
    styles:
      card:
        - padding: 10px 10px 10px 10px
        - height: 132px
        - background: url('/local/background/MasterBW.JPG') #change this?
        - background-size: cover
	    - opacity: 0.7 #rather than this?

I’m using the code below to display a timer label in a button card (taken from this post).

The “standard” template used is the one Keith shared at the start of this post.

Everything works well, but I can’t seem to control the size of the timer label - I would like to make it smaller.

Any ideas how to achieve this?

            - entity: light.wiz_dimmable_white_b0f95a
              name: Loo
              icon: mdi:dome-light
              template: standard
              type: custom:button-card
              custom_fields:
                timer:
                  card:
                    type: custom:button-card
                    entity: timer.bathroom_lutz_light_timer
                    tap_action: none
                    show_state: true
                    show_name: false
                    show_icon: false
                    style: |
                      ha-card.button-card-main {
                        font-size: 9px !important;
                      }
              styles:
                grid:
                  - position: relative
                custom_fields:
                  timer:
                    - filter: |
                        [[[
                          if (states['timer.bathroom_lutz_light_timer'].state == 'active')
                            return "opacity(70%)";
                          return "opacity(0%)";
                        ]]]
                    - border-radius: 0%
                    - position: absolute
                    - left: 12%
                    - top: 65%
                    - height: 10px
                    - width: 60px

You need another set of card settings on the timer card. This should help you understand how to adjust your card

entity: light.wiz_dimmable_white_b0f95a
icon: mdi:wall-sconce-flat
name: Loo
type: custom:button-card
custom_fields:
  timer:
    card:
      type: custom:button-card
      entity: timer.bathroom_lutz_light_timer
      tap_action: none
      show_state: true
      show_name: false
      show_icon: false
      styles:
        card:            
          - color: red
          - font-size: 20px
          - right: 220px 
          - top: 0px
show_state: false
show_name: false
show_icon: true

image

Thanks a lot Jay! That works fine, but has one side effect which I would like to avoid - the timer card reduces the space available for the icon (see “LED Strip” button in screenshot). Is there any way to have the timer card as “overlay” on top of the button with the light entity?

Can you post the entire card so I can get the spacing correct and code indentions correct?

We can place them anywhere in the card. The overlay won’t be an issue.

Thanks Jay!

Templates used for buttons (standard and container):

button_card_templates:
  standard:
    color_type: icon
    color: orange
    state:
      - value: 'off'
        color: black
      - value: 'on'
        color: orange
    size: 50%
    hold_action:
      action: more-info
    styles:
      grid:
        - position: relative
      card:
        - padding: 0.2em
        - '--mdc-ripple-color': orange
        - '--mdc-ripple-press-opacity': 0.3
        - background-color: rgb(245, 245, 245)
      icon:
        - opacity: 1
      name:
        - font-size: 0.65em
        - white-space: normal
      state:
        - font-size: 0.65em
        - white-space: normal
      label:
        - font-size: 0.4em
        - white-space: normal
  container:
    color_type: label-card
    color: rgb(13, 172, 244)
    styles:
      card:
        - padding: 0
      name:
        - border-radius: 0.4em 0.4em 0 0
        - padding: 0.1em
        - width: 100%
        - font-weight: bold
        - font-size: 0.8em
      grid:
        - grid-template-areas: '"i" "n" "buttons"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      custom_fields:
        buttons:
          - background-color: rgb(255,255,255)
          - margin: 0
          - padding: 0.3em

Entire card:

type: vertical-stack
cards:
  - type: custom:button-card
    template: container
    name: Outside
    custom_fields:
      buttons:
        card:
          type: horizontal-stack
          cards:
            - entity: switch.entrance_light_switch
              name: Entrance
              variables:
                timer_var: timer.outside_light_timer
              template:
                - standard
              icon: mdi:light-flood-down
              type: custom:button-card
            - entity: switch.shed_light_1_switch
              name: Shed 1
              variables:
                timer_var: timer.shed_lights_timer
              template:
                - standard
              icon: mdi:lightbulb-fluorescent-tube
              type: custom:button-card
            - entity: switch.shed_light_2_switch
              name: Shed 2
              variables:
                timer_var: timer.shed_lights_timer
              template:
                - standard
              icon: mdi:lightbulb-fluorescent-tube
              type: custom:button-card
            - entity: switch.bbq_light_switch
              name: BBQ
              template: standard
              icon: mdi:light-flood-down
              type: custom:button-card
            - entity: switch.deck_lights_switch
              name: Deck
              template: standard
              icon: mdi:wall-sconce-round
              type: custom:button-card
  - type: custom:button-card
    template: container
    name: Kitchen
    custom_fields:
      buttons:
        card:
          type: horizontal-stack
          cards:
            - entity: light.kitchen_vidjay
              name: Vidjay
              template: standard
              icon: mdi:table-column
              type: custom:button-card
            - entity: switch.kitchen_dining_lights_switch
              name: Globes
              template: standard
              icon: mdi:globe-light
              type: custom:button-card
            - entity: switch.kitchen_cupboard_light_switch
              name: Cupboard
              template: standard
              icon: mdi:lightbulb-fluorescent-tube
              type: custom:button-card
            - entity: switch.kitchen_ceiling_light_switch
              template: standard
              name: Ceiling
              icon: mdi:led-strip
              type: custom:button-card
            - entity: light.tradfri_bulb_e27_white_14
              template: standard
              name: Hallway
              icon: mdi:ceiling-light
              type: custom:button-card
  - type: custom:button-card
    template: container
    name: Lounge
    custom_fields:
      buttons:
        card:
          type: horizontal-stack
          cards:
            - entity: light.loung_fireplace_light_switch
              name: Fireplace
              template: standard
              icon: mdi:wall-sconce-round
              type: custom:button-card
            - entity: switch.lounge_led_downlights_switch
              name: Spotlights
              template: standard
              icon: mdi:spotlight-beam
              type: custom:button-card
            - entity: switch.lounge_fan_switch
              name: Fan Light
              template: standard
              icon: mdi:ceiling-fan-light
              type: custom:button-card
            - entity: switch.lounge_ceiling_light_switch
              template: standard
              name: Ceiling
              icon: mdi:vanity-light
              type: custom:button-card
            - type: custom:button-card
              color_type: blank-card
  - type: custom:button-card
    template: container
    name: Bedroom
    custom_fields:
      buttons:
        card:
          type: horizontal-stack
          cards:
            - entity: light.tradfri_bulb_e27_white_01
              name: Nightlight
              template: standard
              icon: mdi:desk-lamp
              type: custom:button-card
            - entity: light.bedroom_fan_light
              name: Fan
              icon: mdi:ceiling-fan-light
              template: standard
              type: custom:button-card
            - entity: light.lenovo_led_strip_01
              name: Bed
              template: standard
              icon: mdi:bed
              type: custom:button-card
            - type: custom:button-card
              color_type: blank-card
            - type: custom:button-card
              color_type: blank-card
  - type: custom:button-card
    template: container
    name: Study Lutz
    custom_fields:
      buttons:
        card:
          type: horizontal-stack
          cards:
            - entity: light.tp_link_power_strip_71cf_plug_1
              name: Vidjay
              template: standard
              icon: mdi:table-column
              type: custom:button-card
            - entity: light.study_lutz_ikea_hektar_floodlight
              name: Hektar
              template: standard
              icon: mdi:floor-lamp-dual
              type: custom:button-card
            - entity: light.study_lutz_monitor_backlight
              name: Monitor
              template: standard
              icon: mdi:monitor
              type: custom:button-card
            - entity: light.tradfri_bulb_e27_white_13
              template: standard
              name: Desk
              icon: mdi:desk-lamp
              type: custom:button-card
            - entity: light.study_lutz_fan_light
              template: standard
              name: Ceiling
              icon: mdi:ceiling-fan-light
              type: custom:button-card
  - type: custom:button-card
    template: container
    name: Study & Ensuite Ulrike
    custom_fields:
      buttons:
        card:
          type: horizontal-stack
          cards:
            - entity: switch.study_ulrike_fan_switch
              template: standard
              name: Ceiling
              icon: mdi:ceiling-fan-light
              type: custom:button-card
            - type: custom:button-card
              color_type: blank-card
            - type: custom:button-card
              color_type: blank-card
            - entity: switch.bathroom_ulrike_light_switch
              name: Mirror
              template: standard
              icon: mdi:wall-sconce-flat
              type: custom:button-card
            - type: custom:button-card
              color_type: blank-card
  - type: custom:button-card
    template: container
    name: Bathroom Lutz / Hallway
    custom_fields:
      buttons:
        card:
          type: horizontal-stack
          cards:
            - entity: switch.bathroom_lutz_light_switch
              name: Mirror
              template:
                - standard
              icon: mdi:wall-sconce-flat
              type: custom:button-card
              custom_fields:
                timer:
                  card:
                    type: custom:button-card
                    entity: timer.bathroom_lutz_light_timer
                    tap_action: none
                    show_state: true
                    show_name: false
                    show_icon: false
                    style: |
                      ha-card.button-card-main {
                        font-size: 9px !important;
                      }
              styles:
                grid:
                  - position: relative
                custom_fields:
                  timer:
                    - filter: |
                        [[[
                          if (states['timer.bathroom_lutz_light_timer'].state == 'active')
                            return "opacity(70%)";
                          return "opacity(0%)";
                        ]]]
                    - border-radius: 0%
                    - position: absolute
                    - left: 12%
                    - top: 65%
                    - height: 10px
                    - width: 60px
                    - font-size: 10
            - entity: light.wiz_dimmable_white_b0f95a
              name: Loo
              icon: mdi:dome-light
              template: standard
              type: custom:button-card
              custom_fields:
                timer:
                  card:
                    type: custom:button-card
                    entity: timer.bathroom_lutz_light_timer
                    tap_action: none
                    show_state: true
                    show_name: false
                    show_icon: false
                    style: |
                      ha-card.button-card-main {
                        font-size: 9px !important;
                      }
              styles:
                grid:
                  - position: relative
                custom_fields:
                  timer:
                    - filter: |
                        [[[
                          if (states['timer.bathroom_lutz_light_timer'].state == 'active')
                            return "opacity(70%)";
                          return "opacity(0%)";
                        ]]]
                    - border-radius: 0%
                    - position: absolute
                    - left: 12%
                    - top: 65%
                    - height: 10px
                    - width: 60px
            - entity: switch.hallway_2_light_switch
              name: Ceiling
              template: standard
              icon: mdi:dome-light
              type: custom:button-card
            - entity: light.wiz_rgbww_tunable_a60cbb
              name: LED Strip
              icon: mdi:led-strip
              template: standard
              type: custom:button-card
              custom_fields:
                timer:
                  card:
                    type: custom:button-card
                    entity: timer.bathroom_lutz_light_timer
                    tap_action: none
                    show_state: true
                    show_name: false
                    show_icon: false
                    styles:
                      card:
                        - color: red
                        - font-size: 10px
                        - right: 0px
                        - top: 00px
            - type: custom:button-card
              color_type: blank-card

You can use the z-index setting on button cards so that will allow the overlay you asked about.

Thanks for pointing in that direction but this seems to be above my (current) CSS skills - I have no idea where to place the the z-index values to display the timer button card on top of the entity button card.

I can work on the card and explain what I changed. Just need a day

1 Like

That would be awesome, thanks Jay!

I used custom-stack in card to clean it up.

image

type: custom:stack-in-card
cards:
  - type: custom:button-card
    name: Bathroom Lutz / Hallway
    card_mod:
      style: |
        ha-card{
        border: none;
        
  - type: horizontal-stack
    cards:
      - entity: switch.bathroom_lutz_light_switch
        name: Mirror
        icon: mdi:wall-sconce-flat-outline
        type: custom:button-card
        size: 3.3em
        show_name: false
        custom_fields:
          timer:
            card:
              type: custom:button-card
              entity: timer.test
              tap_action: none
              show_state: true
              show_name: false
              show_icon: false
              styles:
                card:
                  - color: black
                  - font-size: 12px
                  - right: '-10px'
                  - top: 4px
                  - border: none
                  - font-weight: bold
        styles:
          grid:
            - position: relative
          card:
            - height: 100%
            
          icon:
            - top: '-10px'
          custom_fields:
            timer:
              - filter: |
                  [[[
                    if (states['timer.test'].state == 'active')
                      return "opacity(70%)";
                    return "opacity(0%)";
                  ]]]
              - border-radius: 0%
              - position: absolute
              - left: 12%
              - top: 65%
              - height: 10px
              - width: 60px
              - font-size: 10
      - entity: light.wiz_dimmable_white_b0f95a
        name: Loo
        icon: mdi:dome-light
        type: custom:button-card
        custom_fields:
          timer:
            card:
              type: custom:button-card
              entity: timer.bathroom_lutz_light_timer
              tap_action: none
              show_state: true
              show_name: false
              show_icon: false
              style: |
                ha-card.button-card-main {
                  font-size: 9px !important;
                }
        styles:
          grid:
            - position: relative
          custom_fields:
            timer:
              - filter: |
                  [[[
                    if (states['timer.test'].state == 'active')
                      return "opacity(70%)";
                    return "opacity(0%)";
                  ]]]
              - border-radius: 0%
              - position: absolute
              - left: 12%
              - top: 65%
              - height: 10px
              - width: 60px
      - entity: switch.hallway_2_light_switch
        name: Ceiling
        icon: mdi:dome-light
        type: custom:button-card
      - entity: light.wiz_rgbww_tunable_a60cbb
        name: LED Strip
        icon: mdi:led-strip
        type: custom:button-card
card_mod:
      style: |
        ha-card{
        padding: 5px;

@amplitur You’ll have to swap out my entities for yours and we can adjust styling from the code I just posted. Let me know…

@LiQuid_cOOled , perfect! That’s exactly how I wanted to place the timer.

When I find sufficient spare time I may be able to figure out why and how this works, until then I am very happy that it does :slight_smile:

1 Like

Do you need assistance with the Dome Light too?

1 Like

No, I will be able to follow the example of the Mirror light. Thanks again!