Lovelace: Button card

This is the card, I would like the transparent upper part (text DOMANI RACCOLTA). I just want the text without the custom_fields box

Without full code I can only assume that a box-shadow is the reason. Add

- box-shadow: none

to your custom_fields styles.

Not working :frowning:

type: grid
cards:
  - type: custom:auto-entities
    show_empty: true
    card_param: cards
    card:
      type: grid
      square: true
      columns: 1
    sort:
      attribute: days
      method: attribute
      numeric: true
      count: 1
      first: 0
    style:
      transform: translate(0%, 0%)
      bottom: 0%
      left: 5%
    filter:
      exclude:
        - entity_id: group.garbage_collection
          attributes:
            entity_id: []
      include:
        - group: group.garbage_collection
          options:
            type: custom:button-card
            entity: this.entity_id
            triggers_update: all
            show_entity_picture: true
            show_icon: false
            show_label: false
            aspect_ratio: 1/1
            tap_action:
              action: more-info
            entity_picture: /local/hassiohelp/pkg_raccolta/bidone.png
            label: |-
              [[[
                  return entity.attributes.friendly_name;
              ]]]
            styles:
              card:
                - font-size: 100%
                - padding: 5%
              custom_fields:
                title:
                  - align-self: start
                  - background-color: transparent;
                  - box-shadow: none
                  - position: absolute
                  - filter: opacity(90%)
                  - left: 0%
                  - top: 0%
                  - height: 10%
                  - width: 100%
                  - line-height: 0px
                  - font-size: 80%
              name:
                - color: yellow
                - align-self: middle
                - font-weight: normal
              entity_picture:
                - max-width: 100%
                - filter: |
                    [[[
                      return 'var(--'+ entity.attributes.friendly_name.toLowerCase().replace(' ','_') +')';
                    ]]]
            custom_fields:
              title:
                card:
                  type: markdown
                  content: DOMANI RACCOLTA
                  styles:
                    - box-shadow: none
            extra_styles: |
              #img-cell #icon {
                /* 
                  SETTINGS - Change the variables name (i.e. --bianco) 
                  based on the friendly name of the bin
                  and the style (i.e. hue-rotate(00deg)) for the color of the bin
                */
                --plastica: hue-rotate(20deg) brightness(1.2);             /* yellow */
                --umido: hue-rotate(0deg) grayscale(50%) brightness(0.7);  /* brown */
                --carta: hue-rotate(160deg) brightness(0.7);               /* blue */
                --indif: hue-rotate(0deg) grayscale(100%) brightness(0.7); /* gray */
                --vetro: hue-rotate(100deg) brightness(0.7);               /* dark green */
                borde-radius: var(--ha-card-border-radius);
              }
columns: 2

Correct, because you used a markdown card as custom field. If you use card-mod, you can manipulate the background of the markdown card. For now, I replaced the markdown, have a look:


type: custom:button-card
entity: light.flur
triggers_update: all
show_entity_picture: true
show_icon: false
show_label: false
aspect_ratio: 1/1
tap_action:
  action: more-info
entity_picture: /local/hassiohelp/pkg_raccolta/bidone.png
label: |-
  [[[
      return entity.attributes.friendly_name;
  ]]]
styles:
  card:
    - font-size: 100%
    - padding: 5%
    - background: black
  custom_fields:
    title:
      - box-shadow: none
      - position: absolute
      - filter: opacity(90%)
      - left: 0%
      - top: 20%
      - width: 100%
      - font-size: 80%
      - color: yellow
  name:
    - color: yellow
    - align-self: middle
    - font-weight: normal
  entity_picture:
    - max-width: 100%
    - filter: |
        [[[
          return 'var(--'+ entity.attributes.friendly_name.toLowerCase().replace(' ','_') +')';
        ]]]
custom_fields:
  title: |
    [[[ return 'DOMANI RACCOLTA' ]]]
