Ohhh You can se supportedFeatures on light entity stats and put the value from there. Got it working.
Hope that anyone searching the forum here will see that. Maby that should be updetad on the readme for the popup to avoid anyone allse asking. Thx all, Have a great day.
Even with this i still get a card that wont have picture from top to bot. Ice tried a picture larger then the button.
rows:
- columns:
- column: 1
entities:
- title: People
entities:
- card: 'custom:button-card'
noPadding: true
cardStyle: |
:host {
display: flex;
height: 100%;
}
cardOptions:
color_type: card
custom_fields:
sd: |
[[[
return `<ha-icon icon='mdi:motion-sensor' style='width: 15px; height: 15px; color: var(--paper-item-icon-active-color);'></ha-icon>
<span>${states['sensor.jimmyberglund'].state}</span>`
]]]
show_entity_picture: 'true'
styles:
card:
- background-image: url("/local/jimmy.jpg")
- background-size: cover
- background-position: 50% 50%
- text-shadow: '1px 1px #000000'
- color: white
- font-size: 14px
- font-weight: bold
grid:
- grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd" "l l"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 3fr 3fr 2fr 2fr 2fr
template: button
Hi,
It should work in the card it self, you sure you put the style at the right part of the card config?
Can you share the full config?
What is wrong on the screenshot you send?
HI m8.
I guess it can be abitt hard to see with the coloring. but 10% of the picture was cropped.
I fixed it with
styles: card: - border-radius: 0px
I did not need to use that when i only had the custom lovelace button card.
Now its just about grid placement for the text and im done. Guess its mostly getting use to how this works. But now om done with a setup that looks like it did with button card.
A Question. Is it possible to setup a row or column with a condition code on?. Im using that on a card that has a custom lovelace button setup that only shows buttons when its info that is needed. Like for example. Front door is open. and then a icon showing the front door open is shown. OR example larm is not set when everyone left the building.
Rather then having a seonsor icon showing both closed and open I have a row in my previus setup that only shows them when i need to see them.
This bar below is that setup that shows now that my backdoor is open. and when its closed it get hidden.
Thx for all the work you put in. If the conditioning is possible then that will be my last step before im done with my setup.
Can anyone help me style this card so that the camera image fills it correctly?
This is what it should look like
Thanks.
- title: Camera entities: - card: picture-glance cardOptions: title: Garage entities: [] camera_image: camera.esp_camera1 camera_view: live cardStyle: | :host { display: flex; height: 100%; } name: Garage noPadding: true wider: true higher: true
Is it a design choice that title name does not show upp on homekit card when using popup light?
Cause when i use it on my old setup with button card and browser mod it shows the name of the light.
Ive search the forum here and been looking around for an hour now. but all i find is others posting configs without title name showing aswell 
my code for my lights:
enableColumns: true
home: false
tileHoldAnimation: false
icon: 'mdi:home-outline'
rows:
- columns:
- column: 1
entities:
- entities:
- double_tap_action:
action: navigate
navigation_path: /lovelace/2
entity: light.vardagsrums_lampor_grupp
offStates:
- 'off'
- unavailable
- entity: light.vardagsrums_lampor_vanster_grupp
name: Golvlampa VĂ€nster
offStates:
- 'off'
- unavailable
- entity: light.vardagsrums_lampor_hoger_grupp
name: Golvlampa Höger
offStates:
- 'off'
- unavailable
- otillgÀnglig
- unknown
- entity: switch.koks_fonster
- entity: light.koket
popup:
icon: 'mdi:power'
actions:
- color: '#271a00'
name: Movie
service: scene.turn_on
service_data:
entity_id: scene.vardagsrum_movie_night
- color: '#ffb424'
name: Familj KvÀll
service: scene.turn_on
service_data:
entity_id: scene.familj_kvall
actionsInARow: 2
brightnessHeight: 350px
brightnessWidth: 130px
switchHeight: 300px
switchWidth: 110px
settings:
closeButton: stÀng
openButton: InstÀllningar
supportedFeaturesTreshold: -1
title: idiot
type: 'custom:light-popup-card'
title: Vardagsrum
tileOnRow: 5
- column: 1
entities:
- entities:
- entity: light.sovrumssang_vanster_grupp
name: SĂ€ng VĂ€nster
- entity: light.sovrumssang_hoger_grupp
name: SÀng Höger
- entity: light.sovrumsfonster_lampa_grupp
name: Fönster Lampa
- entity: light.sovrums_bank_vanster_grupp
name: BĂ€nk VĂ€nster
- entity: light.sovrums_bank_hoger_grupp
name: BÀnk Höger
- double_tap_action:
action: navigate
navigation_path: /lovelace/2
entity: light.sovrumsbank_lampor_grupp
name: BĂ€nklampor
- double_tap_action:
action: navigate
navigation_path: /lovelace/2
entity: light.sovrums_temp_lampor_grupp
name: Temp Lampor
title: |
[[[ return entity.attributes.friendly_name ]]]
popup:
actions:
- color: '#00c788'
name: Grönt
service: scene.turn_on
service_data:
entity_id: scene.gront_ar_skont
- color: '#ff7200'
name: Mysigt
service: scene.turn_on
service_data:
entity_id: scene.mysigt
- color: '#c4d9d2'
name: Spelande
service: scene.turn_on
service_data:
entity_id: scene.spelande
- color: '#f000ff'
name: Sexigt
service: scene.turn_on
service_data:
entity_id: scene.sexigt
actionsInARow: 2
brightnessHeight: 350px
brightnessWidth: 130px
settings:
closeButton: stÀng
openButton: InstÀllningar
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
title: Sovrum
tileOnRow: 7
row: 1
- columns:
- column: 2
entities:
- entities:
- entity: light.hall_lampor_switch
popup:
brightnessHeight: 350px
brightnessWidth: 130px
scenesInARow: 2
settings:
closeButton: stÀng
openButton: InstÀllningar
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
title: Hallen
- column: 2
entities:
- entities:
- entity: light.malvinas_fonster_lampa_grupp
icon: 'mdi:lamp'
name: Fönsterlampa
- entity: switch.malvinas_rum
icon: 'mdi:floor-lamp'
name: Golvlampa
popup:
actionsInARow: 2
brightnessHeight: 350px
brightnessWidth: 130px
settings:
closeButton: stÀng
openButton: InstÀllningar
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
title: Malvinas rum
- column: 2
entities:
- entities:
- entity: light.evelins_fonster
icon: 'mdi:lamp'
name: Fönsterlampa
offStates:
- 'off'
- unavailable
- entity: switch.evelins_rum
name: Golvlampa
popup:
actionsInARow: 2
brightnessHeight: 350px
brightnessWidth: 130px
settings:
closeButton: stÀng
openButton: InstÀllningar
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
title: Evelins rum
- column: 2
entities:
- entities:
- entity: switch.utomhus_vagg
icon: 'mdi:wall-sconce'
popupExtend:
title: VĂ€gglampa
name: VĂ€gglampa
actionsInARow: 2
brightnessHeight: 350px
brightnessWidth: 130px
settings:
closeButton: stÀng
openButton: InstÀllningar
switchHeight: 300px
switchWidth: 110px
- entity: light.utomhus_ljusslinga
name: Ljusslinga
- entity: light.busklampor
name: Busklampor
popup:
brightnessHeight: 350px
brightnessWidth: 130px
scenesInARow: 2
supportedFeaturesTreshold: 40
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
title: Utomhus
- column: 1
entities:
- entities:
- entity: light.vardagsrums_lampor_grupp
- double_tap_action:
action: navigate
navigation_path: /lovelace/2
entity: light.sovrumsbank_lampor_grupp
- double_tap_action:
action: navigate
navigation_path: /lovelace/2
entity: light.sovrums_temp_lampor_grupp
popup:
brightnessHeight: 350px
brightnessWidth: 130px
scenesInARow: 2
settings:
closeButton: stÀng
openButton: InstÀllningar
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
title: Grupper
tileOnRow: 10
row: 2
rules: |
{% if states('sensor.current_lights_on') | float > 0 %}
<li>{{states('sensor.current_lights_on')}} Lampor Àr pÄ</li> {% endif %}
{% if "unlocked" in states('lock.entre_dorr') %} <li>Dörren Ă€r EJ LĂ
ST!!</li>
{% endif %}
{% if "disarmed" in states('alarm_control_panel.dammtorps_alle_lgh_alarm') %}
<li>Larmet Àr: avlarmat</li> {% endif %}
{% if "triggered" in states('alarm_control_panel.dammtorps_alle_lgh_alarm') %}
<li>Larmet larmar</li> {% endif %}
{% if "armed_home" in states('alarm_control_panel.dammtorps_alle_lgh_alarm')
%} <li>Larmet Àr i: Skalskyddat lÀge</li> {% endif %}
{% if "armed_away" in states('alarm_control_panel.dammtorps_alle_lgh_alarm')
%} <li>Larmet Àr i: Helskyddat lÀge</li> {% endif %}
{% if "armed_night" in states('alarm_control_panel.dammtorps_alle_lgh_alarm')
%} <li>Larmet Àr: Nattlarmat</li> {% endif %}
<li>Tempratur Hemma Àr runt {{states('sensor.vardagsrum_temperature') |
round(1) }} °C</li>
{% if "home" in states('person.jimmy') %} <li>Jimmy Àr Hemma</li> {% endif %}
{% if "home" in states('person.Maria') %} <li>Maria Àr Hemma</li> {% endif %}
statePositionTop: false
style: |
:host {
--tile-background: rgba(10, 10, 10, 0.22);
--tile-border-radius: 12px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: var(--card-background-color);
--tile-name-text-color: rgba(183, 183, 183, 0.59);
--tile-on-name-text-color: var(--primary-text-color);
--tile-state-text-color: rgba(183, 183, 183, 0.59);
--tile-on-state-text-color: var(--paper-item-icon-active-color);
--tile-state-changed-text-color: var(--primary-text-color);
--tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
--tile-value-text-color: var(--primary-text-color);
--tile-icon-color: rgba(183, 183, 183, 0.59);
--tile-on-icon-color: var(--paper-item-icon-active-color);
--tile-width-mobile: 90px;
--tile-height-mobile: 90px;
--tile-icon-size: 30px;
--tile-padding-top: 0
--tile-image-radius: 0;
}
.icon.image {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
.icon.image img {
height: 100%;
}
}
title: Home
titleColor: '#FFF'
type: 'custom:homekit-card'
useBrightness: true
useTemperature: false
You might see a few test names on titels were i try to make it work ^^
Sorry for posting allot past day.
Hi @Jimmy_Berglund,
There is no title / name as you see in the default more info popup.
Where would you wanna have a title?
Ill explain with pictures.
My old setup:
New setup:
Ive tried to find a solution for it on the forum but all my searching only found the same outcome as mine.
And the one i found that works are with browser mod. Allso kind wondering if dubble tap funktion for popup is only achivable with browser mod? or can it be called with the same funktion used for hold_action on the card itself?
Allso found that the swedish letter Ă-ö big letter only works on the mobile. âĂvriga Lamporâ on the desktop i get this 
That might be easy for with some tile config i guess.
Hi @slipx06,
looks like it can not be styled to fill the whole tile 
I got it on my list to add a tile for cameraâs hope to add that soon.
Hi @DBuit,
can i please get feedback on my proposal?
https://community.home-assistant.io/t/custom-lovelace-card-homekit-style-card/158034/751
Good or bad idea?
Better idea?
In progress or rejected?
Thank you in advance for your time and effort
Ciao , io ho provato il tuo codice , per un paio di test ma sembra che non prenda la card, le immagini non si colorano di gialloâŠ
hai idea del perchĂš?
thanks
Hi, great card⊠loving it. Quick question, with my climate.thermostat, the HomeKit style card is always in a state of being âactiveâ âŠ
hvac_modes: heat_cool, heat, cool, off
right now its in cool, is that what is driving it not being greyâd out?
There is a sensor attribute for climate â
fan: on / off
Is there a way to set the Offstates to where fan is off, but only make the card active when itâs running? Thanks
Hi, youâre doing a really good job. Iâm trying to make a condition on some card displays. I would like when the plex is launched, it will replace the card on my TV, but it doesnât seem to be working.
entities:
- title: Salon
entities:
#- type: media-control
# entity: media_player.samsung_tv
- card:
entity: media_player.plex_plex_for_samsung_tv_ue43ru7175uxxc
type: media-control
conditions:
- entity: media_player.plex_plex_for_samsung_tv_ue43ru7175uxxc
state: playing
type: conditional
Hi @marschiaan
I looked at your idea at i think i can add it but the problem is the tile does not have a entity.
The card you are loading has an entity of entities you never know.
To make something like that you also have to set the entity you wanna use for the state of the card and the states. I have to look into that.
Could you add this to the github so i dont forget it thank you
Hi @Alindil,
That is funny there is no conditions in this cardâŠ
but i just released V0.5 with some options to hide/show i card and some style options.
https://github.com/DBuit/Homekit-panel-card/releases/tag/0.5
Hi not really sure how i made it 
i dont have a climate my self so always hard to test. will check the code when it is in offState displayed.
Hello everyone! New update!
Just released V0.5: https://github.com/DBuit/Homekit-panel-card/releases/tag/0.5
Conditional stuff
And you can now use popup as tap_action.
And light popup card is also updated: https://github.com/DBuit/light-popup-card/releases/tag/0.4.7
onStates and offStates default this is on and off but you can change it or add multiple if needed.