Fun with custom:button-card

jeells102 · January 9, 2024, 5:25pm

Hi All,

I’m having a positioning issue with my card. I have got an icon, my state value, and then a label to display when my refuse is due for collection, and I can’t seem to get it aligned in a nice 3 column format centralised. Below is my yaml code that I have so far.

type: custom:button-card
label: Black Bin <br> will be collected
entity: sensor.black_bin_days_to
show_name: false
show_icon: true
show_label: true
show_state: false
tap_action: none
styles:
  grid:
    - grid-template-areas: '"i item1 l"'
    - grid-template-columns: 20% 30% 50%'  # Adjusted column percentages
    - column-gap: 1%
    - row-gap: 8px
  card:
    - height: 100%
    - border-radius: var(--border-radius)
    - overflow: visible
    - box-shadow: 0px 0px 10px -9px black
    - border-radius: 25px
    - background-color: grey
    - justify-items: center
    - justify-content: center
  label:
    - text-align: left
    - font-size: 16px
    - font-family: Montserrat
    - font-weight: 600
    - color: var(--contrast-100)
  icon:
    - justify-self: start  # Adjusted horizontal positioning for the icon
custom_fields:
  item1:
    card:
      type: custom:button-card
      tap_action:
        action: none
      label: |
        [[[
          return states['sensor.black_bin_collection'].state
        ]]]
      show_label: true
      styles:
        grid:
          - grid-template-areas: '"state icon_cells"'
          - grid-template-columns: min-content
          - grid-template-rows: min-content
        label:
          - font-size: 20px
          - font-family: Montserrat
          - font-weight: 700
        card:
          - background-color: grey

And it is currently displaying like this.

If someone who is smarter than me, and ChatGPT can help me, I’d be very grateful and help educate me on how to fix stuff like this. I’m getting the hang of custom card but there are still some things I struggle with like this

EDIT: Just to say, what I’m hoping for is to have the state and label central and then the icon far left. Or if you wish to offer an alternative design, I’m happy to take feedback/suggestions.

Thanks all

fredrikpersson92 · January 10, 2024, 11:59pm

Hey, I have a problem. ${entity.state} is collecting the state from the parent card. I need it to use the entity in the custom_field. Any ideas what I should write instead?

      - type: "custom:button-card"
        entity: sensor.price_level
        custom_fields:
          ent1:
            card:
              type: "custom:button-card"
              entity: sensor.electricity_price
              name: >
                [[[
                  return `<span>Now: ${entity.state} öre/kWh</span>`;
                ]]]
