Code for the Entites card? It looks nice.
Changed it up slightly. Buttons are at the bottom now. Gives room for more controls. Still not 100% on it but 
type: custom:button-card
name: Front Door
icon: fapro:door-shut
entity: lock.entryway_lock
tap_action:
action: more-info
haptic: medium
custom_fields:
button:
card:
type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
icon: fas:lock-open
entity: lock.entryway_lock
tap_action:
action: call-service
service: lock.unlock
target:
device_id: 421a9928706c180be58cf0e290f28808
card_mod:
style: |
ha-card {
padding: 0 18px;
--chip-height: 26px;
--chip-icon-size: 10px;
{% if is_state('lock.entryway_lock', 'unlocked') %}
--chip-background: rgba(0,0,0,0.1);
{% else %}
--chip-background: var(--contrast4);
{% endif %}
}
- type: template
icon: fas:lock
entity: lock.entryway_lock
tap_action:
action: call-service
service: lock.lock
target:
device_id: 421a9928706c180be58cf0e290f28808
card_mod:
style: |
ha-card {
padding: 0 18px;
--chip-height: 26px;
--chip-icon-size: 10px;
{% if is_state('lock.entryway_lock', 'unlocked') %}
--chip-background: rgba(0,0,0,0.1);
{% else %}
--chip-background: var(--contrast4);
{% endif %}
}
card_mod:
style: |
ha-card {
--chip-spacing: 8px;
}
styles:
grid:
- grid-template-areas: '"i" "n" "button"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- font-family: HK Nova
- background: var(--contrast2)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 24px
icon:
- width: 24px
- height: 24px
- color: var(--contrast8)
name:
- justify-self: start
- font-size: 14px
- margin: 4px 0 12px 0
- color: var(--contrast8)
state:
- value: unlocked
styles:
card:
- background: var(--green)
icon:
- color: var(--black)
name:
- color: var(--black)
- value: unlocked
operator: '!='
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
1 Like
@panhans thank you for sharing those templates. Like some others have difficulty using them and was wondering if you managed to write a description for the UI mode.
Thanks again!
Nevermind, figured it out!
1 Like
I like it! Gonna try using it soon, let me know if you make any more changes
1 Like
I think Iāve finally settled on a design and also the way I want to layout my entities. Having multiple small buttons was kind of hard to press so I made them larger and reactive. (If door is locked show unlock button and visa versa)
I made the graph card look more like the screenshots. It bugged me that it looked way different. Made a custom heading that gives a quick blurb about the floor. So far its just lights but I plan to add devices and doors states. (example Everything is off and the door is locked or 1 light is on, no devices are on and the door is locked) might get a little long so Iāll have to play with it.
Iāll post the codes when I get a chance. 
4 Likes
I like these new buttons more forsure! 1 button makes a lot more sense for certain devices like locks.
1 Like
Here is the code for some custom cards. If anyone has any suggestions to improve them let me know!
Secondary Title Card
type: custom:button-card
name: Main Floor
label: |
[[[
if (states['sensor.main_count'].state == 0)
return "Lights are off";
else
if (states['sensor.main_count'].state == 1)
return (states['sensor.main_count'].state) + ' Light is on';
else
if (states['sensor.main_count'].state >= 2)
return (states['sensor.main_count'].state) + ' Lights are on';
]]]
show_label: true
styles:
card:
- font-family: HK Nova
- background: none
- padding: 0px 12px
- margin-bottom: '-30px'
- '--mdc-ripple-press-opacity': 0
name:
- justify-self: start
- font-size: 20px
- color: var(--contrast20)
label:
- justify-self: start
- font-size: 16px
- color: var(--contrast10)
Door Card (supports contact sensor)
type: custom:button-card
name: Basement Door
icon: |
[[[
if (states['binary_sensor.basement_door_open'].state == 'on') {
return 'fapro:door-cracked';
}else{
return 'fapro:door-shut';
}
]]]
entity: lock.basement_door
tap_action:
action: toggle
haptic: medium
hold_action:
action: more-info
haptic: medium
custom_fields:
button:
card:
type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: lock.basement_door
tap_action:
action: toggle
haptic: medium
icon: |
[[[
if (entity.state == 'locked') {
return 'fas:lock-open';
}else{
return 'fas:lock';
}
]]]
icon_color: |
[[[
if (entity.state == 'unlocked') {
return 'black';
}
]]]
card_mod:
style: |
ha-card {
padding: 0 50px;
{% if is_state('lock.basement_door', 'locked') %}
--chip-background: var(--contrast4);
{% else %}
--chip-background: rgba(0,0,0,0.1);
{% endif %}
}
styles:
grid:
- grid-template-areas: '"i" "n" "button"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- font-family: HK Nova
- background: var(--contrast2)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 24px
icon:
- width: 24px
- height: 24px
- color: var(--contrast8)
name:
- justify-self: start
- font-size: 14px
- margin: 4px 0 12px 0
- color: var(--contrast8)
state:
- value: unlocked
styles:
card:
- background: var(--green)
icon:
- color: var(--black)
name:
- color: var(--black)
- value: locked
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
Generic Card (can be used for many entities)
type: custom:button-card
name: Vacuum
icon: mdi:vacuum
entity: vacuum.downstairs_shark
tap_action:
action: toggle
haptic: medium
hold_action:
action: more-info
haptic: medium
custom_fields:
button:
card:
type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: vacuum.downstairs_shark
tap_action:
action: call-service
service: |
[[[
if (entity.state == 'docked') {
return 'vacuum.start';
}else if (entity.state == 'cleaning') {
return 'vacuum.return_to_base';
}
]]]
target:
entity_id: vacuum.downstairs_shark
haptic: medium
icon: |
[[[
if (entity.state == 'docked') {
return 'fas:play';
}else{
return 'fas:stop';
}
]]]
icon_color: |
[[[
if (entity.state == 'cleaning') {
return 'black';
}
]]]
card_mod:
style: |
ha-card {
padding: 0 50px;
--chip-icon-size: 16px;
{% if is_state('vacuum.downstairs_shark', 'docked') %}
--chip-background: var(--contrast4);
{% else %}
--chip-background: rgba(0,0,0,0.1);
{% endif %}
}
styles:
grid:
- grid-template-areas: '"i" "n" "button"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- font-family: HK Nova
- background: var(--contrast2)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 24px
icon:
- width: 24px
- height: 24px
- color: var(--contrast8)
name:
- justify-self: start
- font-size: 14px
- margin: 4px 0 12px 0
- color: var(--contrast8)
state:
- value: docked
operator: '!='
styles:
card:
- background: var(--purple)
icon:
- color: var(--black)
name:
- color: var(--black)
- value: docked
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
If you need any help adapting the cards to your needs Iāll try and lend a hand!
7 Likes
@Numotiv they look great! Thanks for sharing the codes.
Can you also share the code of the camera (doorbell for example?)
And the door card you wrote supports a contact sensor, do you have an example?
When I try to remove the action button it looks a bit janky. 
Sure, for the first question here is the doorbell card. Its probably the least useful one because the button isnāt actually a button. Just a visual indicator that the camera is streaming. I just didnāt want a random card to be way shorter than the rest 
Its the same reason I made the light cards have a conditional brightness control.(only shows when on) Partly because a couple lights donāt have the option and look out of place next to one and partly because I accidently turn them on while swiping.
type: custom:button-card
name: Doorbell
icon: fapro:doorbell
entity: camera.entryway
tap_action:
action: more-info
haptic: medium
custom_fields:
button:
card:
type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: camera.entryway
tap_action:
action: more-info
haptic: medium
icon: |
[[[
if (entity.state == 'streaming') {
return 'fas:video';
}else{
return 'fas:video-slash';
}
]]]
icon_color: |
[[[
if (entity.state == 'streaming') {
return 'black';
}
]]]
card_mod:
style: |
ha-card {
padding: 0 50px;
{% if is_state('camera.entryway', 'streaming') %}
--chip-background: rgba(0,0,0,0.1);
{% else %}
--chip-background: var(--contrast4);
{% endif %}
}
styles:
grid:
- grid-template-areas: '"i" "n" "button"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- font-family: HK Nova
- background: var(--contrast2)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 24px
icon:
- width: 24px
- height: 24px
- color: var(--contrast8)
name:
- justify-self: start
- font-size: 14px
- margin: 4px 0 12px 0
- color: var(--contrast8)
state:
- value: streaming
styles:
card:
- background: var(--blue)
icon:
- color: var(--black)
name:
- color: var(--black)
- value: streaming
operator: '!='
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
For the door card its pretty simple. The icon section of the code just looks to see if my august door sense is on or off then changes the door icon from being shut to open.
icon: |
[[[
if (states['binary_sensor.basement_door_open'].state == 'on') {
return 'fapro:door-cracked';
}else{
return 'fapro:door-shut';
}
]]]
If you donāt have one just change it simply to icon: mdi:door or whatever youād like.
Lastly if you donāt want a button at all remove this section of the code:
custom_fields:
button:
card:
type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: lock.basement_door
tap_action:
action: toggle
haptic: medium
icon: |
[[[
if (entity.state == 'locked') {
return 'fas:lock-open';
}else{
return 'fas:lock';
}
]]]
icon_color: |
[[[
if (entity.state == 'unlocked') {
return 'black';
}
]]]
card_mod:
style: |
ha-card {
padding: 0 50px;
{% if is_state('lock.basement_door', 'locked') %}
--chip-background: var(--contrast4);
{% else %}
--chip-background: rgba(0,0,0,0.1);
{% endif %}
}
and make this change:
styles:
grid:
- grid-template-areas: '"i" "n" "button"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
to
styles:
grid:
- grid-template-areas: '"i" "n"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content
5 Likes
amazing, which cleaning robot you use? use succeeded the create the cleaning page with room segmentation?
someone know how can we create from the scene button - a entity button? like from the sofa button - it will open a tv remote. or the apple tv entity. something like this
I use two shark iq robots. I plan on tying it into Google assistant commands to clean specific rooms. Thatās down the road though.
You can do something like this:
type: custom:button-card
entity: YOUR ENTITY
tap_action:
action: more-info
haptic: medium
icon: mdi:tv
aspect_ratio: 1/1
styles:
card:
- border-radius: 24px
- background-color: var(--red)
icon:
- color: var(--black)
That would bring up the more info remote that most media players have. If you want to get really crazy you can use browser mod and do custom pop ups.
1 Like
Any luck on this? Was playing with it myself but with motion, door/window, lights and temperature it was a bit full. Now just use a horizontal row of pills but not the biggest fan of that eitherā¦
Nothing that I really like. Not sure if a hybrid of icons and text to make it smaller is good or what. Iām still playing with it.
1 Like
These are awesome, thank you! Iām trying to find a way to add a sensor output in small text at the top right (thinking temp/air quality per room etc), any ideas to make it work?
Yep, you just need to add another section to the grid. Iāll do an example when I get the chance.
Hi,
I would like to use your awseome theme but when I am adding
button_card_templates: !include_dir_merge_named "path/to/template_directory"
On top of my dashboard yaml (clicking th eraw configuration editor) the yam canāt be parsed.
Just to be sure I am doing things right:
My Lovelace is not in YAML mode
I am clicing on the 3 dots on top right of my dashboard then āraw configuration editorā
I am copy pasting this line juste before my views.
Looks like that:
button_card_templates: !include_dir_merge_named "ui/templates"
views:
- title: Home
type: custom:vertical-layout
icon: mdi:home
path: home
theme: Rounded
badges: []
cards:
- type: custom:button-card
name: home
styles:
card:
- background: none
- padding: 16px 0
- '--mdc-ripple-press-opacity': 0
name:
- font-size: 32px
- color: var(--contrast20)
I guess I am doing something wrong, can you help please! Thanks
amazing,you rock! its work! i just get under the icon the text name of the device, i will try to remove it.
about the browser mode, i didnāt succeed to do it, this is my main goal!!! do you know how to do it?
Hey all,
Iām struggling with the vacuum map part.
I have the camera setup, but it looks completely different then the one from LE0N:
There is this background color for example, and all the rooms have a different color etcā¦
I used this configuration:
platform: xiaomi_cloud_map_extractor
host: !secret xiaomi_vacuum_host
token: !secret xiaomi_vacuum_token
username: !secret xiaomi_cloud_username
password: !secret xiaomi_cloud_password
attributes:
- calibration_points
Probably this needs some tweaking?