I’m trying to squeeze a small, 4-day forecast into a horizontal stack (that’s all the space left I have in my wall control panel). Can anybody tell me how to modify the code to eliminate the vertical bars? Also, I’m getting 4 days by just hiding the overflowing 5th day through card-mod. Is there a way to just reduce the size of the whole card proportionally when added to a horizontal-stack?
Not the best news, API will last till the end of 2021 but no new API signups:
Now that really sucks!
Agree 1000% this screws many people over not just HA but home weather stations too. Apple sucks!!!
I just updated hassio to .109 and lost my lovelace.yaml configuration. I copied my raw ui-lovelace.yaml file onto the clipboard then went to the raw lovelace editor and pasted over the generated file and got everything back excepted the custom animated weather card. In my configuration section I have a resource that points to the .js file (/local/custom_ui/dark-sky-weather-card.js?v=7.1). In the raw lovelace editor I have (type: ‘custom:dark-sky-weather-card’) defined. Nothing shows up under my Weather heading.
Any help would be appreciated.
Animated icons stopped working on IOS 13.4 and Safari 13.1. Also a seperate topic on this on https://community.home-assistant.io/t/animated-weather-icons-on-iphone-stopped-animating/185647. Also an opened issue on github: https://github.com/bramkragten/weather-card/issues/33
Also, i don’t know why i wrote on all these three places about this issue. Guess i am so frustrated on Apple and could do nothing about it
yes, but note it is a system wide issue, not only in this animated weather card.
And it only started when HA updated to 108.x (not sure of the version) when no update to iOS or Safari was made…
But I am using HA 108.8 and currently on IOS 13.3 it works perfectly fine, but not on 13.4. Also, it works on firefox and chrome, but not on Safari 13.1. Though i am only speaking for animated weather card, because i am not using any other animated card…
It doesn’t work in chrome for me. (Latest iOS beta)
It probably is because chrome IOS is still using Safari Webkit on IOS and so is Firefox IOS. If Safari works than chrome IOS will work too automatically. And we should stop communicating same thing on both topics Let’s continue on this one…
that’s not a good idea, since it isn’t an animated weather card issue, but a HA generic issue.
Updated from 108.9 to 109.0 and my current temp is now near the top of the card instead of in line with the icon and name as it’s been previous to updating. Anyone else have this issue or is it just me?
Mine is a few pixels higher now and doesn’t line up with the bottom of the text next to the icon…
Yeah I noticed this in the beta of 0.109. I modified my css entries in the card to correct it and you will need to do that for this card as well. I will post my changes in the BOM card thread in a while with my changes.
Just tried 0.109.1 on my wife’s iPhone, 12.4.5 and the icons are working so it seems it is a iOS issue.
@keithh666 if anyone wants to fix the missing gap for this version (without css knowledge) until the developer fixes it, I just added an empty markdown at the top of it to get the desired gap again:
cards:
- content: ' '
type: markdown
- entity: weather.home
name: Home
type: 'custom:weather-card'
type: 'custom:vertical-stack-in-card'
card-mod
also works. You can control the alignment better:
Code:
- type: custom:weather-card
style:
.: |
ha-card div.current span.icon.bigger {
width: 8em;
height: 8em;
margin-top: -3.5em;
}
ha-card div.current span.title {
font-size: 2.5em;
top: 1em;
}
ha-card div.current span.temp {
font-size: 3em;
right: 1.25em;
top:0.7em;
}
ha-card div.forecast.clear.spacer {
padding-top: 0px;
}
entity: weather.home
name: Home
icons: '/hacsfiles/weather-card/icons/'
current: true
details: false
forecast: true
Why when i change to darksky i get all Friday
- type: custom:weather-card
entity: weather.irohome
mode: daily
Thanks. BTW, what theme are you using?
Ok, looking at the few recent posts I think I’m not the only one that noticed weather icon and temperature moved to the edge of the card:
It does look weird
My config below:
entity: weather.warsaw_forecast
icons: /local/community/weather-card/icons/
style: |
ha-card .day {
border: none;
}
type: 'custom:weather-card'