Try adding
- grid-template-rows: auto
The icon is there is the size of the rows the problem
Perfect, now it works!!
Thanks.
1 Like
Hello forum! 
I hope youāre all having a fantastic day. Iāve hit a bit of a snag with customizing the tooltip and was wondering if you could lend me a hand. Iāve been trying to add a personal touch using HTML, but it seems itās not being interpreted correctly. Any ideas on how to fix this? 
To keep things simple, I also tried adding line breaks with \n, but to no avail. What Iām aiming for is to display a list in a readable manner. Hereās the code Iāve been working with for both attempts:
with HTML:
- type: custom:button-card
icon: mdi:sprout
tooltip: >
[[[
var problems = "<ul>";
var entities = ['plant.ficus', 'plant.filodendro_variegado'];
entities.forEach(function(entity) {
if (states[entity].state == 'problem') {
problems += "<li>" + states[entity].attributes.friendly_name + "</li>";
}
});
problems += "</ul>";
return problems != "<ul></ul>" ? problems : "" ;
]]]
without HTML:
- type: custom:button-card
icon: mdi:sprout
tooltip: >
[[[
var problems = "";
var entities = ['plant.ficus', 'plant.filodendro_variegado'];
entities.forEach(function(entity) {
if (states[entity].state == 'problem') {
problems += "- " + states[entity].attributes.friendly_name + "\n";
}
});
return problems != "" ? problems : "";
]]]
Any guidance will be greatly appreciated. Thanks in advance for your help! 
Best regards, [A HTML Enthusiast]
Hello guys
I nerd your help to modify my code because I am not able to modify slider card to select temp with range of 0,1 ĀŗC instead of 1ĀŗC.
In my entity I setup it steps of 0,1 but with the slider only works grade to grade
I hope you can help me:
title: Hall
cards:
- type: horizontal-stack
cards:
- type: custom:slider-button-card
entity: input_number.temperatura_hall
slider:
direction: left-right
background: gradient
use_state_color: false
use_percentage_bg_opacity: true
show_track: false
toggle_on_click: false
force_square: false
min: 21
max: 25
icon:
show: true
use_state_color: true
tap_action:
action: none
action_button:
show: false
show_name: true
show_attribute: true
show_state: true
compact: false
name: Temp. Deseada
- type: custom:button-card
entity: light.colector_hall_entrada
icon: mdi:heating-coil
label: |
[[[
if (states['light.colector_hall_entrada'].state === "on")
return "Apagado";
else if (states['light.colector_hall_entrada'].state === "off")
return "Encendido";
]]]
state:
- value: 'on'
color: rgb(70, 116, 156)
- value: 'off'
color: rgb(253, 192, 47)
show_label: true
styles:
icon:
- width: 50px
- height: 60px
name: Suelo Radiante
- type: vertical-stack
cards:
- type: custom:mini-graph-card
name: Temperatura y Humedad
decimals: 1
font_size_header: 15
height: 18
tap_action: false
entities:
- entity: sensor.termostato_pasillo_pb_temperatura
name: Temperatura
show_state: true
color: orange
state_adaptive_color: true
show_legend: true
show_graph: false
icon: mdi:thermometer
show_icon: false
- entity: sensor.termostato_pasillo_pb_humedad
name: Humedad
show_state: true
color: lightblue
state_adaptive_color: true
show_legend: true
show_graph: false
icon: mdi:water-percent
show_icon: false
line_color: blue
line_width: 7
font_size: 60
Hello folks,
I am looking for a way to display the next waste in a button card.
I have a sensor that always shows the next waste in the first attribute (see picture)
I donāt understand how to display the first attribute in the card.
I already have the days until the next waste is collected.
################################################# # # # Kopfzeile # # # ################################################# - type: horizontal-stack view_layout: grid-area: kopfzeile cards: - type: custom:button-card name: '[[[ return `<ha-icon icon="mdi:recycle"> </ha-icon> Abfall in ${ states[''sensor.abfallnaechster''].state } Tagen ` ]]]' template: - footer
sorry to get back on this, but I cant get this rightā¦
only focussing on the menu button, do you say this toggles the menu on/off, without an error now, only because you use the
type: custom:button-card
entity: input_boolean.button_menu
icon: mdi:menu
show_name: false
tap_action:
action: toggle
variables:
menu: |-
[[[
if (states['input_boolean.button_menu'].state === 'on') {
this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true, composed: true }));
}
]]]
what I dont see is where this variable is used?
also, how would the toggle event be called if the boolean wasnt onā¦? there must be more to it than this
but, testing this, I can do
type: custom:button-card
entity: input_boolean.menu
icon: |
[[[ return entity.state == 'off' ? 'mdi:menu' : 'mdi:menu-open'; ]]]
show_name: false
tap_action:
action: toggle
variables:
menu: >-
[[[ this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true,
composed: true })); ]]]
without further automation, and it does not trigger an error in the log,
It is reversed though compared to the boolean up[on reload of the page (I have the menu hidden by default, so it always goes back there), which means the actual menu state is not considered ā¦ 
must find a way to check that and set the boolean based on that. Or, simply ditch the desire to sync the button card with the actual menu state, and simply use it as a toggle
Just a heads-up there is an issue with the blank-card option in custom:button-card in 2024.7.0b0-2 where it seems to ignore sizing.
If you have an unsized blank-card it works fine but if you use sizes in your blank-cards for spacing etc itās broken.
Iāve opened an issue on github;
please add more detail as a minimum card config that is affected. As I suggested in the issue, we need more than a screenshot to be able to analyze this
Team,
Iām trying to create a very compact overview of temperatures in my house. The temperature color changes to RED if WARMER than Outside. (i.e.: open a window!)
This layout was created with the grid feature and it works fine, except for 1 thing that is not possible:
click a room/value to see the history chart (to see if the trend is up or down)
This is because the grid only contains text, not an āentityā.
Code:
type: custom:button-card
name: null
variables:
fontsize: 22
styles:
card:
- height: 170px
- width: 180%
grid:
- grid-template-areas: >-
". sens-attic sens-office .""sens-outside sens-bed1 sens-bed ."". .
sens-living sens-garage"
- grid-template-columns: 25% 25% 25% 25%
- grid-template-rows: 1fr 1fr 1fr
- font-weight: normal
- font-size: 13px
- align-self: start
- justify-self: middle
icon:
- width: 30%
- left: 30%
- align-self: end
- justify-self: end
- color: grey
name:
- color: grey
img_cell:
- justify-content: start
- align-items: start
custom_fields:
sens-attic:
- entity: sensor.temp_rfx_atticfront_temperature
- tap_action: null
action: more-info
- '--text-color-sensor': >-
[[[ if (states["sensor.temp_rfx_atticfront_temperature"].state >
states["sensor.helper_temperature_outside_average"].state) return
"orange"; return "lightgreen" ]]]
sens-office:
- '--text-color-sensor': >-
[[[ if (states["sensor.temp_rfx_office_temperature"].state >
states["sensor.helper_temperature_outside_average"].state) return
"orange"; return "lightgreen" ]]]
sens-bed1:
- '--text-color-sensor': >-
[[[ if (states["sensor.temp_rfx_bed1_temperature"].state >
states["sensor.helper_temperature_outside_average"].state) return
"orange"; return "lightgreen" ]]]
sens-bed:
- '--text-color-sensor': >-
[[[ if (states["sensor.temp_rfx_bedroom_temperature"].state >
states["sensor.helper_temperature_outside_average"].state) return
"orange"; return "lightgreen" ]]]
sens-living:
- '--text-color-sensor': >-
[[[ if (states["sensor.temp_rfx_living_temperature"].state >
states["sensor.helper_temperature_outside_average"].state) return
"orange"; return "lightgreen" ]]]
sens-garage:
- '--text-color-sensor': >-
[[[ if (states["sensor.temp_rfx_garage_temperature"].state >
states["sensor.helper_temperature_outside_average"].state) return
"orange"; return "lightgreen" ]]]
sens-outside:
- '--text-color-sensor': lightblue
custom_fields:
sens-outside: |
[[[
return `<font color=grey>OUTSIDE</font><br><span style="font-size: ${variables.fontsize}px;color: var(--text-color-sensor);">${states['sensor.helper_temperature_outside_average'].state}</span>` ;
]]]
sens-attic: |
[[[
return `ATTIC<br><span style="font-size: ${variables.fontsize}px;font-weight: bold; color: var(--text-color-sensor);">${states['sensor.temp_rfx_atticfront_temperature'].state}</span>` ;
]]]
sens-office: |
[[[
return `OFFICE<br><span style="font-size: ${variables.fontsize}px;font-weight: bold; color: var(--text-color-sensor);">${states['sensor.temp_rfx_office_temperature'].state}</span>` ;
]]]
sens-bed1: |
[[[
return `BED1<br><span style="font-size: ${variables.fontsize}px;font-weight: bold; color: var(--text-color-sensor);">${states['sensor.temp_rfx_bed1_temperature'].state}</span>` ;
]]]
sens-bed: |
[[[
return `BED<br><span style="font-size: ${variables.fontsize}px;font-weight: bold; color: var(--text-color-sensor);">${states['sensor.temp_rfx_bedroom_temperature'].state}</span>` ;
]]]
sens-living: |
[[[
return `LIVING<br><span style="font-size: ${variables.fontsize}px;font-weight: bold; color: var(--text-color-sensor);">${states['sensor.temp_rfx_living_temperature'].state}</span>` ;
]]]
sens-garage: |
[[[
return `Garage<br><span style="font-size: ${variables.fontsize}px;font-weight: bold; color: var(--text-color-sensor);">${states['sensor.temp_rfx_garage_temperature'].state}</span>` ;
]]]
Any idea if it is possible to achieve something similar with or without the grid?
fixed with 2024.7.0b4
think because custom fields are not entities there is no tap action, try adding custom tap action to every custom field
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: TITLE
content:
type: vertical-stack
cards:
- type: history-graph
entities:
- entity: ENTITY
1 Like
Dear all,
Iām using a template and for some entities I want to control the icon color in function of the entity and/or state, but for some others I want to display their original color, which happens to change in function of the state. The problem is that if the icon color style is set for some entities, by filtering them using the entity_id, then for those entities that I want to display their original color, the color turns white. Thus, the only way to show the original color is not to change the color style at all? Sounds strange. So I need a workaround and this is why I was thinking to catch the original colorā¦ Is there any way, i.e. a HASS variable, to get the original color of an entity?
The following is the code Iām using to set the color style:
styles:
icon:
- color: |
[[[
var type = entity.entity_id.split(".")[0];
if (type == "switch") {
return states[entity.entity_id].state == 'on' ? 'rgb(0,100,255)' : 'Silver';
} else if (variables.var_select_option_value) {
if (states[entity.entity_id].state == variables.var_select_option_value) {
return "rgb(0,100,255)";
} else {
return "Silver";
}
}
//if the entity is not a switch or a select entity the original color should be used, but it's not !
]]]
Many thanks!
BTW, to test the icon color problem, just add a dummy code into the icon color style and the original icon color of any entity will not be shownā¦
styles:
icon:
- color: |
[[[
if ("dummy" === 0) return "Red";
//With this code no entities are shown with their color !
]]]
Donāt think thereās a way to add a tap_action to a custom field. Think I may have to use a custom button card combined with grid cards and a highly customized margin/padding
You can have a custom button card in a custom field, and that card can have a tap action.
1 Like
Never thought about that 
@potat0
I eventually solved it with:
- grid card 5 columns
- each column: vertical stack card with
- custom button cards and using templates
Hereās the 2-column version of the CARD:
type: grid
square: true
columns: 2
cards:
- type: vertical-stack
cards:
- type: custom:button-card
template: temp_sensor
variables:
var_name: ATTIC
var_entity: sensor.temp_rfx_atticfront_temperature
- type: custom:button-card
template: temp_sensor
variables:
var_name: BED1
var_entity: sensor.temp_rfx_bed1_temperature
- type: custom:button-card
template: temp_sensor
label: spacer button
styles:
state:
- color: '#2c2c2e'
- type: vertical-stack
cards:
- type: custom:button-card
template: temp_sensor
variables:
var_name: OFFICE
var_entity: sensor.temp_rfx_office_temperature
- type: custom:button-card
template: temp_sensor
variables:
var_name: BED2
var_entity: sensor.temp_rfx_bed2_temperature
- type: custom:button-card
template: temp_sensor
variables:
var_name: LIVING
var_entity: sensor.temp_rfx_living_temperature
and the TEMPLATE that needs to be inserted in the raw configuration editor (3dot menu top right)
button_card_templates:
temp_sensor:
variables:
var_name: null
var_entity: sensor.helper_temperature_outside_average
entity: '[[[ return variables.var_entity ]]]'
show_state: true
show_icon: false
show_units: false
name: '[[[ return variables.var_name ]]]'
styles:
name:
- font-weight: normal
- color: grey
state:
- color: |
[[[
if (entity.state <= states["sensor.helper_temperature_outside_average"].state) return 'deeppink'; else return 'darkturquoise'
]]]
- font-size: 25px
- font-weight: bold
card:
- height: 50px
- background-color: '#2c2c2e'
The template makes the rest of the code a lot more compact.
Have you ever managed to fix this? Running into the same problem.
Did you figure this out somehow?
Been struggling to create a card that shows days left until the next laundry day, bin day etc, based on a calendar date. The card should pretty much look like the attached screenshot. Are there any tutorials out there?
This is what the code looks like right now, without an entity or label.
type: custom:button-card
entity: *
layout: vertical
icon: mdi:trash-can
show_state: false
show_name: true
show_label: true
show_entity_picture: false
color: auto
size: 60%
name: Empty bin
show_units: true
label: *
styles:
name:
- font-weight: bold
- font-size: 17px
- align-self: middle
card:
- height: 180px
- width: 180px
icon:
- color: grey
- position: absolute
- top: 5%
label:
- height: 27px
