The weather card on the screenshot is the standard weather card with CSS styling.
You use homekit card ?
If so how did you implement in homekit card
I donāt know what weather card you mean, sorry.
I only have name of city and sunny
This is the code for that weather think
- entity: weather.home
type: weather-forecast
style: |
ha-card {
background-color: var(--primary-background-color);
border-radius: 15px;
margin: 20px;
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% else %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
Did you get this working with my other card? homekit? this wonāt show like yours does??
No, this is not a homekit card. My only (yet) homekit card is the one I shared earlier with you Here
The homekit card is showing the sidebar behind the homekit card on mobile, wile width is set to 0. Can you help me with that?
Cool i like the look if you or someone else wanna use it in homekit card as a tile you can do it like this:
- card: weather-forecast
noPadding: true
cardOptions:
entity: weather.weersverwachting
cardStyle: |
ha-card {
padding: 5px!important;
display: flex!important;
flex-direction: column!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;
}
and it looks like this:
3 Likes
Thanks! Is there any fix on the sidebar with the homekit card? Maybe, if you donāt have the sidebar issue with your homekit cardā¦ can you share your homekit ui config part? Itās a good start 
I donāt have the problem with the sidebar even when i use your config.
You screenshot is this on a real smartphone? or pc browser? which browser?
Itās not on a smartphone, but the result on my smarthphone (google chrome, android phone) is the same.
Awesome man
Great, you are fucā¦ng super
Is there any possibility to do this on double in wide
how to get same color aS others tiles
corners on weather tile up are to rounded ?
4 Likes
Hi,
In de style part update ha-card and make it like this:
ha-card {
padding: 5px!important;
display: flex!important;
flex-direction: column!important;
background: transparent!important;
box-shadow: none!important;
border-radius:0!important;
}
1 Like
I found out that if i start with columns the problem shows up with the sidebar added. Maybe you can help me with it now? @DBuit any help would be appreciated. I can send you a msg also.
edit: nvm still hereā¦
How good is your css skill?
And do you also have the problem on a pc? than you could inspect the page and see what element is causing the problem so i can do i fix in the css
Iāll today check the chrome debug and see when itās not showing up anymore. I am willing to share my config if that helps BTW.
To be continued and thanks for your effort!
Iām really trying but with no luck.
As soon as panel=true is in one of my viewsā¦ its broken.
For people who have problems that the sidebar is still showing in the background with the help of @martheijnen i found the problem and made a fix in the new release 
1 Like