extra_styles: |
  #img-cell #icon {
    /* 
      SETTINGS - Change the variables name (i.e. --bianco) 
      based on the friendly name of the bin
      and the style (i.e. hue-rotate(00deg)) for the color of the bin
    */
    --plastica: hue-rotate(20deg) brightness(1.2);             /* yellow */
    --umido: hue-rotate(0deg) grayscale(50%) brightness(0.7);  /* brown */
    --carta: hue-rotate(160deg) brightness(0.7);               /* blue */
    --indif: hue-rotate(0deg) grayscale(100%) brightness(0.7); /* gray */
    --vetro: hue-rotate(100deg) brightness(0.7);               /* dark green */
    border-radius: var(--ha-card-border-radius);
  }

1 Like

thanks now it works great!

what you’re asking for is hours of work and I don’t have that kind of time. Sorry. Here’s the closest config for it. Be warned, this is extremely advanced and newbies should take it slow.

It took me a while to figure out how to get a card that way I wanted but I just finished making some custom:button cards for a wall mounted FireHD. In case anyone wants to know how to get the buttons to show label, icon, state without the icon being too big I am sharing what I did.

type: custom:button-card
entity: sensor.inovelli_unknown_type_000d_id_0001_temperature
name: ' '
label: Inovelli Temp
show_state: true
show_label: true
show_icon: true
show_name: false
size: 20%
styles:
  grid:
    - grid-template-areas: '"l" "i" "s"'
    - grid-template-rows: min-content 1fr min-content
    - grid-template-columns: 1fr
  state:
    - justify-self: center
    - font-size: 25px
  card:
    - font-size: 18px
    - height: 150px

Hi All,

Still loving this card and wanted to make a mobile friendly button with easy access to more settings. There is only one thing that i don’t understand. Someone knows why i need to use the padding (in red) to keep the second button centered? If i remove the paddings the second button is “lost” outside the card.

Cheers Niels

type: custom:button-card
entity: light.office_rack_1
name: Office Rack 1
color: auto
color_type: card
show_state: true
size: 50%
styles:
  grid:
    - grid-template-areas: '"i n info" "i s info"'
    - grid-template-columns: 80px auto 80px
    - grid-template-rows: 1fr 1fr
  name:
    - align-self: end
    - justify-self: start
    - font-weight: 550
  state:
    - align-self: start
    - justify-self: start
    - font-weight: 350
  custom_fields:
    info:
      - align-self: center
      - justify-self: center
      - padding-bottom: 55px
      - padding-right: 55px
custom_fields:
  info:
    card:
      aspect_ratio: 1/1
      color: auto
      color_type: card
      entity: |
        [[[ return entity.entity_id; ]]]
      icon: mdi:tune-variant
      show_name: false
      size: 50%
      styles:
        card:
          - background: none
          - border-radius: 50%
          - box-shadow: none
          - height: 50px
          - width: 50px
      tap_action:
        action: more-info
      type: custom:button-card

Did you try

background: none

Delete the line aspect_ratio: 1/1 in your „info“.

1 Like

Hi Pedolsky,

Yes, that did the trick. I didn’t realize that making the button square makes it bigger.

Anyway Thanks! :+1:

Thank you

made some progress in the mean while
 will share once presentable :slight_smile:

I have these input booleans for my room selection for robot vacuum.

I tried changing the text for the state with this line of code using state_display:


                    state:
                      - value: 'on'
                        entity_picture: \local\img\open_door.png
                        color: white
                        state_display: Cleaning
                      - value: 'off'
                        entity_picture: \local\img\dor.png
                        color: rgba(65,65,63,0.2)
                        styles:
                          card:
                            - filter: opacity(50%)
                          icon:
                            - filter: grayscale(100%)

That doesn’t work. Is there a way to make this happen? Change the state from «on» to «cleaning»

1 Like

Use it this way:


type: custom:button-card
entity: your_vacuum
show_state: true
state:
  - value: 'on'
    entity_picture: \local\img\open_door.png
    color: white
  - value: 'off'
    entity_picture: \local\img\dor.png
    color: rgba(65,65,63,0.2)
    styles:
      card:
        - filter: opacity(50%)
      icon:
        - filter: grayscale(100%)
