@DBuit Hi, to edit styles, do I need to edit styles in .js?
Great job! 
How weather card workās
Is it possible to show temperature , now shows only name of city and cloudy, rainy ā¦
Thx
Do you use the default weather tile? Or someting else?
Default double tile
I use dark sky
- current: true
details: false
entity: weather.dark_sky
forecast: true
name: Sisak
popup_card:
- current: true
details: false
entity: weather.dom
forecast: true
name: Sisak
type: weather-forecast
I donāt use Homekit-Card. What you see there is my own design/codes. Having said that, I have changed my interfacte since then so unfortunaly I donāt have the codes for that interface anymore. But itās just the mini player card that I configured.
1 Like
Hi @aledebla03,
No you do not need to change the .js file
There is a style option and some css variable to easily change some styles but you can overwrite any style if you know your css
check out the documentation on github: https://github.com/DBuit/Homekit-panel-card
@DBuit Welcome back!
My thermostat popup cards donāt have any controls for some reason. The controls are there because if I move the cursor around and tap the thermostat responds but theyāre just not visible!
Do you have any idea what could be wrong?
Hereās my config:
climate.office_ac:
card:
entity: climate.office_ac
type: 'custom:thermostat-popup-card'
style:
'--iron-icon-fill-color': '#FFF'
align-items: center
background: 'rgba(0, 0, 0, 0.8)'
display: block
flex-direction: column
height: 100%
justify-content: center
left: 0
margin: 0
position: fixed
top: 0
width: 100%
z-index: 999
title: ''
and then for the card:
- entity: climate.office_ac
tap_action:
action: more-info
entity: climate.office_ac
wider: true
1 Like
The light icon on the top of the light popup card donāt get the color from the light state. Is there something to configure?
can you share your weather tile config thanks
- card: weather-forecast
noPadding: true
wider: true
cardOptions:
entity: weather.weersverwachting
cardStyle: |
ha-card {
padding: 5px!important;
display: flex!important;
flex-direction: column!important;
background: transparent!important;
box-shadow: none!important;
border-radius:0!important;
}
.content {
display: flex!important;
flex-direction: row!important;
}
.icon-image {
min-width: auto!important;
}
.icon-image > * {
height: 32px!important;
flex: 0 0 32px!important;
}
.info .name-state {
font-weight: 500;
}
.info .name-state .state {
font-size:14px!important;
text-align:right;
}
.info .name-state .name {
font-size:14px!important;
}
.info .temp-attribute {
width:100%;
font-weight: 500;
}
.info .temp-attribute .temp {
font-size: 16px!important;
}
.info .temp-attribute .temp span {
font-size: 14px!important;
}
.forecast {
font-size: 10px!important;
padding-top: 5px!important;
}
.forecast-image-icon {
padding:0!important;
}
.forecast-image-icon > * {
width:20px!important;
height:20px!important;
margin: 0 auto!important;
}
.forecast .temp {
margin-top:0!important;
font-size:12px!important;
}
.forecast .templow {
display:none;
}
1 Like
Hey @DBuit itās me again, from the sidebar card 
I am combining this card with the custom:layout-card from here, but when using the column/rows feauture the card is broken and just wonāt show up (i guess, because the layout card also uses it) I want to achieve something (see picture) where i can have the remote control, combined with the homekit card but it only works if I donāt use the column/rows and thatās something Iād love to use.
So below Iāll show you the code & screenshot of how I bypassed it (by making 3 layouts in the layout card) but Iād love to have 2, with column/row feauture of you enabled in the homekit card
without:
cards:
- type: custom:layout-card
layout: vertical
min_columns: 3
max_columns: 3
column_width: [24%,38%,38%]
cards:
- type: vertical-stack
cards:
- cards:
#CUTOUT BECAUSE 2 MANY CHARACTERS IN FORUM POST
type: vertical-stack
- break
- type: custom:homekit-card
style: !include ../styles/homekit-card.yaml
entities:
- title: Living
entities:
- card: custom:decluttering-card
noPadding: true
cardOptions:
template: mediaplayer-card
variables:
- entity: media_player.tv_living_room
- icon: television
- name: Television
- card: custom:decluttering-card
noPadding: true
cardOptions:
template: mediaplayer-card
variables:
- entity: media_player.kodi_living_room
- icon: kodi
- name: Kodi
- tap_action: more-info
- show_entity_picture: true
- card: custom:decluttering-card
noPadding: true
cardOptions:
template: playstation-card
variables:
- entity: media_player.playstation_4_pro
- card: custom:decluttering-card
noPadding: true
cardOptions:
template: playstation-card
variables:
- entity: media_player.playstation_4_pro
- card: custom:decluttering-card
noPadding: true
cardOptions:
template: playstation-card
variables:
- entity: media_player.playstation_4_pro
- title: Recent TV Shows
entities:
- card: custom:upcoming-media-card
noPadding: true
cardOptions:
line1_text: '$empty'
line2_text: '$empty'
line3_text: '$empty'
line4_text: '$empty'
line5_text: '$empty'
entity: sensor.emby_latest_tv_shows
position: 1
- card: custom:upcoming-media-card
noPadding: true
cardOptions:
line1_text: '$empty'
line2_text: '$empty'
line3_text: '$empty'
line4_text: '$empty'
line5_text: '$empty'
entity: sensor.emby_latest_tv_shows
position: 2
- card: custom:upcoming-media-card
noPadding: true
cardOptions:
line1_text: '$empty'
line2_text: '$empty'
line3_text: '$empty'
line4_text: '$empty'
line5_text: '$empty'
entity: sensor.emby_latest_tv_shows
position: 3
- break
- type: custom:homekit-card
style: !include ../styles/homekit-card.yaml
entities:
- title: Living
entities:
- card: custom:decluttering-card
noPadding: true
cardOptions:
template: mediaplayer-card
variables:
- entity: media_player.tv_living_room
- icon: television
- name: Television
- card: custom:decluttering-card
noPadding: true
cardOptions:
template: mediaplayer-card
variables:
- entity: media_player.kodi_living_room
- icon: kodi
- name: Kodi
- tap_action: more-info
- show_entity_picture: true
- card: custom:decluttering-card
noPadding: true
cardOptions:
template: playstation-card
variables:
- entity: media_player.playstation_4_pro
- title: Recent Movies
entities:
- card: custom:upcoming-media-card
noPadding: true
cardOptions:
line1_text: '$empty'
line2_text: '$empty'
line3_text: '$empty'
line4_text: '$empty'
line5_text: '$empty'
entity: sensor.emby_latest_movies
position: 1
- card: custom:upcoming-media-card
noPadding: true
cardOptions:
line1_text: '$empty'
line2_text: '$empty'
line3_text: '$empty'
line4_text: '$empty'
line5_text: '$empty'
entity: sensor.emby_latest_movies
position: 2
- card: custom:upcoming-media-card
noPadding: true
cardOptions:
line1_text: '$empty'
line2_text: '$empty'
line3_text: '$empty'
line4_text: '$empty'
line5_text: '$empty'
entity: sensor.emby_latest_movies
position: 3
This results in the following (sidebar is not in code, but using your sidebar card), but I more like it to have 2 layouts (so 1 for remote & 1 for homekit card), and now I ābypassedā it by making 3 layouts (1 remote, 1 homekit & another homekit). I prefer the rows/columns version, but thatās just not working out and results in showing nothing (not even an error, just blanco card)
1 Like
I still have to do this for my lights
I have to able to adjust the brightness of my lights
Now i just turn them on/off
I want it as simple as possible
Whats the best way to do this?
Use the light pop up card?
But i think its too much for that no?
Hello everyone,
If people are interested i added this:
So you can use a slider in the tile to change the brightness, no pop-up needed anymore
If you wanna test it out you can install it with HACS, reinstall the card and enable beta version!
2 Likes
Can anyone please help me to solve this?
Looks great, can you please share your config for the waste collection? Iām also trying to achieve this with my waste google cal.