```

fredrikpersson92 · January 11, 2024, 12:06am

hmm I’m not following what you are trying to do. Do you mean like this?
Your card seems overly complicated

VietNgoc · January 11, 2024, 1:25am

type: custom:button-card
entity: sensor.price_level
variables:
  ent1: sensor.electricity_price
custom_fields:
  ent1:
    card:
      type: "custom:button-card"
      name: >
        [[[
          return `<span>Now: ${states[variables.ent1].state} öre/kWh</span>`;
        ]]]

fredrikpersson92 · January 11, 2024, 9:40am

perfect! Thank you so much

Screenshot 2024-01-11 at 10.39.35

jeells102 · January 12, 2024, 9:19am

Hey @fredrikpersson92 - Basically yeah that’s what I wanna achieve I get that my way is very complicated and probably won’t look the best either so if you have any suggestions on making it better that would be great.

fredrikpersson92 · January 12, 2024, 4:14pm

You could have a look at my garbage card if you have not already, it looks very similar: GitHub - fredrikpersson92/minihass: MiniHass UI Dashboard for Home Assistant

Regarding you card, your grid should look like this more or less:

styles:
    grid:
      - grid-template-areas: '"i n" "i s"'
      - grid-template-rows: 1fr 1fr
      - grid-template-columns: 1fr 1fr

N0nick · January 14, 2024, 6:09pm

Hello

Need some advice here

I have a dasboard yaml file.
This works perfect like this:

button_card_templates:
all my css
views:

this not

button_card_templates: !include_dir_named templates
views:

I just copied all the css to 1 file direct from the dashboard file.

Folder structure

config/dashboards–> dashboard.yaml
config/dashboards/templates/custom_button.yaml (with all my css)

But i got this Error:

button card template glow is missing …

But the glow is in the css.

snippet custom_button.yaml

header:
  styles:
    card:
      - background-color: transparent
      - border-radius: 25px
      - height: 80px
      - show_state: true
    name:
      - color: white
      - justify-self: center
      - font-weight: Light
      - font-size: 15px
      - font-family: ZapfChan Md BT
glow: 
  template: header
  styles:
    card:
      - box-shadow: inset 0px 0px 18px 2px white,
                    inset 0px 0px 18px 5px blue;

Thx

d_sellers1 · January 15, 2024, 3:29am

I use button_card_templates: !include button-card-templates.yaml

garethiowc · January 15, 2024, 8:36pm

I’m trying to create a button card to remind me what bin is being collected. I have the card working but I’m unable to get the icon color to change to match the bin being collected.

Here is what I have so far

type: 'custom:button-card'
entity: sensor.next_bin_collection
name: >
  [[[ return entity.state ]]]
icon: >
  [[[ return entity.attributes.icon ]]]
color: >
  [[[ 
    if (entity.state.includes("Green")) return 'green';
    if (entity.state.includes("Black")) return 'black';
    return 'grey'; // default color
  ]]]

Sensor -

template:
  - sensor:
      - name: "Next Bin Collection"
        state: >
          {% set green_bin_days = states('sensor.green_bin_days') | int %}
          {% set black_bin_days = states('sensor.black_bin_days') | int %}
          {% if green_bin_days <= black_bin_days %}
            {% if green_bin_days == 0 %}
              Green Bin Collection Today
            {% elif green_bin_days == 1 %}
              Green Bin Collection Tomorrow
            {% else %}
              Green Bin in {{ green_bin_days }} days
            {% endif %}
          {% else %}
            {% if black_bin_days == 0 %}
              Black Bin Collection Today
            {% elif black_bin_days == 1 %}
              Black Bin Collection Tomorrow
            {% else %}
              Black Bin in {{ black_bin_days }} days
            {% endif %}
          {% endif %}
        attributes:
          icon: >
            {% set green_bin_days = states('sensor.green_bin_days') | int %}
            {% set black_bin_days = states('sensor.black_bin_days') | int %}
            {% if green_bin_days <= black_bin_days %}
              mdi:recycle-variant
            {% else %}
              mdi:delete-empty
            {% endif %}

Sensor data -

Some suggestions would be great

pedolsky · January 15, 2024, 9:16pm


if ((entity.state).includes("Green")) return …

garethiowc · January 16, 2024, 5:26pm

Sorry, this doesn’t work. It causes the recycle icon to disappear from the card

pedolsky · January 16, 2024, 10:03pm

You have to use it in styles: section. color: accepts no coding.

sebbaT · January 17, 2024, 7:09am

type: custom:button-card
entity: sensor.next_bin_collection
name: >
  [[[ return entity.state ]]]
icon: >
  [[[ return entity.attributes.icon ]]]
styles:
  icon:
    - color: >
        [[[ 
          if (entity.state.includes("Green")) return 'green';
          if (entity.state.includes("Black")) return 'black';
          return 'grey'; // default color
        ]]]

garethiowc · January 17, 2024, 5:03pm

Thank you that did the trick.

I see where i went wrong now

pepeEL · January 18, 2024, 10:05pm

Hi
Can you share me a code how you add gradient background example on “Energy center” or “Music center” ?

Nameless · January 18, 2024, 10:46pm

Maybe you’ve found a fix already, but I ran into some oddities with card color. I ended up moving it out of the styles and under the type.

This gave me the desired card background. Different use setup than you have, but I recall having issues initially.

type: custom:button-card
icon: mdi:laptop
name: Office
size: 45%
color_type: card
color: rgb(179,40,0)

pepeEL · January 19, 2024, 12:31pm

How you create gradient background ?

jeells102 · January 19, 2024, 12:41pm

Hi all,

A bit of a weird issue, but hoping that it can be addressed.

I want the full name of my button card to be displayed regardless of screen size. It looks like on desktop/tablet but on mobile, the name gets cut off by my temperature and humidity details on the right-hand side.

Any ideas on a best approach or a way to make it look good across screen sizes?

I’d like something cohesive across all screen sizes.

The code;

type: custom:stack-in-card
cards:
  - type: custom:button-card
    entity: light.living_room_light_switch
    icon: '[[[ return entity.attributes.icon ]]]'
    show_icon: false
    name: Living Room
    tap_action:
      action: navigate
      navigation_path: /lovelace/living-room
      haptic: medium
    styles:
      card:
        - background: var(--contrast2)
        - padding: 16px
        - '--mdc-ripple-press-opacity': 0
      icon_cells:
        - justify-self: start
        - margin-top: 12px
        - margin-left: 15px
        - animation: |
            [[[
              var state = states['light.living_room_light_switch'].state;
              return state === 'on' ? 'bounce 2s infinite' : 'none';
            ]]]
      img_cell:
        - justify-self: start
        - width: 24px
      custom_fields:
        temp:
          - align-self: start
          - justify-self: end
          - font-size: 13px
          - font-weight: 500
          - margin: 4px 0 0px 0
          - color: var(--contrast8)
          - font-family: Montserrat
        hum:
          - align-self: start
          - justify-self: end
          - font-size: 13px
          - font-weight: 500
          - margin: 1px 0 12px 0
          - color: var(--contrast8)
          - font-family: Montserrat
        graph:
          - padding-top: 0%
          - width: 100%
          - height: 100%
        icon_cells:
          - width: 24px
          - height: 24px
          - color: var(--contrast8)
          - animation: |
              [[[
                var state = states['light.living_room_light_switch'].state;
                return state === 'on' ? 'bounce 2s infinite' : 'none';
              ]]]
      name:
        - justify-self: start
        - font-size: 14px
        - overflow: visible
        - margin: 1px 0 1px 0
        - color: |
            [[[
              var state = states['light.living_room_light_switch'].state;
              return state === 'on' ? 'white' : 'grey';
            ]]]
        - font-family: Montserrat
        - font-weight: 600
      grid:
        - grid-template-areas: '"icon_cells slider temp" "n slider hum"'
        - grid-template-columns: 1fr min-content 1fr
        - grid-template-rows: 1fr min-content min-content
    custom_fields:
      icon_cells: |
        [[[
         var state = states['light.living_room_light_switch'].state;
         if(state == "on")
          return `<ha-icon
          icon="mdi:sofa"
          style="width: 25px; height: 25px; color: yellow;">
          </ha-icon>
          `;
         else 
          return `<ha-icon
          icon="mdi:sofa-outline"
          style="width: 25px; height: 25px; color: grey;">
          </ha-icon>
          `;
        ]]]
      temp: |
        [[[
          return `<ha-icon
          icon="mdi:thermometer"
          style="width: 18px; height: 18px; color: var(--orange);">
          </ha-icon><span>${parseFloat(states['sensor.everything_presence_one_dacc08_temperature'].state).toFixed(0)}°C</span>`
        ]]]
      hum: |
        [[[
          return `<ha-icon
          icon="mdi:water-percent"
          style="width: 18px; height: 18px; color: var(--blue);">
          </ha-icon> <span>${parseFloat(states['sensor.everything_presence_one_dacc08_humidity'].state).toFixed(0)}%</span>`
        ]]]
    card_mod:
      style: |
        ha-card {
          z-index: 1;
          height: 70px;
        }
    extra_styles: |
      @keyframes bounce {
        0% { transform: scale3d(1, 1, 1); }
        7% { transform: scale3d(1.25, 0.75, 1); }
        10% { transform: scale3d(0.75, 1.25, 1); }
        12% { transform: scale3d(1.15, 0.85, 1); }
        16% { transform: scale3d(0.95, 1.05, 1); }
        19% { transform: scale3d(1.05, 0.95, 1); }
        25% { transform: scale3d(1, 1, 1); }
      }
  - type: custom:mini-graph-card
    tap_action:
      action: navigate
      navigation_path: /lovelace/living-room
      haptic: medium
    entities:
      - entity: sensor.everything_presence_one_dacc08_temperature
        name: Temperature
        color: '#ff8c00'
        show_points: false
        legend: false
      - entity: sensor.everything_presence_one_dacc08_humidity
        name: Humidity
        color: '#3399ff'
        y_axis: secondary
        show_points: false
        legend: false
    height: 40
    hours_to_show: 24
    line_width: 3
    font_size: 50
    show:
      name: false
      icon: false
      state: false
      legend: false
      animate: true
      labels: false
      labels_secondary: false
    card_mod:
      style: |
        ha-card {
          position: absolute;
          height: 100%;
          width: 100%;
          top: 0px;
          --ha-card-border-width: 0;
        }
        ha-card:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
        }

Desktop view;

Mobile View;

VietNgoc · January 19, 2024, 2:17pm

Use in extra styles mediaquery

@media screen and (max-width: 800px) {
  #name {
    font-size: 0.5em;
  }
}