state_display: |
  [[[ return entity.state == 'on' ? 'Cleaning' : 'zzz
' ]]]

Cheers!
That did the trick :slight_smile:

Hello,
In my button card, I would like to color the WAN Status

Capture

Like this:
Capture1

I’m sure that the solution is pretty here:
Capture2

The code if someone could help me:

entity: binary_sensor.wan_status
show_icon: false
aspect_ratio: 1/1
name: Livebox
styles:
  card:
    - border-radius: 15%
    - padding: 8%
    - font-size: 100%
  grid:
    - grid-template-areas: '"i WAN" "n n" "Down Down" "Upl Upl" "HPB HPB" "HPC HPC"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr min-content min-content min-content min-content
  name:
    - font-weight: bold
    - font-size: 100%
    - align-self: middle
    - justify-self: start
    - padding-bottom: 9%
  img_cell:
    - justify-content: start
    - align-items: start
    - margin: none
  custom_fields:
    WAN:
      - align-self: start
      - justify-self: end
    Down:
      - padding-bottom: 5%
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.orange_livebox_download_speed"].state > 80)
          return "red"; ]]]
    Upl:
      - padding-bottom: 5%
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.orange_livebox_upload_speed"].state > 80)
          return "red"; ]]]
    HPB:
      - padding-bottom: 5%
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.hp_envy_5640_series_black_ink"].state < 30)
          return "red"; ]]]
    HPC:
      - padding-bottom: 5%
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.hp_envy_5640_series_tri_color_ink"].state < 30)
          return "red"; ]]]
custom_fields:
  WAN: |
    [[[
      return `<ha-icon
        icon="mdi:server-network"
        style="width: 20px; height: 20px; color: var(--primary-text-color) ">
        </ha-icon><span><span style="color: auto;"></span>`
    ]]]
  Down: |
    [[[
      return `<ha-icon
        icon="mdi:download"
        style="width: 12px; height: 12px; color: deepskyblue;">
        </ha-icon><span>Down: <span style="color: var(--text-color-sensor);">${states['sensor.orange_livebox_download_speed'].state}MBs</span></span>`
    ]]]
  Upl: |
    [[[
      return `<ha-icon
        icon="mdi:upload"
        style="width: 12px; height: 12px; color: deepskyblue;">
        </ha-icon><span>Up: <span style="color: var(--text-color-sensor);">${states['sensor.orange_livebox_upload_speed'].state}MBs</span></span>`
    ]]]
  HPB: |
    [[[
      return `<ha-icon
        icon="mdi:water"
        style="width: 12px; height: 12px; color: black;">
        </ha-icon><span>HP Black: <span style="color: var(--text-color-sensor);">${states['sensor.hp_envy_5640_series_black_ink'].state}%</span></span>`
    ]]] 
  HPC: |
    [[[
      return `<ha-icon
        icon="mdi:water"
        style="width: 12px; height: 12px; color: deepskyblue;">
        </ha-icon><span>HP Color: <span style="color: var(--text-color-sensor);">${states['sensor.hp_envy_5640_series_tri_color_ink'].state}%</span></span>`
    ]]]
type: custom:button-card

var(--paper-item-icon-color)

If it doesn’t change color after that, you need to use an if statement based on the state because ‘state_color’ is not an option in templates. At that point, you’d use 'var(--paper-item-icon-active-color)' for on and 'var(--paper-item-icon-color)' for off.

It changes the icon color but only with color icon off statement

How could I do it with the If condition for On : var(–paper-item-icon-active-color) and Off : var(–paper-item-icon-color) ?

Capture

This post has some if statement examples

I don’t find the solution for the icon color :wink:

Only with the state:

Capture

WAN: |
    [[[
      return `<ha-icon
        icon="mdi:server-network"
        style="width: 20px; height: 20px; color: var(--icon-color);">
        </ha-icon>${states['binary_sensor.wan_status'].state}`
    ]]]