Custom Dark Sky Animated Weather Card

great! thank you very much indeed.

skipping the previous update, Ive now got it working with the new Lit …cool.
though I am having a little trouble with the positioning, would you please see why I can’t get the space between the separator and the block below to be smaller? Ive tried all numbers, but is remains the same…

also, I need the positioning of the condition to go below the Icon, and no matter what I do it won’t go…

while I want it to be like:


this is my config:

show_beaufort: true
show_separator: true
tooltips: true
old_daily_format: false
static_icons: false
locale: nl
tooltip_bg_color: 'rgb( 75,155,239)'
tooltip_border_color: orange
tooltip_border_width: 1
tooltip_caret_size: 10
tooltip_fg_color: '#fff'
tooltip_left_offset: -5
tooltip_width: 100

temp_top_margin: 12px
temp_font_weight: 300
temp_font_size: 5em
temp_right_pos: 1em

temp_uom_top_margin: 0px
temp_uom_right_margin: 7px

apparent_top_margin: 75px
apparent_right_pos: 1em
apparent_right_margin: 1em

current_text_top_margin: 75px #1em
current_text_left_pos: 1.3em
current_text_font_size: 1.7em

current_data_top_margin: 6em
 
large_icon_top_margin: -3.5em
large_icon_left_position: 0em

separator_top_margin: 2em

in which I have taken all the exact values I previously had in my classes in the older card.

thanks for any hint you can give me.

silly thing is there’s progress… but now the icons only show up while the card loads, and then they disappear:

using:

temp_top_margin: 12px
temp_font_weight: 300
temp_font_size: 4em
temp_right_pos: 1em

temp_uom_top_margin: 0px
temp_uom_right_margin: 7px

apparent_top_margin: 80px
apparent_right_pos: 1em
apparent_right_margin: 1em

current_text_top_margin: 80px #1em
current_text_left_pos: 1.3em
current_text_font_size: 1.7em

current_data_top_margin: 1em
 
large_icon_top_margin: 12px #-3.5em
large_icon_left_position: 0em

separator_top_margin: 7.4em

UPDATE

well what do you know…
I decided to have the card configured in a dedicated .yaml file, and call that in my view by using this include:

  - type: weather-forecast
    entity: weather.woensdrecht

  - type: weather-forecast
    entity: weather.home_darksky

  - !include /config/lovelace/card_configs/dark_sky_custom_card.yaml

  - type: 'custom:weather-card-chart'
    title: Weather chart
    weather: weather.woensdrecht
    locale: nl

result:

that’s more like it. (although reloading the page now they’re gone again…?!?)

Could it be that having several of these cards in the same view bugs one another? I’ve had similar experience using the mini-graph-card and power-wheel card, that even halted the system and caused spontaneous restarts… see: Lovelace: mini graph card for reference