Just a name/label and icon. I have been using the inbuilt navigation card. Today i swapped to your scene and status card, and thoight a nav card in a similar style (icon left, low) would look good. I tried for an hour or two to mess about with the template. I got it to be an oval shape before i gave up haha 
@andyblac, just discovered your cards and absolutely love them! Excellently documented as well. Thank you!
I have a question around the custom room card - is there a way to have the room card color be grey when any of the room entities (light group for example) are off and only be colored when they are on? I feel the point of the “ulm_custom_card_andyblac_room_color_on” variable is to achieve this but I can’t seem to get it to work.
hi, thanks and yes, just add entity: xxxxx.xxxxx in the main section of the card, use any entity as you want.
I.e. in this example entity: cover.garge_roller_door is the controlling room card entity. I use long action to open more-info so I can long tap on the room card to open the more info dialog of my garage door.
- type: custom:button-card
view_layout:
grid-area: room3
template:
- andyblac_card_room
- garage-door_animation
entity: cover.garge_roller_door
tap_action:
action: navigate
navigation_path: garage
hold_action:
action: more-info
variables:
andyblac_card_room_area_id: garage
andyblac_card_room_color: rgb(133, 173, 173)
sensor_1:
entity_id: binary_sensor.garage_door
sensor_2:
entity_id: binary_sensor.garage_motion_sensor_occupancy
templates:
- motion_animation
entity_3:
entity_id: light.garage_lights
andyblac_card_room_icon_color_on: amber
Ah perfect! That worked, thank you. And am I right in saying that its only the room icon that lights up and not the background? The code I’m using is below (I’ve removed toggle action and the view_layout for better readability!
- type: custom:button-card
template:
- custom_card_andyblac_room
name: "Livingroom"
icon: mdi:sofa
entity: light.livingroom_lights
variables:
ulm_custom_card_andyblac_room_use_small_label_font: true
ulm_custom_card_andyblac_room_color_on: yellow
sensor_label_1: sensor.living_room_air_purifier_temperature
entity_2:
entity_id: light.livingroom_lights
icon: mdi:floor-lamp
ulm_custom_card_andyblac_room_use_light_color: true
action: toggle
yes, that correct, If you want the background to support color_on support add a feature request in my GitHub page, and I’ll see what I can do.
Super! Will do that, thank you for the quick replies! 
1 Like
Hi Andy, congratulations on your work. I’m not very good with code. I’m trying to create a dashboard like yours in the picture. How did you put the badges of the people next to each other? Could you share the code with me?
sure, here my code from my dashboard
- type: horizontal-stack
cards:
- type: custom:button-card
template: andyblac_card_person
entity: person.andy
variables:
andyblac_card_person_use_entity_picture: true
ulm_address: device_tracker.andys_iphone_icloudv3
andyblac_card_person_eta: sensor.andys_iphone_icloudv3_zone_distance
battery:
entity_id: sensor.andys_iphone_icloudv3_battery
- type: custom:button-card
template: andyblac_card_person
entity: person.christine
variables:
andyblac_card_person_use_entity_picture: true
andyblac_card_person_icon: mdi:face-woman
ulm_address: device_tracker.christines_iphone_icloudv3
andyblac_card_person_eta: sensor.christines_iphone_icloudv3_zone_distance
battery:
entity_id: sensor.christines_iphone_icloudv3_battery
battery_2:
entity_id: sensor.christines_apple_watch_se_icloudv3_battery
ciao andy , mi sapresti dire da questo codice come faccio a cambiare il colore delle scritte sotto l’orologio? perche con il tema chiaro mi vengono bianche e quindi non si vedono
-
type: custom:button-card
entity: sensor.time
layout: vertical
name: ‘[[[ return states[’‘sensor.data_italiana’‘].state; ]]]’
extra_styles: >
#flip {height:24px;overflow:hidden;} #flip > div > div
{color:#fff;height:24px;margin-bottom:24px;display:inline-block;} #flip
div:first-child {animation: show 20s linear infinite;} #flipper p
{position:fixed;color:#999; } @keyframes show {
100% {margin-top:-192px;}
91% {margin-top:-140px;}
78% {margin-top:-140px;}
65% {margin-top:-92px;}
52% {margin-top:-92px;}
39% {margin-top:-48px;}
26% {margin-top:-48px;}
13% {margin-top:0px;}
0% {margin-top:0px;}}
label: >-
[[[return `Temp Esterna: 🌡${states['sensor.meter_bagno'].state}° ${states['sensor.meter_bagno'].state}%</div></div><div><div> Temp Interna: 🌡${states['sensor.meter_bagno'].state}° 💧${states['sensor.meter_bagno'].state}%</div></div><div><div> Consumo: ☀${states['sensor.meter_bagno'].state}W</div></div><div><div> Bridge Zigbee: ${states['sensor.meter_bagno'].state}</div></div><div><div>`]]]show_icon: false
show_label: true
show_name: true
show_state: true
styles:
card:
- height: 100px
state:
- font-size: 200%
- font-weight: bold
- justify-self: center
label:
- justify-self: center
- font-size: 90%
- color: green
name:
- justify-self: center
- font-size: 120%
tap_action:
action: none
codice con sintassi corretta
type: custom:button-card
entity: sensor.time
layout: vertical
name: '[[[ return states[''sensor.data_italiana''].state; ]]]'
extra_styles: >
#flip {height:24px;overflow:hidden;} #flip > div > div
{color:#fff;height:24px;margin-bottom:24px;display:inline-block;} #flip
div:first-child {animation: show 20s linear infinite;} #flipper p
{position:fixed;color:#999; } @keyframes show {
100% {margin-top:-192px;}
91% {margin-top:-140px;}
78% {margin-top:-140px;}
65% {margin-top:-92px;}
52% {margin-top:-92px;}
39% {margin-top:-48px;}
26% {margin-top:-48px;}
13% {margin-top:0px;}
0% {margin-top:0px;}}
label: >-
[[[return `<div id=flipper><div id=flip><div><div>
Temp Esterna: 🌡${states['sensor.tempesterna_temperature'].state}°
💧${states['sensor.tempesterna_humidity'].state}%</div></div><div><div> Temp
Interna: 🌡${states['sensor.tempcucina_temperature'].state}°
💧${states['sensor.tempcucina_humidity'].state}%</div></div><div><div>
Consumo:
☀${states['sensor.potenza_attiva_prelevata_istantanea'].state}W</div></div><div><div>
Bridge Zigbee:
${states['sensor.zigbee2mqtt_bridge_state'].state}</div></div><div><div>`]]]
show_icon: false
show_label: true
show_name: true
show_state: true
styles:
card:
- height: 100px
state:
- font-size: 200%
- font-weight: bold
- justify-self: center
label:
- justify-self: center
- font-size: 90%
- color: green
name:
- justify-self: center
- font-size: 120%
tap_action:
action: none
sorry, I do not speak Italian, Can you ask the question in English please.
Thanks
Andy.
Hi @andyblac ,
thanks again for your great work.
I have the following question. I have integrated a device with mqtt. the device has several attributes. in the home.yaml, for the maps of the individual rooms I would like to display one of the attributes as sensor_label_1. Currently it looks like this
sensor_label_1: climate.bosch_hkt_gaming (this is the entity)
It has worked up to this point, but not with the desired information. At this point I would like to display the attrubute current_temperature. something like this
sensor_label_1: climate.bosch_hkt_gaming
attribute: current_temperature
Can you help me with the code at this point?
Many thanks in advance.
hi, you’ll need to create a new sensor for this entity attribute, you can do this by
going to Settings -> Devices & Services
Click on the Helpers tab at top
click on CREATE HELPER button at bottom right of page
choose Template
Then choose Template a sensor
then fill in the info like my example screen shot bellow, but use your entity and attributes names correctly
the name will become the new sensor entity name.
1 Like
change this to suite color:#fff fff = white, the code is RGB 0 to f for each colour ie 00f would be green.
Hi everyone!
I am following this guide
I just couldn’t find the point Include custom card resources it's depending on. For me it now looks like this:
I have adapted the example code with my entities. I now get the error message
configuration error
-no type specified
What am I doing wrong?
- type: custom:button-card
template: custom_card_andyblac_room
name: Bad
tap_action:
action: navigate
navigation_path: bathroom
variables:
ulm_custom_card_andyblac_room_color: blue
sensor_label_1: sensor.buro_temperatur_feuchtesensor_luftfeuchtigkeit
sensor_label_2: sensor.buro_temperatur_feuchtesensor_temperatur
custom_2:
entity_id: climate.buro_temperatur_feuchtesensor
entity_3:
entity_id: light.deckenventilator_buro
ulm_custom_card_andyblac_room_icon_color_on: yellow
entity_4:
entity_id: fan.deckenventilator_buro
ulm_custom_card_andyblac_room_icon_color_on: rgb(77, 195, 255)
templates:
- fan_animation