I need a jump start by Custom:button-card

Hello, I need a jump start on cutom:button-card please. I want to have a grid with 2 columns and and 4 rows inside a custom:button-card. In which I want to map the status of 4 sensors and the icon.

I have read the instructions but can’t get it to work.

Thanks and kind regards,

Andreas

Can you post what you’ve tried please?

Assuming you want them all spaced out the same then it would be something like this I think:

   style: 
     grid:
        - grid-template-areas: '"a b" "c d" "e f" "g h"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr 1fr 1fr 1fr

     custom_fields:
       a:
       - align-self: start
       b:
       - align-self: start

   custom_fields:
     a:

     b:

Where a->h are the elements you want to show and so on…

Hi Ben,

thanks for your request, was very helpful.

here is my first code, this code give me no result from the sensor (please look picture)

The sensor work with other card and is for present days to garbage removal. What is here my problem

Sorry for my bad english!

Thanks and kind regards,
Andreas

type: custom:button-card
entity: sensor.abfallbiotonne
name: Test
styles:
  card:
    - background-color: '#000044'
    - border-radius: 15%
    - width: 250px
    - height: 150px
    - padding: 10%
    - font-size: 10px
  grid:
    - grid-template-areas: '"a b" "c d" "e f" "g h"'
    - grid-template-columns: 1fr 1fr 
    - grid-template-rows: 1fr 1fr 1fr 1fr
  name:
    - font-weight: bold
    - font-size: 25px
    - color: white
    - align-self: middle
    - justify-self: start
    - padding-bottom: 4px
  icon:
    - color: |
        [[[
          if (states["sensor.abfallbiotonne"] > 2) return 'green';
         else return 'red';
        ]]]
    - width: 50%
    - margin-top: '1%'
  custom_fields: 
    a:
    - padding-bottom: 2px
    - align-self: middle
    - justify-self: start
    - color: |
        [[[ 
          if (states["sensor.abfallbiotonne"].state > 7 ) return 'green';                  
         else return 'yellow';
        ]]]
    b:
    - padding-bottom: 2px
    - align-self: middle
    - justify-self: start
    - color: |
        [[[ 
          if (states["sensor.abfallgelbersack"].state > 7 ) return 'green';                  
         else return 'yellow';
        ]]]
    c:
    - padding-bottom: 2px
    - align-self: middle
    - justify-self: start
    - color: |
        [[[ 
          if (states["sensor.abfallpapier"].state > 7 ) return 'green';                  
         else return 'yellow';
        ]]]
    d:
    - padding-bottom: 2px
    - align-self: middle
    - justify-self: start
    - color: |
        [[[ 
          if (states["sensor.abfallrestmuell"].state > 7 ) return 'green';                  
         else return 'yellow';
        ]]]


HAforum2

It looks like you’ve only provided custom_fields: in the style: section, but not the actual content for those fields. In the third example here, note that there’s a custom_fields: section under style: and another that’s a peer to style: that supplies the content for those fields.

2 Likes

As rccoleman says.
The custom_fields entry should be indented the same as your style section and look something like this:

custom_fields:
  a: |
    [[[
      return `[code for the value of 'a']`
    ]]]
  b: |
    [[[
      return `[code for the value of 'b']`
    ]]]
  c: |
    [[[
      return `[code for the value of 'c']`
    ]]]
  d: |
    [[[
      return `[code for the value of 'd']`
    ]]]

