Hi, is there a way to size to title of the row? Thxs?
It is, if you also combine decluttering-card with it 
Ok, will try, not sure if i can do it. thxs
Hi, trying to use the custom mini-media-player card.
code :
- card: 'custom:mini-media-player'
cardOptions:
entity: media_player.kodi
wider: true
higher: true
noPadding: true
cardStyle: |
ha-card {
height:100%;
}
.ratio {
padding-bottom: 70%!important;
}
disable home if its true
Hi guys, I’m just wondering if there is a possibility to integrate animated icons like Mattias did in his config. A different take on designing a Lovelace UI
I know he did it with Button-Card. But I guess there is a way to do it with Home-Kit as well?
1 Like
Hi , which tablet is it ?
thanks
Sorry u have been very busy at work…
cardOptions:
entity: media_player.multiroom
artwork: none
name: Multiroom
hide:
name: true
icon: true
power: false
source: true
volume: false
info: false
cardStyle: |
:host {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.mmp__bg {
background: rgba(192,192,192,0.1);
}
.entity__info__media {
color: #f0f0f0;
word-break: break-word;
}
ha-card {
background: transparent;
color: #010203;
overflow: hidden !important;
box-shadow: none !important;
margin-bottom: -50px;
border-radius: 12px !important;
}
.state {
font-size: 8px;
}
Does anyone know if you can use Actions to trigger anything other than a service call (in the popup cards)
I’m trying to trigger another popup from inside a popup, and can’t do it because it requires a fire-dom-event action
How can I get rid of the big borders in mobile left and right?
If I increase tile size on mobile even only from 90 to 91px, the layout changes from 3 to 2 columns. Just want the 3 colums to span over the whole width of the mobile display.
Thanks in advance!
Edit: The border is only present on my android phone, on the iPhone the tiles span over the full width!
At the moment the width is set to a specific width. so changing the tile size does increase the size but not the wrapper that makes the row.
This is more a bug i guess because it is easy to make it first max 3 tiles based on the tile width 
1 Like
Hi,
Maybe you can make a script in hass that opens the other popup and than call the script service to run the script. (did not try this but could work i think)
Thanks for the quick reply! I can live with that on my phone, the important thing is that it looks fine on my girlfriend’s iPhone 
True, if i fix it you can increase it but you always get phones where it won’t fit on the screen 
1 Like
One more question: I am using the rules to show some text in the “home” area. This text is shown in browser and on the android app, but not on the iOS app. Also tried setting the color manually, no change.
Is this a known bug?
I can’t use a script to call the popup, as the fire-event-dom is an Action, and can’t be called from a script unfournatately.
Do you think it would be possible to add a color wheel to the popup? That’s the one thing that I can’t figure out how to add myself 
A question for icons: I can’t get the shutter icon to be displayed correctly, I tried all varieties with offIcons and offStates:
In my opinion the second tile should work, as that the "closed-shutter-icon should be displayed.
If I do not define an icon, it shows the window-icon, as seen on the third tile.
Also, if I try the other way round (define standard as closed, “offStates” as open), the icon never switches to open… (fourth tile)
entities:
- entity: cover.schlafzimmer_rollladen_1
icon: 'mdi:window-shutter-open'
officon: 'mdi:window-shutter'
- entity: cover.schlafzimmer_rollladen_2
icon: 'mdi:window-shutter-open'
officon: 'mdi:window-shutter'
offStates: closed
- entity: cover.zwizi_rollladen_1
offStates: open
- entity: cover.zwizi_rollladen_2
icon: 'mdi:window-shutter'
officon: 'mdi:window-shutter-open'
offStates: open
Hi,
Thanks @DBuit for your great job.
I’m trying to finalise my living room panel card but on my mobile (Home assistant Companion on my Huawei P30), I have an horizontal scrollbar that appears for 4px and I don’t know how to resolve it.
Here is my code :
popup_cards:
cover.roller_shutter_3_current_value:
title: Volet gauche
card:
type: 'custom:cover-popup-card'
entity: cover.roller_shutter_3_current_value
sliderService: cover.set_cover_position
actionsInARow: 3
actions:
- service: cover.open_cover
service_data:
entity_id: cover.roller_shutter_3_current_value
name: Ouvrir
icon: 'mdi:window-shutter-open'
- service: cover.stop_cover
service_data:
entity_id: cover.roller_shutter_3_current_value
name: Stop
icon: 'mdi:stop'
- service: cover.close_cover
service_data:
entity_id: cover.roller_shutter_3_current_value
name: Fermer
icon: 'mdi:window-shutter'
cover.roller_shutter_3_current_value_3:
title: Volet gauche
card:
type: 'custom:cover-popup-card'
entity: cover.roller_shutter_3_current_value_3
sliderService: cover.set_cover_position
actionsInARow: 3
actions:
- service: cover.open_cover
service_data:
entity_id: cover.roller_shutter_3_current_value_3
name: Ouvrir
icon: 'mdi:window-shutter-open'
- service: cover.stop_cover
service_data:
entity_id: cover.roller_shutter_3_current_value_3
name: Stop
icon: 'mdi:stop'
- service: cover.close_cover
service_data:
entity_id: cover.roller_shutter_3_current_value_3
name: Fermer
icon: 'mdi:window-shutter'
views:
- title: Home
path: home
badges: []
background: center / cover no-repeat fixed url('/local/img/background-mobile.jpg')
cards:
- type: 'custom:homekit-card'
statePositionTop: true
tileHoldAnimation: true
horizontalScroll: false
home: true
title: Salon
style: |
:host {
--tile-background: rgba(255, 255, 255, 0.8);
--tile-border-radius: 12px;
--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: 10px;
--tile-icon-size: 30px;
--tile-image-radius: 100%
}
rules: >
{% if is_state('light.lumieres_salon','off') %}
<li>{{states('sensor.next_living_room_scene_debut_soiree')}}</li> {%
endif %}
<li>{{states('sensor.next_living_room_cover_action')}}</li>
entities:
- entities:
- entity: sensor.sonde_salon_temperature
name: Température
icon: 'mdi:thermometer'
wider: true
halfheight: true
hideState: true
- entity: sensor.sonde_salon_humidity
name: ' '
icon: 'mdi:water-percent'
wider: false
halfheight: true
hideState: true
- entities:
- entity: light.lumieres_salon
name: Lumières
icon: 'mdi:lamps'
- entity: light.hue_white_lamp_2
name: Buffet
icon: 'mdi:lamp'
- entity: light.hue_white_lamp_1
name: Buffet
icon: 'mdi:floor-lamp'
title: Lumières
popup:
type: 'custom:light-popup-card'
- entities:
- entity: cover.roller_shutter_3_current_value
name: Volet droit
icon: 'mdi:window-shutter-open'
offIcon: 'mdi:window-shutter'
offStates:
- closed
state: cover.roller_shutter_3_current_value
statePath: attributes.current_position
tap_action:
action: more-info
entity: cover.roller_shutter_3_current_value
- entity: cover.roller_shutter_3_current_value_3
name: Volet gauche
state: cover.roller_shutter_3_current_value_3
icon: 'mdi:window-shutter-open'
offIcon: 'mdi:window-shutter'
offStates:
- closed
statePath: attributes.current_position
tap_action:
action: more-info
entity: cover.roller_shutter_3_current_value_3
title: Volets roulants
- entities:
- custom: Début de soirée
name: Début de soirée
icon: 'mdi:play-box'
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.salon_debut_de_soiree
- custom: Lumière tamisée
name: Lumière tamisée
icon: 'mdi:play-box'
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.salon_lumiere_tamisee
title: Scènes
Thanks for any advice or solution
Hi Guys,
could anybody help me with the style options? sadly I don’t have any CSS experience.
I am using a swipe-card in a homekit style card and inside that swipe-card I’m using vertical and horizontal stacks for button cards.
I would like to change the homekit panel card where the swipe-card is inside to fully transparent.
My code:
type: 'custom:homekit-card'
...
style: |
:host {
--tile-background: rgba(20, 20, 20, 0.22);
--tile-border-radius: 16px;
--tile-width: 100px;
--tile-height: 100px;
--tile-width-mobile: 78px;
--tile-height-mobile: 78px;
--tile-on-background: rgba(150, 150, 150, 0.30); var(--card-background-color);
...
- column: 2
tileOnRow: 3
entities:
- title: Media
entities:
- card: 'custom:swipe-card'
wider: true
higher: true
widerSize: 2
higherSize: 2
noPadding: true
cardOptions:
parameters:
start_card: 2
autoplay:
delay: 3000
speed: 1000
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
I know how to change the style of all homekit-cards as it is on the top, but how am I able to implement individual styling (color) to specific homekit cards?
appreciate any help!
Greetings