Need help with custom:stack-in-card

Configuration Frontend
1

Hi.
After last update my stack-in- card not show the content anymore. Couldn’t find what is going on by myself

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;
    }

This is how it was before
image
And this is how it’s looks now:
image

2

Hi @Zenia,

You mentioned “After last update.”

Could you please clarify which update you’re referring to? Did you update the HA core or the custom:stack-in-card?

Also, have you tried clearing your browser cache?

3

Since june 2024, openweathermap does not working anymore in v2.5.
Are you still in v2.5 ? If yes you need to migrate to v3.0

4

It’s happened after HA 2024.7 update. Yes,I clean cash, restart HA . Nothing helps me to resolve this problem.

5

I update Openweathermap to 3.0 right away, after HA recommend it. After that this card was working fine,same like before, also like you can see on my second screen shot even greeting is not showing up anymore. TY

6

Still no luck. Clear cash, restart HA, try to use parts of the code to see what is preventing this card to show up properly. NOTHING HAPPEND.
Not show any error in the card itself.
NEED HELP. Please if anyone knows what is going on, let me know.
TY

7

You got plenty of code here which makes a picture more complex.
Test with a simplified version: place a Markdown with “hello” and a Picture with some static image inside Stack-in-card and check.

8

Thank you for your suggestion, will try. But it was working before, without any problem, and suddenly, after last HA update it’s stop

9

Thank you, Ildar for your suggestion. I fix one of the problems, openweathermap had a forecast.temperature sensor until last update and now it’s : sensor.openweathermap_temperature. Working on the other one (picture issue)

10

For some reason, this template is stop working( some of the sensors is unavailable

 #################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_precipitation")|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 %}
        {{ 'https://raw.githubusercontent.com/Senexis/Google-Weather-Frog/master/images/wide/' + 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
11

What you got here:

  1. Stack-in-card contains 2 cards - markdown & picture.
  2. Stack-in-card has a card-mod styling.
  3. Markdown shows some contents composed based on some jinja template.
  4. Picture has a static picture.

I suggested you to test with a simple case - stack-in-card containing a markdown with “hello” & a picture. Ofc w/o card-mod.
If you think that a template is wrong - then copy/paste whole “content” into Dev tools → Template & fix possible issues. Could be problems with your sensors.

1 Like
12

Greeting part is fixed
image
Thank you for suggestion, I use markdown card for this part and find where is a problem ( it was a sensor for openweathermap)
Second issue is more complex because of the template and I am not only one who have this problem.

image
image1107×337 16.4 KB

Adaptive Mushroom - #118 by Zenia.
I asked the person who create this code, no answer yet.
Thank you again for your help

13

You definitely have problems with this integration since you have entities “unavailable”, it is not about a particular mushroom or whatever card.

1 Like