Adaptive Mushroom

Thanks for your kind words. You can find the code for all cards on github, but here are some:

Backup card
type: custom:mushroom-template-card
primary: Back-ups
secondary: >-
  {{state_attr('sensor.backup_state', 'backups_in_google_drive')}} back-ups,
  totaal {{state_attr('sensor.backup_state', 'size_in_google_drive')}}

  Vorige: {% if state_attr('sensor.backup_state', 'last_backup') == "Never"
  %}onbekend{% else %}{% set delta = (now().timestamp() -
  as_timestamp(state_attr('sensor.backup_state', 'last_backup')))/86400 %}{% if
  delta < 1 %}vanmorgen{% elif delta < 2 %}gisteren{% else %}{{delta | round(0,
  "floor")}} dagen geleden{% endif %}{% endif %}

  Volgende: {% set delta = (as_timestamp(state_attr('sensor.backup_state',
  'next_backup')) - now().timestamp())/86400 %}{% if delta < 1 %}vannacht{% elif
  delta < 1.5 %}morgen{% else %}over {{delta | round(0, "floor")}} dagen{% endif
  %}
icon: |-
  {% if states('binary_sensor.backups_stale') == "off" %}
    mdi:cloud-check
  {% else %}
    mdi:cloud-question
  {% endif %}
multiline_secondary: true
icon_color: |-
  {% if states('binary_sensor.backups_stale') == "off" %}
    green
  {% else %}
    red
  {% endif %}
tap_action:
  action: navigate
  navigation_path: /cebe7a76_hassio_google_drive_backup

HACS update card: Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1) - #4125 by ArenaCloser

What specific sensors/scripts would you be interested in?

Good Day. I modify a little bit @ArenaCloser frog card and itā€™s look great
image

type: custom:stack-in-card
cards:
  - type: markdown
    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: >
      ### {{ states('input_select.frontend_greeting')}},{{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 {{ states('sensor.time_2')}}. <br/> 
      Temperature today {{states('sensor.openweathermap_forecast_temperature')
      }}Ā°C <br/>  {{states('sensor.openweathermap_condition') }}.
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;
    }

Only one thing I canā€™t figure it out how to do, is how to add navigation to my Weather card?
I tried to add:

            tap_action:
              action: navigate
              navigation_path: weather

but itā€™s not doing anything. Any idea why? Itā€™s work with other cards. Thank you

1 Like

I always add navigation actions through the UI but this is what it then looks like in YAML:

tap_action:
  action: navigate
  navigation_path: /dashboard-view/nieuws

So I guess you may have to add /URL-of-your-dashboard/ in front of the page name.

Thank you for your quick response. I did all this.
What you see in navigation code, this is what I use in all my cads to navigate to the different pages and its working fine, but when I add this code to your card nothing happens.
I now its something with my code, but couldnā€™t figure it out what and where.

Did you check it is in the correct indentation? Otherwise I honestly donā€™t know.

So, what I decided to do for now is added a picture card and itā€™s working fine with navigation:
image

type: custom:stack-in-card
cards:
  - type: markdown
    tap_action:
      action: navigate
      navigation_path: dashboard-experimental-1/weather
    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: >
      ### {{ states('input_select.frontend_greeting')}},{{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: .
    tap_action:
      action: navigate
      navigation_path: weather
    card_mod:
      style: |
        ha-card { 
          background-color: transparent !important;
          picture-color: green !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;
    }

I would like to make this picture transparent, but no luck so far.
Again thank you for your hard work, quick respond and proffecional response.

Slightly hacky suggestion: perhaps upload a transparent image and use that one?

1 Like

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 :man_shrugging:) 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! :sob:

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