This is what I have for now. Itās working good , but I can click only area where picture is. I canāt ( for some reason 
) use whole card transparent picture, or may be I am doing this wrong.
Itās working much batter now. I edit my transparent picture with online tool and now itās not visible like it was before and working great. THANK YOU FOR YOUR HELP AND SEGESTION.
Here is my code if anyone want to use it:
type: custom:stack-in-card
cards:
- type: markdown
tap_action:
action: navigate
navigation_path: weather
card_mod:
style:
.: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
margin-left:0rem
}
ha-markdown-element:second-of-type h1 {
background-color: rgba(0,0,0,0);
color: var(--primary-text-color);
font-weight: normal;
font-size: 3px;
line-height: 3px;
}
content: >
###{% if now().hour < 5 %} Good Night {{'\U0001F634'}} {% elif now().hour
< 12 %} Good Morning {{'\u2615\uFE0F'}} {% elif now().hour < 18 %} Good
Afternoon {{'\U0001F44B\U0001F3FB'}} {% else %} Good Evening
{{'\U0001F44B\U0001F3FB'}}{% endif %} , {{user}}.<br/> Today is {{
now().strftime('%A') }}, {{ now().strftime('%B') }} {% set suffix = ['st',
'nd', 'rd'] %}{% set day = now().day %}{% set index = 3 if day // 10 == 1
or day % 10 == 0 else (day % 10) - 1 %} {{ day~'th' if index > 2 else
day~suffix[index] }} and it's {{ now().strftime('%-I:%M %p') }}. <br/>
Temperature {{states('sensor.openweathermap_forecast_temperature') |
int }}Ā°C <br/> {{states('sensor.openweathermap_condition') }}.
- type: picture
image: /local/MyPictures/OIP-removebg-preview.png
tap_action:
action: navigate
navigation_path: weather
card_mod:
style: |
ha-card {
background-color: transparent !important;
}
card_mod:
style: |
ha-card {
height: 20em !important;
background: linear-gradient(to top, transparent, rgba(var(--frog-rgb-{{states('sensor.weather_frog_status')}})) 10%), url({{states('sensor.weather_frog_image_wide')}});
background-size: cover, 200% auto;
background-position: bottom left {% if is_state("sensor.weather_frog_location", "field") %}20%{% elif is_state("sensor.weather_frog_location", "hills") %}40%{% else %}10%{% endif %};
background-repeat: no-repeat;
background-blend-mode: saturation;
font-size: 10px;
}
Long time no activity here. But I noticed that the navigation menu is not working for me. Itās not sticky anymore. Iām on the beta of HA, the release that comes today.
Probably something is changed what breaks it. But i donāt know what that could be.
@ArenaCloser , maybe you can take a look?
same behavior for me
Iām still on 2024.2, so I canāt tell what has changed in 2024.6. Maybe someone else knows what changed? Or perhaps itās been discussed in the Mushroom topic already? Otherwise Iāll check it out myself when I upgrade.
Can you try this solution from the Mushroom thread? Changing the position from sticky or -webkit-sticky to fixed: Mushroom Cards - Build a beautiful dashboard easily š (Part 2) - #811 by LiQuid_cOOled
too bad, that is not working for me
Can you post your menu card code so we can see whatās preventing the code from working?
Great work! Would you be kind enough to share your entire yaml code? I want to create exactly the same view and would be an amazing not to start from zero.
Much appreciated this fixed the Menu for me!
Does anyone has a fix for the blank page when you open the dashboard. I have a workaround, but would like to have it fixed. The work aroudn for me is to click on edit dash board - rawconfig-editor and close it again.
Not sure how i can fix this.
Hi, @ArenaCloser . Are you still using Frog weather background? Mine is stop working after last HA update and 2 sensors is shows unavailable. I try to find a solution, but no luck so far. Any idea what to do? Thank you
1 Like
I have the same problem and I really miss my weather frog! 
1 Like
Hey @Zenia and @iPilla ! I may have a solution for you.
While setting up my dashboard inspired by @ArenaCloser I decided to have the pictures locally stored on my maschine.
I downloaded all weatherfrog images from github (Google-Weather-Frog/images/wide at master Ā· Senexis/Google-Weather-Frog Ā· GitHub) and slightly changed the code for the weather Frog Image.
I downloaded the pictures to my HA-Maschine (/www/froggy/*) and then changed the last line of the code to:
{{ '/local/froggy/' + dict[weather_status][frog_location] | default(other_location) }}
Now I donāt rely on downloading an image from gitup everytime the location or status changes.
Maybe this helps you guys with your problems as well.
2 Likes
Thank you. I will try to follow your suggestion tonight, when I will come from work. Will report as soon as I will try. TY
Edit: Did you upload all pictures or just a square or wide?
Just the wide
1 Like
To add, check if you use the following state "{% set rain = states(āsensor.buienalarm_precipitationā) | float %} " sensor.buienalarm_precipitation does not excist anymore, you should use sensor.openweathermap_rain.
@Bonzenpaule nice, works great.
3 Likes
Sorry for stupid question, but I confuse , what to change in my code?
card_mod:
style: |
ha-card {
height: 20em !important;
background: linear-gradient(to top, transparent, rgba(var(--frog-rgb-{{states('sensor.weather_frog_status')}})) 10%), url({{states('sensor.weather_frog_image_wide')}});
background-size: cover, 200% auto;
background-position: bottom left {% if is_state("sensor.weather_frog_location", "field") %}20%{% elif is_state("sensor.weather_frog_location", "hills") %}40%{% else %}10%{% endif %};
background-repeat: no-repeat;
background-blend-mode: saturation;
font-size: 10px;
}
Thank you
Itās not a stupid question since I didnāt explain it very well.
This code should stay the same but you have to change the last line for your sensor āsensor.weather_frog_image_wideā
I think itās in your configuration.yaml if you rebuild arenaclosers theme. Look at the screenshot. I marked the line you have to change.
I went a different route while building my dashboard and used helpers to create the sensors. But itās essentially the same code. I can try to write my way up if you canāt fix the code by yourself.
Yes, now I remember where I did this ( templates)
I changed, but sensors still shows unavailable , even after HA restart
#################Weather Frog Sensors################
- name: "Weather frog status"
unique_id: ae7a82e0-0667-4e76-a96f-f0e5073a9b58
state: >-
{% set entity = states("sensor.openweathermap_condition") %}
{% set cloud = states("sensor.openweathermap_cloud_coverage")|int %}
{% set rain = states("sensor.openweathermap_forecast_rain")|float %}
{% if entity == "fog" %}
fog
{% elif entity == "hail" %}
hail
{% elif entity == "lightning" or entity == "lightning-rainy" or entity == "exceptional" %}
lightning
{% elif entity == "snowy" or entity == "snowy-rainy" %}
snowy
{% elif rain > 0 and rain <= 0.8 %}
drizzle
{% elif rain > 0.8 %}
rainy
{% elif states("sun.sun") == "below_horizon" %}
{% if cloud < 20 %}
clear
{% elif cloud < 40 %}
mostly-clear
{% elif cloud < 60 %}
partly-cloudy-night
{% elif cloud < 80 %}
mostly-cloudy-night
{% else %}
cloudy
{% endif %} {% else %}
{% if cloud < 20 %}
sunny
{% elif cloud < 40 %}
mostly-sunny
{% elif cloud < 60 %}
partly-cloudy-day
{% elif cloud < 80 %}
mostly-cloudy-day
{% else %}
cloudy
{% endif %} {% endif %}
icon: mdi:weather-partly-cloudy
- name: "Weather frog image wide"
unique_id: 27887eb5-afaa-4847-9852-3e27074c381d
state: >
{% set weather_status = states("sensor.weather_frog_status") %}
{% set frog_location = states("sensor.weather_frog_location") %}
{% set dict = {'sunny': {'beach':['01-sunny-beach-reading.png','01-sunny-beach-sandcastle.png','01-sunny-beach-sunscreen.png']|random(), 'city':['01-sunny-citypark-sunbathing.png','01-sunny-rooftop-pinacolada.png']|random(), 'creek':'01-sunny-creek-swimming.png', 'field':'01-sunny-field-kite.png', 'hills':'01-sunny-hills-sunbathing.png', 'home':'01-sunny-home-laundry.png', 'orchard':'01-sunny-orchard-picking.png'},
'mostly-sunny': {'beach':['02-mostly-sunny-beach-reading.png','02-mostly-sunny-beach-sandcastle.png','02-mostly-sunny-beach-sunscreen.png']|random(), 'city':['02-mostly-sunny-citypark-picnic.png','02-mostly-sunny-rooftop-pinacolada.png']|random(), 'creek':'02-mostly-sunny-creek-swimming.png', 'field':'02-mostly-sunny-field-kite.png', 'hills':'02-mostly-sunny-hills-sunbathing.png', 'home':'02-mostly-sunny-home-laundry.png', 'orchard':'02-mostly-sunny-orchard-picking.png'},
'partly-cloudy-day': {'beach':'03-partly-cloudy-day-beach-shells.png', 'city':'03-partly-cloudy-day-citypark-ukelele.png', 'creek':'03-partly-cloudy-day-creek-feet.png', 'field':['03-partly-cloudy-day-field-biking.png','03-partly-cloudy-day-field-hiking.png']|random(), 'hills':['03-partly-cloudy-day-hills-painting.png','03-partly-cloudy-day-hills-reading.png']|random(), 'home':'03-partly-cloudy-day-home-flowers.png', 'orchard':['03-partly-cloudy-day-orchard-butterflies.png','03-partly-cloudy-day-orchard-treeswing.png']|random()},
'mostly-cloudy-day': {'beach':'04-mostly-cloudy-day-beach-shells.png', 'city':'04-mostly-cloudy-day-citypark-ukelele.png', 'creek':'04-mostly-cloudy-day-creek-feet.png', 'field':['04-mostly-cloudy-day-field-biking.png','04-mostly-cloudy-day-field-hiking.png']|random(), 'hills':['04-mostly-cloudy-day-hills-painting.png','04-mostly-cloudy-day-hills-reading.png']|random(), 'home':'04-mostly-cloudy-day-home-flowers.png', 'orchard':['04-mostly-cloudy-day-orchard-butterflies.png','04-mostly-cloudy-day-orchard-treeswing.png']|random()},
'clear': {'city':'05-clear-home-lounging.png', 'creek':'05-clear-creek-stars.png', 'field':'05-clear-field-lanterns.png', 'hills':['05-clear-hills-camping.png','05-clear-hills-telescope.png']|random(), 'home':'05-clear-home-lounging.png', 'orchard':'05-clear-orchard-fireflies.png'},
'mostly-clear': {'city':'06-mostly-clear-home-lounging.png', 'creek':'06-mostly-clear-creek-stars.png', 'field':'06-mostly-clear-field-lanterns.png', 'hills':['06-mostly-clear-hills-camping.png','06-mostly-clear-hills-telescope.png']|random(), 'home':'06-mostly-clear-home-lounging.png', 'orchard':'06-mostly-clear-orchard-fireflies.png'},
'partly-cloudy-night': {'city':'07-partly-cloudy-night-home-inside.png', 'creek':'07-partly-cloudy-night-creek-fireflies.png', 'field':'07-partly-cloudy-night-field-fireflies.png', 'hills':'07-partly-cloudy-night-hills-smores.png', 'home':'07-partly-cloudy-night-home-inside.png', 'orchard':'07-partly-cloudy-night-orchard-eating.png'},
'mostly-cloudy-night': {'city':'08-mostly-cloudy-night-home-inside.png', 'creek':'08-mostly-cloudy-night-creek-fireflies.png', 'field':'08-mostly-cloudy-night-field-fireflies.png', 'hills':'08-mostly-cloudy-night-hills-smores.png', 'home':'08-mostly-cloudy-night-home-inside.png', 'orchard':'08-mostly-cloudy-night-orchard-eating.png'},
'cloudy': {'city':'26-haze-fog-dust-smoke-fruit-stand.png', 'creek':'26-haze-fog-dust-smoke-bridge.png', 'field':'26-haze-fog-dust-smoke-mountain.png', 'hills':'09-cloudy-hills-coffee.png', 'home':'09-cloudy-home-flowers.png', 'orchard':'09-cloudy-orchard-watching.png'},
'drizzle': {'city':'10-drizzle-home-laundry.png', 'creek':'10-drizzle-creek-leaf.png', 'field':'10-drizzle-field-leaf.png', 'hills':'10-drizzle-hills-umbrella.png', 'home':'10-drizzle-home-laundry.png', 'orchard':'10-drizzle-orchard-reading.png'},
'rainy': {'city':'12-heavy-rain-busstop-umbrella.png', 'creek':['11-rain-creek-leaf.png','12-heavy-rain-creek-leaf.png']|random(), 'field':'', 'hills':'11-rain-hills-umbrella.png', 'home':['11-rain-home-inside.png','11-rain-home-laundry.png']|random(), 'orchard':['11-rain-home-inside.png','11-rain-home-laundry.png']|random()},
'snowy': {'city':['13-flurries-citypark-snowman.png','15-snow-showers-snow-citypark-snowman.png','20-rain-snow-wintry-mix-citypark-snowman.png']|random(), 'creek':['13-flurries-creek-iceskating.png','15-snow-showers-snow-creek-iceskating.png']|random(), 'field':'16-blowing-snow-field-snowman.png', 'home':'15-snow-showers-snow-home-shoveling.png'},
'snow-storm': {'home':['17-heavy-snow-blizzard-home-inside.png','17-heavy-snow-blizzard-home-shoveling.png']|random(), 'field':'16-blowing-snow-field-snowman.png'},
'hail': {'city':['19-mixed-rain-hail-rain-sleet-busstop-waiting.png','19-mixed-rain-hail-rain-sleet-cafe-entering.png']|random()},
'lightning': {'city':'22-iso-thunderstorm-cafe-looking-outside.png', 'home':['22-iso-thunderstorms-home-inside.png','24-strong-thunderstorms-home-inside.png']|random()},
'fog': {'city':['26-haze-fog-dust-smoke-busstop-waiting.png','26-haze-fog-dust-smoke-fruit-stand.png','26-haze-fog-dust-smoke-pier.png']|random(), 'creek':'26-haze-fog-dust-smoke-bridge.png', 'field':'26-haze-fog-dust-smoke-field-lantern.png', 'hills':'26-haze-fog-dust-smoke-hills-cocoa.png', 'home':'26-haze-fog-dust-smoke-rooftop.png', 'orchard':'26-haze-fog-dust-smoke-mountain.png'}} %}
{% if weather_status == "snowy" %}
{% set other_location = ['13-flurries-citypark-snowman.png', '15-snow-showers-snow-citypark-snowman.png', '20-rain-snow-wintry-mix-citypark-snowman.png', '13-flurries-creek-iceskating.png', '15-snow-showers-snow-creek-iceskating.png', '16-blowing-snow-field-snowman.png', '15-snow-showers-snow-home-shoveling.png'] | random() %}
{% elif weather_status == "snow-storm" %}
{% set other_location = ['17-heavy-snow-blizzard-home-inside.png', '17-heavy-snow-blizzard-home-shoveling.png', '16-blowing-snow-field-snowman.png'] | random() %}
{% elif weather_status == "lightning" %}
{% set other_location = ['22-iso-thunderstorm-cafe-looking-outside.png', '22-iso-thunderstorms-home-inside.png', '24-strong-thunderstorms-home-inside.png'] | random() %}
{% elif weather_status == "hail" %}
{% set other_location = ['19-mixed-rain-hail-rain-sleet-busstop-waiting.png','19-mixed-rain-hail-rain-sleet-cafe-entering.png'] | random() %}
{% endif %}
{{ '/local/froggy/' + dict[weather_status][frog_location] | default(other_location) }}
icon: mdi:image
###############################################################################################################################################################################################
#####################################################################################################################################
#########################TRIGERS##################################################
#######Weather Frog Trigger#############
- trigger:
- platform: time
at: 04:00:00
sensor:
- name: "Weather frog location"
state: '{{ ["city", "creek", "field", "hills", "home", "orchard"] | random()}}' # ToDo: add "beach" location in summer time
icon: mdi:map-marker
unique_id: 0945366b-d5fd-45b3-a561-a87877349194
Mhhh itās difficult to debug this error since I donāt have a error code or message. Whatās your weather service? Did you notice the change for precipitation like @jeroenmetus said? Maybe thatās what is missing for you?