Note that the quote marks around the return values are not single quotes, but reverse single quotes (probably the key next to the 1 key on your keyboard). You can put all kinds of coding in that area. For instance, here’s one I use for displaying a status tile in my UI.

        m0: |
          [[[
            if ('[[m0_show]]' == 'true') {
              var icon = '[[m0_icon_off]]';
              var icon_color = '[[m0_icon_color_off]]';
              var status = '[[m0_status_off]]';
              if (states['[[m0_entity]]'].state == '[[m0_on_state]]') {
                icon = '[[m0_icon_on]]';
                status = '[[m0_status_on]]';
                icon_color = '[[m0_icon_color_on]]';
              }
              return `<ha-icon icon=${icon}
              style="width: 14px; height: 14px; color: ${icon_color};">
              </ha-icon><span style="color: white";> ${status}</span>`
            }
            return ``

Note that the [[things_in_double_brackets]] are variables used by the decluttering_card and [[m0_show]] is a variable set to ‘true’ if I want to display the item and ‘false’ if I don’t.

Hi Rob, Hi Russel,

thanks for your repley and support. I will try now you code and i inform you over my result.

Thanks
Andreas

Hi,
the first step I have managed thanks to your help.
Now I have to learn how to format the individual cells and how to get the title to the top.
here is the code and this work.

type: custom:button-card
name: Test Garbage Removal
styles:
  card:
    - background-color: '#2500'
    - border-radius: 15%
    - border: solid 1px
    - width: 250px
    - height: 300px
    - padding: 10%
    - font-size: 10px
  grid:
    - grid-template-areas: '"ibio bio" "iyellow yellow" "ipaper paper" "irest rest"'
    - grid-template-rows: 1fr 1fr 1fr 1fr
    - grid-template-columns: 1fr 1fr
  name:
    - font-weight: bold
    - font-size: 10px
    - padding-bottom: 0px
custom_fields:
  bio: |
    [[[
      return states['sensor.abfallbiotonne'].state
    ]]]
  ibio: |
    [[[
    return 'bio image'
    ]]]
  yellow: |
    [[[
      return states['sensor.abfallgelbersack'].state
    ]]]
  iyellow: |
    [[[
    return 'yellow image'      
    ]]]
  paper: |
    [[[
    return states['sensor.abfallpapier'].state  
    ]]]
  ipaper: |
    [[[
     return 'blue image' 
    ]]]
  irest: |
    [[[
     return 'black image' 
    ]]]
  rest: |
    [[[
      return states['sensor.abfallrestmuell'].state
    ]]]


I understood the formatting to be such that an error is displayed for the following code, for example.

custom_fields:
  bio: 
    - background-color: '#2500'
    - border: solid 4px |
    [[[
      return states['sensor.abfallbiotonne'].state
    ]]]
  ibio: |
    [[[
    return 'bio image'
    ]]]

Danke und Gruß
Andy

You can place the name at the top with the following. (The name is the friendly name for the main entity.)

  grid:
    - grid-template-areas: '"n n" "ibio bio" "iyellow yellow" "ipaper paper" "irest rest"'
    - grid-template-rows: 1fr 1fr 1fr 1fr 1fr
    - grid-template-columns: 1fr 1fr

[/quote]
The formatting can be in the styles section. (Or you can format individual parts of an item using code like I had above (with style=… bits))
You don’t need to specify “n” in the custom fields section (because it isn’t a custom field) but you can format it in the styles section. For further information all the advanced styling and grid, look at the readme of the custom:button-card GitHub entry.
Also check out Keith Townsend’s wonderful Fun with custom:button-card and Compact climate button using a custom button card threads.

Hi Russel,
thanks for your help by my start in Custom:button Card.

I played around a bit over the weekend to understand the function and logic. this is the first result of my playing around.
I still have 2 questions now:
a) How can I insert an image from the folder config\image e.g. into the grid irest if I want to have dear pure image instead of an icon?
b) How do I have to split the grid areas, if I want to have e.g. organic and yellow in one row and blue and black in one row?

type: custom:button-card
name: Müllabfuhr
styles:
  custom_fields:
    bio:
      - border: solid 5px
      - border-color: ' [[[  if (states["sensor.abfallbiotonne2"].state < 2) return "#ff0a00";  else return "#369b04" ]]] '
      - border-radius: 50%
      - width: 20px
      - heigth: 20px
      - font-weight: bold
      - font-size: 15px
      - color: ' [[[  if (states["sensor.abfallbiotonne2"].state < 2) return "#fff0";  else return "#369b04" ]]] '
      - height: 20px
      - background-color: '#FFFFFF'
      - justify-self: center
      - padding: 2px
    ibio:
      - border: solid 5px
      - border-color: ' [[[  if (states["sensor.abfallbiotonne2"].state < 2) return "#ff0a00";  else return "#369b04" ]]] '
      - border-radius: 50%
      - width: 20px
      - heigth: 20px
      - font-weight: bold
      - font-size: 15px
      - background-color: '#A52A2A'
      - padding: 2px
    iyellow:
      - border: solid 5px
      - border-color: ' [[[  if (states["sensor.abfallgelbersack2"].state < 2) return "#ff0a00";  else return "#369b04" ]]] '
      - border-radius: 50%
      - width: 20px
      - heigth: 20px
      - font-weight: bold
      - font-size: 15px
      - background-color: '#FFFFFF'
      - padding: 2px
    yellow:
      - border: solid 5px
      - border-radius: 50%
      - border-color: ' [[[  if (states["sensor.abfallgelbersack2"].state < 2) return "#ff0a00";  else return "#369b04" ]]] '
      - width: 20px
      - heigth: 20px
      - font-size: 15px
      - font-weight: bold
      - color: ' [[[  if (states["sensor.abfallgelbersack2"].state < 2) return "#ff0a00";  else return "#369b04" ]]] '
      - background-color: '#FFFFFF'
      - justify-self: center
      - height: 20px
      - padding: 2px
    paper:
      - border: solid 5px
      - border-radius: 50%
      - color: ' [[[  if (states["sensor.abfallpapier2"].state < 2) return "#ff0a00";  else return "#369b04" ]]] '
      - width: 20px
      - heigth: 20px
      - font-size: 15px
      - font-weight: bold
      - background-color: '#FFFFFF'
      - height: 20px
      - justify-self: center
      - padding: 2px
    ipaper:
      - border: solid 5px
      - border-color: ' [[[  if (states["sensor.abfallpapier2"].state < 2) return "#ff0a00";  else return "#369b04" ]]] '
      - border-radius: 50%
      - width: 20px
      - heigth: 20px
      - font-weight: bold
      - font-size: 15px
      - background-color: '#FFFFFF'
      - padding: 2px
    rest:
      - border: solid 5px
      - border-color: ' [[[  if (states["sensor.abfallrestmuell2"].state < 2) return "#ff0a00";  else return "#369b04" ]]] '
      - border-radius: 50%
      - width: 20px
      - heigth: 20px
      - font-weight: bold
      - font-weight: bold
      - font-size: 15px
      - color: ' [[[  if (states["sensor.abfallrestmuell2"].state < 2) return "#ff0a00";  else return "#369b04" ]]] '
      - height: 20px
      - background-color: '#FFFFFF'
      - justify-self: center
      - padding: 2px
    irest:
      - border: solid 5px
      - border-color: ' [[[  if (states["sensor.abfallrestmuell2"].state < 2) return "#ff0a00";  else return "#369b04" ]]] '
      - border-radius: 50%
      - width: 20px
      - heigth: 20px
      - font-weight: bold
      - font-size: 15px
      - background-color: '#FFFFFF'
      - padding: 2px
  card:
    - background-color: '#313765'
    - border-radius: 15%
    - border: solid 1px
    - width: 200px
    - height: 200px
    - padding: 5%
    - font-size: 10px
    
  grid:
    - grid-template-areas: '"n n" "ibio bio" "iyellow yellow" "ipaper paper" "irest rest"'
    - grid-template-rows: 1fr 1fr 1fr 1fr
    - grid-template-columns: 1fr 1fr 1fr 1fr
    - column-gap: 3px
    - row-gap: 8px
    
  name:
    - font-weight: bold
    - color: '#f0efea'
    - font-size: 12px
    - padding-bottom: 10px
    - justify-self: middle
    - align-self: top
  ibio:
    - border: solid 2px
custom_fields:
  bio: |
    [[[ return states['sensor.abfallbiotonne2'].state; ]]]
  ibio: |
    [[[
        return `<ha-icon
          icon="mdi:trash-can"
          style="width: 20px; height: 20px; color: #FFF; ">
          </ha-icon>`
    ]]]
  yellow: |
    [[[
      return states['sensor.abfallgelbersack2'].state
    ]]]
  iyellow: |
    [[[
        return `<ha-icon
          icon="mdi:trash-can"
          style="width: 20px; height: 20px; color: yellow; ">
          </ha-icon>`
    ]]]
  paper: |
    [[[
    return states['sensor.abfallpapier2'].state  
    ]]]
  ipaper: |
    [[[
        return `<ha-icon
          icon="mdi:trash-can"
          style="width: 20px; height: 20px; color: blue; ">
          </ha-icon>`
    ]]]
  irest: |
    [[[
        return `<ha-icon
          icon="mdi:trash-can"
          style="width: 20px; height: 20px; color: black; ">
          </ha-icon>`
    ]]]
  rest: |
    [[[
      return states['sensor.abfallrestmuell2'].state
    ]]]

HAforum4

Thanks and kind regards,
Andreas

To get two sets of items sharing rows, change your grid as follows:

  grid:
    - grid-template-areas: '"n n n n" "ibio bio iyellow yellow" "ipaper paper irest rest"'
    - grid-template-rows: 1fr 1fr 1fr
    - grid-template-columns: 1fr 1fr 1fr 1fr
    - column-gap: 3px
    - row-gap: 8px

I have had zero CSS Grid skills, then I stumbled upon this fantastic tool: https://grid.layoutit.com

It all makes so so so much sense now. I have now completely reworked my entire UI (by using layout-card) and all my button-card templates. It’s a great way to create your own grids and also learn some things along the way.

2 Likes

Thanks. I’ve added that to my link list.

1 Like

Hi,
here is my result from my last weekendHAforum5
and the code:

`type: custom:button-card
name: Müllabfuhr
styles:
  custom_fields:
    bio:
      - border: solid 5px
      - border-color: ' [[[  if (states["sensor.abfallbiotonne2"].state < 2) return "#ff0a00";  else return "#369b04" ]]] '
      - border-radius: 50%
      - width: 20px
      - heigth: 20px
      - font-weight: bold
      - font-size: 15px
      - color: ' [[[  if (states["sensor.abfallbiotonne2"].state < 2) return "#fff0";  else return "#369b04" ]]] '
      - height: 20px
      - background-color: '#FFFFFF'
      - justify-self: center
      - padding: 2px
    ibio:
      - border: solid 5px
      - border-color: ' [[[  if (states["sensor.abfallbiotonne2"].state <= 2)  return "#ff0a00";  if (states["sensor.abfallbiotonne2"].state <= 5 && states["sensor.abfallbiotonne2"].state > 2)  return "#FF8000"; else return "#369b04" ]]] '
      - border-radius: 50%
      - width: 20px
      - heigth: 20px
      - font-weight: bold
      - font-size: 15px
      - background-color: '#A52A2A'
      - padding: 2px
      - animation: ' [[[  if (states["sensor.abfallbiotonne2"].state <= 2)  return "blink  .7s linear infinite";  if (states["sensor.abfallbiotonne2"].state <= 5 && states["sensor.abfallbiotonne2"].state > 2)  return "blink 2.5s linear infinite"; ]]] '
    iyellow:
      - border: solid 5px
      - border-color: ' [[[  if (states["sensor.abfallgelbersack2"].state <= 2)  return "#ff0a00";  if (states["sensor.abfallgelbersack2"].state <= 5 && states["sensor.abfallgelbersack"].state > 2)  return "#FF8000"; else return "#369b04" ]]] '
      - border-radius: 50%
      - width: 20px
      - heigth: 20px
      - font-weight: bold
      - font-size: 15px
      - background-color: '#FFFFFF'
      - padding: 2px
      - animation: ' [[[  if (states["sensor.abfallgelbersack2"].state <= 2)  return "blink  .7s linear infinite";  if (states["sensor.abfallgelbersack2"].state <= 5 && states["sensor.abfallgelbersack2"].state > 2)  return "blink 2.5s linear infinite"; ]]] '
    yellow:
      - border: solid 5px
      - border-radius: 50%
      - border-color: ' [[[  if (states["sensor.abfallgelbersack2"].state <= 2)  return "#ff0a00";  if (states["sensor.abfallgelbersack2"].state <= 5 && states["sensor.abfallgelbersack2"].state > 2)  return "#FF8000"; else return "#369b04" ]]] '
      - width: 20px
      - heigth: 20px
      - font-size: 15px
      - font-weight: bold
      - color: ' [[[  if (states["sensor.abfallgelbersack2"].state < 2) return "#ff0a00";  else return "#369b04" ]]] '
      - background-color: '#FFFFFF'
      - justify-self: center
      - height: 20px
      - padding: 2px
    paper:
      - border: solid 5px
      - border-radius: 50%
      - border-color: ' [[[  if (states["sensor.abfallpapier2"].state <= 2)  return "#ff0a00";  if (states["sensor.abfallpapier2"].state <= 5 && states["sensor.abfallpapier2"].state > 2)  return "#FF8000"; else return "#369b04" ]]] '
      - color: ' [[[  if (states["sensor.abfallpapier2"].state < 2) return "#ff0a00";  else return "#369b04" ]]] '
      - width: 20px
      - heigth: 20px
      - font-size: 15px
      - font-weight: bold
      - background-color: '#FFFFFF'
      - height: 20px
      - justify-self: center
      - padding: 2px
    ipaper:
      - border: solid 5px
      - border-color: ' [[[  if (states["sensor.abfallpapier2"].state <= 2)  return "#ff0a00";  if (states["sensor.abfallpapier2"].state <= 5 && states["sensor.abfallpapier"].state > 2)  return "#FF8000"; else return "#369b04" ]]] '
      - border-radius: 50%
      - width: 20px
      - heigth: 20px
      - font-weight: bold
      - font-size: 15px
      - background-color: '#FFFFFF'
      - padding: 2px
      - animation: ' [[[  if (states["sensor.abfallpapier2"].state <= 2)  return "blink  .7s linear infinite";  if (states["sensor.abfallpapier2"].state <= 5 && states["sensor.abfallpapier2"].state > 2)  return "blink 2.5s linear infinite"; ]]] '
    rest:
      - border: solid 5px
      - border-color: ' [[[  if (states["sensor.abfallrestmuell2"].state <= 2)  return "#ff0a00";  if (states["sensor.abfallrestmuell2"].state <= 5 && states["sensor.abfallrestmuell2"].state > 2)  return "#FF8000"; else return "#369b04" ]]] '
      - border-radius: 50%
      - width: 20px
      - heigth: 20px
      - font-weight: bold
      - font-weight: bold
      - font-size: 15px
      - color: ' [[[  if (states["sensor.abfallrestmuell2"].state < 2) return "#ff0a00";  else return "#369b04" ]]] '
      - height: 20px
      - background-color: '#FFFFFF'
      - justify-self: center
      - padding: 2px
    irest:
      - border: solid 5px
      - border-color: ' [[[  if (states["sensor.abfallrestmuell2"].state <= 2)  return "#ff0a00";  if (states["sensor.abfallrestmuell2"].state <= 5 && states["sensor.abfallrestmuell2"].state > 2)  return "#FF8000"; else return "#369b04" ]]] '
      - border-radius: 50%
      - width: 20px
      - heigth: 20px
      - font-weight: bold
      - font-size: 15px
      - background-color: '#FFFFFF'
      - padding: 2px
  card:
    - border-radius: 9%
    - width: 150px
    - height: 130px
    - padding: 1%
    - font-size: 10px
  grid:
    - grid-template-areas: '"n n n n" "ibio iyellow ipaper irest" "bio yellow paper rest"'
    - grid-template-rows: 1fr 1fr 1fr
    - grid-template-columns: 1fr 1fr 1fr 1fr 1fr
    - column-gap: 1.5px
    - row-gap: 6px
  name:
    - font-weight: bold
    - border: solid 1px
    - color: '#f0efea'
    - font-size: 12px
    - padding-bottom: 0px
    - justify-self: middle
    - align-self: top
custom_fields:
  bio: |
    [[[ return states['sensor.abfallbiotonne2'].state; ]]]
  ibio: |
    [[[
        return `<ha-icon
          icon="mdi:trash-can"
          style="width: 20px; height: 20px; color: #FFF; ">
          </ha-icon>`
    ]]]
  yellow: |
    [[[
      return states['sensor.abfallgelbersack2'].state
    ]]]
  iyellow: |
    [[[
        return `<ha-icon
          icon="mdi:trash-can"
          style="width: 20px; height: 20px; color: yellow; ">
          </ha-icon>`

    ]]]
  paper: |
    [[[
    return states['sensor.abfallpapier2'].state  
    ]]]
  ipaper: |
    [[[
        return `<ha-icon
          icon="mdi:trash-can"
          style="width: 20px; height: 20px; color: blue; ">
          </ha-icon>`
    ]]]
  irest: |
    [[[
        return `<ha-icon
          icon="mdi:trash-can"
          style="width: 20px; height: 20px; color: black; ">
          </ha-icon>`
    ]]]
  rest: |
    [[[
      return states['sensor.abfallrestmuell2'].state
    ]]]

for a beginner i’m satisfied.

One more question about learning:
how do I insert an image in the following code if I don’t want an icon?

  irest: |
    [[[
        return `<ha-icon
          icon="mdi:trash-can"
          style="width: 20px; height: 20px; color: black; ">
          </ha-icon>`
    ]]]

Thanks and kind regards,

Andreas