HI David,
cant really see in your picture, but do the animated Icons touch the bigger Partly Cloudy in your card? It is the case in my card, and I feel we need a bit more space there. Or maybe reposition the text (_icon) to either really below the animated icon Aligned left, or above, as a header kind of text?
don’t want to fiddle around to much in the css, since it all depends on each other (as you can see the space is too much in my card)… thought Id better ask 
Hi Marius… that’s one of the reasons I moved it down… I don’t see it touching now… might depend on the icon being used but we had the raining icon today that went down near the daily high display and it didn’t touch the condition.
I think we’re going to need to wait until @m.p.frankland Mark is on 0.86 as then he will see the problem I was trying to correct. I’d really prefer to be using his stock card (so when he updates it it’s simple to just copy his card rather than having to edit). I didn’t have any text issues before 0.86 so I’ll just wait it out for now…
yes, same here. That’s why I tried to have an open discussion 
providing as much useful feedback as we can 
thanks for that, needed that myself too, so will try and copy your adjustments for this.
just to illustrate what I was after:
only need some extra space between the top section and the variations with the small icons. Have to find the correct style for those.
Ah see… mine is offset from the left whereas your condition is left justified so you will need more room or it will collide I think… because mine is off to the right with a left offset it’s not going to run into trouble.
The right hand edge of my icon is almost (pithiness a pixel) of the left hand edge of the condition so they are never going to clash. Wish I could give you my current screenshot as it shows rain falling to the left of the condition.
have to study what you’re saying here… must admit it mostly is a matter of trial and error for me, editing these stylesheets. fwiw, this is what I have now (did change some of the colors too, find the primary text a bit harsh) and didn’t touch the variations yet, because I would love both sides to slide down a bit, and couldn’t find the same style for left and right in the existing css:
.ha-icon {
height: 18px;
margin-right: 5px;
color: var(--paper-item-icon-color);
}
.temp {
font-weight: 300;
font-size: 4em;
color: var(--secondary-text-color);
position: absolute;
right: 1em;
margin-top: 12px
}
.tempc {
font-weight: 300;
font-size: 1.5em;
vertical-align: super;
color: var(--scondary-text-color);
position: absolute;
right: 1em;
margin-top: 0px;
margin-right: 7px;
}
.apparent {
color: var(--secondary-text-color);
position: absolute;
right: 1em;
margin-top: 50px;
margin-right: 1em;
}
.currentText {
font-size: 1.5em;
color: var(--secondary-text-color);
position: absolute;
left: 1.3em;
margin-top: 50px;
}
I just posted a screenshot…
Your current text is left 1.5em whereas mine is 5em…
thanks!
I Indeed tried to align it with the set of icons below, and the large Icon above, and position the condition text below the icon.
Now I have to find the style for the two columns of variations and hope to slide that section down a bit.
HI folks,
please help me out. My card won’t show the correct large night icon:
ive made an extra dedicated template sensor to check if the icon exists:
which it obviously does.
this is the code in the card for the icon:
get weatherIcons() {
return {
'clear-day': 'day',
'clear-night': 'night',
'rain': 'rainy-5',
'snow': 'snowy-6',
'sleet': 'rainy-6',
'wind': 'cloudy',
'fog': 'cloudy',
'cloudy': 'cloudy',
'partly-cloudy-day': 'cloudy-day-3',
'partly-cloudy-night': 'cloudy-night-3',
'hail': 'rainy-7',
'lightning': 'thunder',
'thunderstorm': 'thunder',
'windy-variant': `cloudy-day-3`,
'exceptional': '!!',
}
}
and this is what I use for the extra sensor:
weather_rsd_icon:
friendly_name_template: >
{{states('sensor.dark_sky_icon')|title|replace('-',' ')}}
value_template: >
{{states('sensor.dark_sky_icon')|title|replace('-',' ')}}
entity_picture_template: >
{% set mapper =
{ 'Breezy': 'cloudy',
'Clear Night': 'night',
'Clear': 'day',
'Mostly Clear': 'day',
'Clear Day': 'day',
'Cloudy': 'cloudy',
'Fog': 'cloudy',
'Hail': 'rainy-7',
'Lightning': 'thunder',
'Mostly Cloudy': 'cloudy',
'Partly Cloudy': 'cloudy-day-3',
'Partly Cloudy Day': 'cloudy-day-2',
'Partly Cloudy Night': 'cloudy-night-3',
'Rain': 'rainy-4',
'Scattered Showers': 'rainy-3',
'Showers': 'rainy-6',
'Snow': 'snowy-6',
'Mostly Sunny': 'day',
'Sunny': 'day',
'Windy': 'cloudy'} %}
{% set state = states('sensor.dark_sky_icon')|title|replace('-',' ') %}
{% set weather = mapper[state] if state in mapper else 'weather' %}
{% set path = '/local/weather/animated/' %}
{% set ext = '.svg'%}
{{[path,weather,ext]|join('')|lower}}**** Card Updated *****
I have seen a couple of folks trying different css settings to move components around the card. I thought I would make it a little easier so you don’t have to edit the card and then lose all your edits when you update the card. To that end I have added several new flags that can be used to pass in css information to help position components on the card.
My current card looks like this using defaults for the flags:
But by setting the following flags
current_text_top_margin: 0px
current_text_left_pos: 1em
current_data_top_margin: 9em
large_icon_top_margin: '-1em'
temp_top_margin: .75em
temp_uom_top_margin: 1.25em
apparent_top_margin: 6em
It can look like this
The updated file is here
The readme file is here and contins the full list of flags added.
Awesome! I so appreciate this! Thanks. I’m going to give that a go right now!
OK DONE!!! It works ‘as advertised’!
I replicated my earlier changes as it was showing all over-printed with the defaults but making the lovelace changes to replicate my earlier css ‘playing’ gave the result I wanted with the new stock card.
Great card and thanks for those changes Mark.
Just in case it helps someone else:
temp_top_margin: -20px
temp_font_weight: 300
temp_font_size: 4em
temp_right_pos: 1em
temp_uom_top_margin: -14px
temp_uom_right_margin: 7px
apparent_top_margin: 45px
apparent_right_pos: 1em
apparent_right_margin: 1em
current_text_top_margin: 39px
current_text_left_pos: 5em
current_text_font_size: 1.5em
current_data_top_margin: 5em
large_icon_top_margin: -3.5em
large_icon_left_position: 0em
Hi David and M.P.
M.P., Absolutely awesome card. I love it! Thanks for your hard work!
As David asked once, could we please have a version .json one day. It would be great to be able to track updates to this wonderful custom card.
Best! Milster
I don’t use the tracker cards so I don’t have a good way to test this so please provide feed back on whether it works or not. There is a version.json file available at this url: https://github.com/iammexx/home-assistant-config/blob/master/ui/darksky/version.json
How can I get version from frontend?
I tried with a sensor like:
- platform: rest
resource: https://raw.githubusercontent.com/iammexx/home-assistant-config/master/ui/darksky/version.json
name: customdarksky_available_version
scan_interval: 3600
value_template: '{{ value_json.dark-sky-weather-card.version }}'
without success: UNKNOWN value
The json file is for the custom_updater.
But your sensor will also work with {{ value_json['dark-sky-weather-card'].version }} as value_template.
For those who don’t know, you can’t use the actual link given, you have to use the following:
https://raw.githubusercontent.com/iammexx/home-assistant-config/master/ui/darksky/version.json
Which is just a link to the ‘raw’ file i.e. the link given but after pressing the Raw button at top right on that page.
And @m.p.frankland it seems to work. but I’ll know for sure if and when there is a new version
Works great using the URL @klogg posted:
https://raw.githubusercontent.com/iammexx/home-assistant-config/master/ui/darksky/version.json
I’ve updated to HA 0.85.1 and the latest version of this card…still getting the below error…with lots of bubshing Ctrl+F5…no deal (also tried in incognito mode)
Have you checked that the location of your .js file in resources: is correct?
You might think this is a stupid question but I’ve made this mistake in the past 
I wound back a version just to confirm it not only reports correctly but performs the update. Works perfectly!
Thank you Mark!!!
Again the latest updates of this CC are outstanding. Thank you again and well done!!!
