Thanks a ton. I can confirm that it is working.
I have the same issue, have you been able to solve it?
Unfortunately not!
Popup on long press doesn’t seem to pop up. Wondering if you guys experience this before?
type: custom:homekit-card
style: homekit-button .icon.climate { background-color:#FFA500!important; }
entities:
- title: Living Room
entities:
- entity: climate.living_room
popup:
type: custom:thermostat-popup-card
tap_action:
action: more-info
entity: climate.living_room
- entity: sensor.living_room_humidity
icon: mdi:water-percent
hideState: true
Just updated all popup cards with a fix for closing the popup when you click on the backdrop.
2 Likes
Fantastic, I’ve just tested and it works great on desktop! Thank you!!! 
I notice that on mobile it doesn’t close the popup when I tap outside the area, perhaps it’s not configured for taps and is only waiting for clicks?
need to test it, nothing changed in the way the tap or click is triggering only the service to close popup needed to changes because of the browser_mod update.
1 Like
Nice looking dashboard, can you share your “Devices” card code?
Looking for something similar to what you did to add to mine but don’t like what I am doing. Yours is looking sharp!
DBuit, any chance to extend Ligh Popup card to have up to 2 sliders for color or CCW lights? I mean to have warmth or color slider next to brightness?
Hey @LAndre glad you like it! I’ve posted the ‘how to’ here: GitHub - conorlap/Wilberforce-Home-Assistant-Dashboard
1 Like
Hi.
Is it possible to change the color of a tile’s icon based on state?
This is an alarm-panel entity, and it has 3 states: active at home, active away from home, inactive.
I would like to do this:
active home red icon
active out of home red icon
inactive green icon
Can you help me? thank you
any dashboard yaml share?
I am having some trouble in getting this card to work. I would appreciate some help with my code if anyone is willing. I am really new to yaml and just trying to follow the example in the github documentation. No matter what I try, I just get a blank page that shows nothing.
I have created a yaml dashboard file. I have my "ui-lovelace.yaml in my config folder. In my config folder I have created a “lovelace” folder that houses all of my room yamls. I have some global items in “ui-lovelace.yaml”. For example, I am using the sidebar-card and I have that on all pages. I am not sure if that is interfering.
ui-lovelace.yaml
button_card_templates: !include_dir_merge_named lovelace/button_card_templates/
decluttering_templates: !include_dir_merge_named lovelace/decluttering_templates/
resources: !include resources.yaml
title: "Homekit"
icon: mdi:apple
theme: dmatik
background: "var(--background-image)"
views:
- !include lovelace/home.yaml
- !include lovelace/living.yaml
- !include lovelace/bedroom.yaml
- !include lovelace/neenie.yaml
- !include lovelace/maggie.yaml
- !include lovelace/bathroom.yaml
- !include lovelace/kitchen.yaml
- !include lovelace/basement.yaml
- !include lovelace/garage.yaml
- !include lovelace/scenes.yaml
kiosk_mode:
non_admin_settings:
kiosk: true
ignore_entity_settings: true
entity_settings:
- entity:
input_boolean.kiosk: 'on'
hide_header: true
- entity:
input_boolean.kiosk: 'off'
hide_header: false
sidebar:
width:
mobile: 0
tablet: 20
desktop: 20
digitalClock: true
date: true
dateFormat: MM DD YYYY
sidebarMenu:
- action: navigate
navigation_path: "/lovelace/home"
name: "Favorites"
icon: mdi:home
active: true
- action: navigate
navigation_path: "/lovelace/living"
name: "Living"
icon: mdi:sofa
active: true
- action: navigate
navigation_path: "/lovelace/bedroom"
name: "Bedroom"
icon: mdi:bed-king
active: true
- action: navigate
navigation_path: "/lovelace/neenie"
name: "Neenie"
icon: mdi:bed-single
active: true
- action: navigate
navigation_path: "/lovelace/maggie"
name: "Maggie"
icon: mdi:bed-single
active: true
- action: navigate
navigation_path: "/lovelace/bathroom"
name: "Bathroom"
icon: mdi:bathtub
active: true
- action: navigate
navigation_path: "/lovelace/kitchen"
name: "Kitchen"
icon: mdi:chef-hat
active: true
- action: navigate
navigation_path: "/lovelace/basement"
name: "Basement"
icon: mdi:stairs-down
active: true
- action: navigate
navigation_path: "/lovelace/garage"
name: "Garage"
icon: mdi:garage
active: true
- action: navigate
navigation_path: "/lovelace/scenes"
name: "Scenes"
icon: mdi:home-assistant
active: true
- action: toggle
entity: input_boolean.kiosk
name: "Kiosk"
icon: mdi:tablet-dashboard
active: true
I am trying to use one of my view files to create a homekit style card. I do hope at some point to create an entire homekit style dashboard, but right now I am teaching myself and making mistakes trying to figure it all out. Here is my room view where I am trying to use the homekit card.
living.yaml code
title: "Living"
path: "living"
type: panel
cards:
- type: "custom:homekit-card"
style: |
:host {
--tile-background: rgba(255, 255, 255, 0.8);
--tile-border-radius: 12px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: rgba(255, 255, 255, 1);
--tile-name-text-color: rgba(0, 0, 0, 0.4);
--tile-on-name-text-color: rgba(0, 0, 0, 1);
--tile-state-text-color: rgba(0, 0, 0, 0.4);
--tile-on-state-text-color: rgba(0, 0, 0, 1);
--tile-state-changed-text-color: rgb(134, 134, 134);
--tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
--tile-value-text-color: rgba(255, 0, 0, 1);
--tile-icon-color: rgba(0, 0, 0, 0.3);
--tile-on-icon-color: #f7d959;
--tile-width-mobile: 90px;
--tile-height-mobile: 90px;
--min-header-height: 150px;
--tile-icon-size: 30px;
--tile-image-radius: 100%
--slider-width: 120px;
--slider-height: 120px;
}
useBrightness: true
useTemperature: true
enableColumns: false
masonry: false
statePositionTop: true
entities:
- title: Living Room Lights
popup:
type: custom:light-popup-card
entities:
- entity: light.entrance_lutron_light
icon: 'mdi:wall-sconce'
name: Porch Light
state: true
- entity: light.living_lutron_tv_lights
icon: 'mdi:floor-lamp-double'
name: TV Lights
state: true
- entity: light.living_lutron_corner_lights
icon: 'mdi:floor-lamp'
name: Corner Lights
state: true
- entity: light.hallway_lutron_lights
icon: 'mdi:ceiling-light'
name: Hallway Lights
state: true
- title: HVAC
entities:
- entity: living.ecobee
icon: 'mdi:hvac'
name: HVAC
state: true
tap_action: more-info
wider: true
higher: true
I have tried to set “panel: true” like the documentation says, but I keep getting an error in Studio Code Server that it the “Property panel is not allowed.” So I went to the UI and changed the view type to “Panel (1 card)”. Then I looked in the raw configuration and found that it is shown as “type: panel” in the yaml. I tried that and got no change.
I have all of the dependencies installed and I believe configured correctly. I have card-mod, broswer-mod and so forth. I haven’t made any changes in the browser-mod configuration though. It is just default. I don’t know if I need to do something there and I am a bit scared. I am at a loss now and just trying to get something that works. Any help would be greatly appreciated.
It seems that unfortunately this custom card is not being maintained anymore 
. Does anyone know an alternative with which I can achieve similar results?
custom:button-card and layout-card 
As others have said, the Custom Button Card is now the best alternative to the HomeKit card since it’s no longer being maintained. It’s actually a lot more powerful and the templating cuts down on repetitive yaml.
Here’s the configuration I use to get close to the HomeKit card:
First, in your ui-lovelace.yaml (or wherever you keep your dashboard configuration) add your templates or your yaml code will get out of control. I created two, one for sensors and one for switches. The sensors template uses “more-info” for the action and the switch template uses “toggle” for the action. Otherwise they’re basically the same. Make sure that the following code is pasted in your ui-lovelace.yaml before your “views:”.
button_card_templates:
switch:
show_entity_picture: true
show_state: true
tap_action:
action: toggle
haptic: heavy
styles:
card:
- width: 110px
- height: 110px
- border-radius: 14px
- padding-top: 10px
- padding-bottom: 10px
- margin-bottom: 10px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
- margin-top: 3%
- margin-left: 20%
name:
- font-size: 14px
- justify-self: start
- padding-left: 10px
- font-weight: normal
state:
- justify-self: start
- padding-left: 10px
- font-size: 14px
sensor:
show_entity_picture: true
show_state: true
tap_action:
action: more-info
haptic: heavy
styles:
card:
- width: 110px
- height: 110px
- border-radius: 14px
- padding-top: 10px
- padding-bottom: 10px
- margin-bottom: 10px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
- margin-top: 3%
- margin-left: 20%
name:
- font-size: 14px
- justify-self: start
- padding-left: 10px
- font-weight: normal
state:
- justify-self: start
- padding-left: 10px
- font-size: 14px
The button card yaml then looks like this:
- type: 'custom:button-card'
entity: sensor.energy_usage
name: Energy
template: sensor
entity_picture: "/local/custom_icons/renewable-energy.png"
You can use “icon:” in lieu of of “entity_picture:” if you want. You can also create the button to change the state of the entity picture or icon like this:
- type: 'custom:button-card'
entity: cover.garage_door_main
name: Garage
template: sensor
state:
- entity_picture: "/local/custom_icons/garage.png"
value: 'open'
styles:
name:
- color: white
state:
- color: white
- entity_picture: "/local/custom_icons/garage-closed.png"
value: 'closed'
styles:
name:
- color: gray
state:
- color: gray
The templates I created are designed to fit 3 wide on your mobile phone.
1 Like
Hi 
, can someone tell me where I have to define this value, so that I can call them with the condition class?
.codeRed {
border: solid red;
border-width: 1px 1px;
}
Do you have a screenshot on how this template of yours look?