Just 2 weeks busy with my HA and love it. Going to migrate from my fibaro.
First all credits to the maker @DBuit of this fantastic homekit style card.
I got all my rooms and lights controlling with this style and just playing around with background/ colors etc.
With this I got a question that I couldn’t find to adjust. The progress circle for like the brightness of the lamps I want to give it more black color. Is this possible or adjustable?
And if not I like to call it a feature request 
Newbie question.
@mkhattab How do you change the fonts of the buttons? And witch fonts is this? I like it 
Hello
Is it known issue, that when card has wider size, the mini-graph embedded inside is cropped from the bottom? It’s displayed properly in regular/square button. Is there any way how to cope with this?
I would also ask for another two things:
- I’m not able to enable the percentage circle for dimmed lights. It’s like
statePositionTopis ignored: - knowing this card is based on custom:button-card Is it possible to achieve animated expanding circle when clicking the icon?
Thank you in advance
hmm on iPhone it looks different way (not cropped on the bottom but sides are messed up instead)
With regards
Hi @DBuit , sorry , i have a couple of questions , i saw that is impossible to set a transparent background of one card only , i was trying to get weather transparent but no luck.
I was trying to use offState , i have a sensor of all lights on which result on always , the status is 0 because it counts 0 entities on , how can i ocverride the status of the card .
the last is how do i change colour of the circles and value for the sensors in the Style ?
thanks
2 Likes
thanks it is work perfectly!
Is it possible to increase the font of the menu on the side bar?
@Umbe Would you mind sharing the code for your sidebar? It looks awesome and gave me a few ideas
1 Like
Enjoy
sidebar:
title: ""
digitalClock: true
date: true
bottomcard: true
style: |
:host {
--sidebar-background: #2083cd;
--sidebar-text-color: #f0f0f0;
}
.sidebarMenu {
margin: 5px 0;
padding: 5px 0;
}
.digitalClock {
padding-left: 0px;
# padding-bottom: 7px;
padding-top: 10px
}
h1.digitalClock {
font-size: 50px;
line-height: 65px;
}
.date {
text-align: center;
}
h1 {
text-align:center;
}
# width in percentage (dont add the %)
width:
mobile: 0
tablet: 22
desktop: 17.5
sidebarMenu:
- action: navigate
navigation_path: /home-kit/Page1
name: System status
active: true
icon: mdi:home-assistant
- action: navigate
navigation_path: /home-kit/Page2
name: Lights
active: true
icon: mdi:lightbulb-group
- action: navigate
navigation_path: /home-kit/Page3
name: Climate
active: true
icon: mdi:home-thermometer-outline
- action: navigate
navigation_path: /home-kit/Page4
name: Music
active: true
icon: mdi:folder-music-outline
- action: navigate
navigation_path: /home-kit/Page5
name: Squeezebox
active: true
icon: mdi:cast-audio
- action: navigate
navigation_path: /home-kit/Page6
name: batteries
active: true
icon: mdi:account
template: |
<li>
{% if now().hour < 5 %} Good night {{'\U0001F634'}}
{% elif now().hour < 12 %} Good morning {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Good afternoon {{'\U0001F44B\U0001F3FB'}}
{% else %} Good evening {{'\U0001F44B\U0001F3FB'}}{% endif %}
</li>
<li>
Outside is
{{states('sensor.london_temperature')}} degrees</li>
<li>
At Home is
{{states('sensor.0x00158d00044b3373_temperature_1')}} degrees
</li>
<li>Today
is currently {{states('weather.home')}}
</li>
<li>
{% if states('sensor.total_lights_on') | float > 0 %} <li>There are {{states('sensor.total_lights_on')}} lights ON</li> {% endif %}
<li>
bottomCard:
type: 'custom:mini-media-player'
cardOptions:
entity: media_player.pi1
hide:
name: true
power: true
source: true
volume: false
info: false
cardStyle: |
:host {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.mmp__bg {
background: transparent
}
.entity__info__media {
color: #010203;
word-break: break-word;
}
ha-card {
background: transparent;
color: #010203;
overflow: hidden !important;
box-shadow: none !important;
margin-bottom: -50px;
.state {
font-size: 8px;
}
2 Likes
Thanks so much!
Thanks so much!
can you send background image 
Choose
background: linear-gradient(90deg, rgba(31, 131, 204) 0%, rgba(55,127,226,1) 25%, rgba(255,137,137,1) 54%, rgba(252,176,69,1) 100%)
# background: linear-gradient(32deg, rgba(131,58,180,1) 0%, rgba(55,127,226,1) 35%, rgba(255,137,137,1) 64%, rgba(252,176,69,1) 100%)
1 Like
Thanks , I’m happy like a kid lolll
if a possible to change font size in sidebar ???
@DBuit , sorry , can you explain how to make the button of mini media players working with the popup ?
or i use the buttons or i see the popups i have no idea.
must card-mod be installed ?
did you ever fix the issue?
i have a similar problem.
If i do not set tap and hold action and i cancel them ,i can use the buttons of the media card, but if i set tap action and hold, i can see the popup but buttons are not possible to be pushed.
furthermore if i do not use full cover fit my card is cut in half
- title: Page6
path: Page6
panel: true
cards:
- type: "custom:homekit-card"
home: false
title: "Home"
useBrightness: false
useTemperature: false
titleColor: "#FFF"
enableColumns: true
statePositionTop: true
rows:
- row: 1
columns:
- column: 1
tileOnRow: 2
entities:
- title: Music
entities:
- card: custom:mini-media-player
name: pi1
wider: true
higher: true
widerSize: 2
higherSize: 2
noPadding: true
popup:
settings: true
type: custom:media_player-popup-card
actions:
- service: media_player.media_previous_track
service_data:
entity_id: this
name: previous
icon: mdi:skip-previous
- service: media_player.media_play_pause
service_data:
entity_id: this
name: play/pause
icon: mdi:play-pause
- service: media_player.media_next_track
service_data:
entity_id: this
name: next
icon: mdi:skip-next
tap_action:
action: none
hold_action:
action: popup
entity: media_player.pi1
cardStyle: |
ha-card {
height: 100%;
background: none !important;
box-shadow: none !important;
position: relative;
font-size: 0.8vw !important;
image
}
.button {
padding: 0px !important;
margin: 3px 2px !important;
}
ha-card{
overflow: hidden !important;
}
:host #primaryProgress{
background: #474A52 !important;
display: flex !important;
height: 100%;
}
cardOptions:
artwork: full-cover
entity: media_player.pi1
name: pi1
hide:
power: true
progress: false
runtime: true
icon: true
name: true
source: true
volume: true
controls: false
Hi @Umbe
I haven’t really managed to get it working and I don’t use it for that reason. I would love to find a solution if you find one. I have the popup working and it displays properly but taking my action buttons does absolutely nothing.
Here’s my code for the pop-up definition (before views section of the UI) :
media_player.office_stb:
card:
type: 'custom:media_player-popup-card'
switchHeight: 400px
switchWidth: 150px
entity: media_player.office_stb
actions:
- service: media_player.volume_mute
service_data:
entity_id: this
name: MUTE
icon: 'mdi:speaker'
- service: media_player.media_play_pause
service_data:
entity_id: this
name: PLAY/PAUSE
icon: 'mdi:play-pause'
- service: media_player.media_next_track
service_data:
entity_id: this
name: SOURCE
icon: 'mdi:skip-next'
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
and here’s the tile definition under views :
- entity: media_player.office_stb
tap_action:
action: more-info
entity: media_player.office_stb
and this is what the popup looks like:
Hi all,
I stumbled upon this amazing card yesterday by accident and started on replacing my current frontend with this immediately 
. I have to questions/problems:
- I cannot get the confirmation to work. Whatever I do, I do not get a confirmation dialog. Does anyone have a working example for me?
- I would need some help with css. This is completely out of my comfort zone, and I have spent about 2 hours already trying to get this to work: Depending on a sleepmode, I want to change the backgroundcolor of a button.
The conditionalClass looks like this
- entity: light.kids_lights
hide: >
[[[ if (states['binary_sensor.show_kids'].state == "on") return false;
else return true ]]]
conditionalClass: >
[[[ if (states['group.sleepmodes'].state == "on") return
"sleepmodeclass"; else return "" ]]]
and works fine, but I can’t figure out what to put here:
type: 'custom:homekit-card'
home: false
tileHoldAnimation: true
statePositionTop: true
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;
}
If anyone with knowledge in css could help me out here, I would be immensely grateful.
Thanks!
Robert
1 Like
Finally confirmations work 
In case somebody else is looking for an example, here you go:
- entity: input_boolean.paper spin: true tap_action: action: call-service service: input_boolean.toggle service_data: entity_id: input_boolean.paper confirmation: text: Are you sure the trashcans are out? hide: > [[[ if (entity.state == "on") return false; else return true ]]]
While this panel card allows to define the popup for all sub-cards at once, and the popup sports settingsCards, which require to pass entity id…
How can I pass entity id of caller card to settingsCard?
Here is an example:
type: 'custom:homekit-card'
statePositionTop: true
entities:
- popup:
type: 'custom:light-popup-card'
settings:
openButton: More
closeButton: Less
settingsCard:
type: 'custom:light-entity-card'
cardOptions:
entity: ?????
entities:
- entity: light.bedroom_1
- entity: light.bedroom_2
- entity: light.bedroom_3
With regards
@DBuit
Hi m8.
Wondering how i can make the timestamp of my new washing mashin show the correkt time on the card entity.
If you look on the picture here. The time stamp is no real time thats understandable for me atleast.
And it become the same on the state when i use the sensor on the card.
But if i look on the intergration the time looks totaly understandable to when the washer will be done.
i guess i need to use the statePath: ina correct manner. But when i look on the developers tool i have only one thing i can see and that is this.
friendly_name: Klar
device_class: timestamp
With abitt better searching on the forums i could see it has to do with how entity card works and that why it works on the other platform is cause its using the entities card.