Adaptive Mushroom

[eric1905]

Hello @ArenaCloser

this design looks awsome. I tried to use it as well and used your instalation instructions. But even without adding any cards it is looking broken, just with the decluttering cards and the standard view you provided in your github page.

I have the following errors:

1. When I enter the dashboard nothing is visible. I can see something after clicking on edit - raw configuration and then press X to close it. Or after editing the dashboard title. Before everything is black. This happens again after I go to another dashboard and go back to the dashboard using adaptive mushroom. This happens on desktop and companion app.

2. In the UI editor the footer is broken.

3. In the companion app the footer is not displayed. Instead it seems to show the “desktop view”

Regarding 1:
The whole screen is black

Regarding 2:

Regarding 3:

[ArenaCloser]

@zbuh @gh0st125 On the sticky bottom navigation bar, IIRC it only sticks to the bottom if there are enough cards to fill the screen. Does that help?

@eric1905 Strange, I will have to try with a new dashboard to see if I can reproduce this. Though it wouldn’t surprise me if things have changed with the new HA OS versions (I’m still on 2023.7.3 ) and thus things have stopped working. Let me investigate a little. On what OS version are you? I was planning on upgrading anyway soon, so when I do I will definitely update the whole thing.

[Bonzenpaule]

Just found the awnser to the question by myself. The css code for card-mod / the “frog variable” is inside the adaptive-mushroom Themes yaml file (/homeassistant/themes/adaptive-mushroom/adaptive-mushroom.yaml)

I could add another line ( frog-rgb-cloudy-night: 138, 145, 204) and now it works.

[ArenaCloser]

@Bonzenpaule

Could you please help me understand how it works and how I could add another state to the sensor?

The frog card uses several sensors that I’ve put in configuration.yaml.

The status is set according to a template that looks at the state of my weather integration(s). The location is set randomly every night. Based on the weather status and frog location, the image is set. If you were to change the location from creek to city for example, the image would change immediately. If you’d like to add your own states, you should edit these template sensors.

As to the colors of the card, they are indeed set in the theme

P.S.: if you want to share your dashboard, please do! I’d love to see it.

[Bonzenpaule]

Thanks for your awnser! Sure I will share my dashboard.
I put together a few sceenshots. It’s still Work in Progress but I’m fairly happy with my progress since I started using homeassistant just 2 month ago.
Here is a link: https://photos.app.goo.gl/iPaoGud6ZKtgUk6TA

Again, it’s still work in progess. I need to get every card in the same style and for example fix the chip-background in darkmode on desktop (first screenshot).

I decided to put your code for the froggy template sensors in helpers since I like the concept of helpers. It’s the last screenshot.

But… as far as I can tell… Tinkering with homeassistant never stops and is never finished

[eric1905]

I am currently on 2024.2.2

I will look forward if you can give me some info if you can reproduce it. Thank you for your answer

Edit: issue #1 was related to the visibility. It seems like i did something wrong. So i removed the whole visibile: -user: and now I can see it directly.

Issue #2 is related to the grid layout. I added: “. footer footer footer footer .”
to the grid-template-areas

    layout:
      grid-template-columns: 0em 74px 30% 30% 30% auto
      grid-template-rows: grid-title-row-height auto auto auto
      grid-gap: 0.5em
      grid-template-areas: |
        ". . title title people ."
        ". . quickinfo quickinfo . ."
        ". nav favorites lights weather ."
        ". nav favorites plugs weather ."
        ". footer footer footer footer ."
      mediaquery:
        '(max-width: 600px)':
          grid-template-columns: 3% 94% 3%
          grid-template-rows: auto
          grid-gap: 0em
          grid-template-areas: |
            ". title ."
            ". people ."
            ". quickinfo . "
            ". favorites ."
            ". lights ."
            ". plugs ."
            ". weather ."
            "footer footer footer"

Issue #3 is related to:
view_layout:
show:
mediaquery: “(max-width: 400px)”

This was too small. I had to change it to 600px.

Is there any possibility to show the footer always on mobile? Not just when you scroll to the end?

[ArenaCloser]

Great to hear you managed to fix the issues. Also good to know that for #3 the max-width of 400 is too small for a large phone (I presume).

@eric1905

Is there any possibility to show the footer always on mobile? Not just when you scroll to the end?

The footer should be always visible on the bottom of the screen, even if you’re scrolled at the top. So if you don’t see it then there must be something wrong with the sticky part of the footer (card mod CSS). For me it works fine but maybe things have changed since 2023.7. I hope to upgrade to 2024.2 this week and will let you know if things break.

[kvanluijtelaar (Kevin van Luijtelaar)]

Thanks for sharing your code, i’m playing around with your code and I cannot find where you get this ios:nlziet-2 icon from. Could you help me? could you also perhaps share your fapro: icons?

[eric1905]

I am Not able to fix my Footer until now. But i am Not very experienced with css

[kvanluijtelaar (Kevin van Luijtelaar)]

I had the same issue with the footer but adding this solved the issue:

card_mod:
  style: |


    :host {
      z-index: 4;
      position: sticky !important;
      position: -webkit-sticky;
      bottom: 0;
    }
    ha-card {    
      background: rgb(var(--cstm-rgb-bottom-nav));
      box-shadow: none;
      padding-bottom: 15px;
      margin: 0px -4px -8px;
      border-radius: 0px;
    }
view_layout:
  grid-area: footer
  show:
    mediaquery: '(max-width: 400px)'

In your case it should be 600px then.

And I think you need to change

          grid-template-columns: 3% 94% 3%
          grid-template-rows: auto
          grid-gap: 0em
          grid-template-areas: |
            ". title ."
            ". people ."
            ". quickinfo . "
            ". favorites ."
            ". lights ."
            ". plugs ."
            ". weather ."
            "footer footer footer"

into this:

          grid-template-columns: 3% 94% 3%
          grid-template-rows: auto
          grid-gap: 0em
          grid-template-areas: |
            ". title ."
            ". people ."
            ". quickinfo . "
            ". favorites ."
            ". lights ."
            ". plugs ."
            ". weather ."
            ". footer ."

Not sure about that.

[eric1905]

Unfortunately this didn’t fix it

[kvanluijtelaar (Kevin van Luijtelaar)]

could you share the code?? This way it’s easier to see what is wrong.

[eric1905]

  mediaquery:
    "(max-width: 600px)":
      grid-template-columns: 3% 94% 3%
      grid-template-rows: auto
      grid-gap: 0em
      grid-template-areas: |
        ". title ."
        ". people ."
        ". quickinfo . "
        ". wichtige_anzeigen . "
        ". favorites ."
        ". lights ."
        ". plugs ."
        ". weather ."
        ". footer ."

  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:decluttering-card
        template: bottom-nav
        variables:
          - dashboard-name: lovelace
          - active-view: home
    card_mod:
      style: >
        # The sticky position doesn't work with Decluttering card, so you
        have to add the CSS here

        # If you don't use the UI you can use YAML anchors instead

        :host {
          z-index: 4;
          position: sticky !important;
          position: -webkit-sticky;
          bottom: 0;
        }

        ha-card {    
          background: rgb(var(--cstm-rgb-bottom-nav));
          box-shadow: none;
          padding-bottom: 15px;
          margin: 0px -4px -8px;
          border-radius: 0px;
        }
    view_layout:
      grid-area: footer
      show:
        mediaquery: "(max-width: 600px)"

[kvanluijtelaar (Kevin van Luijtelaar)]

I see you have the same issue I had.

You need to remove the below lines… as the blow CSS is not applied now.

# The sticky position doesn't work with Decluttering card, so you
        have to add the CSS here

        # If you don't use the UI you can use YAML anchors instead

[eric1905]

Thank you. That helped. After removing the comment it IS now sticky

[gh0st125]

is it always sticky for you at the bottom of the screen? For me, it’s only sticky when there are enough cards to reach the bottom, otherwise it’s only below the last card.

Here is what it looks like with one card, which doesn’t reach the bottom:

here is my code:
(I additionaly have a custom media player card floating on the top of the bottom navigation when spotify is playing, stacked inside a stack-in-card with the bottom nav card)

- type: custom:stack-in-card
  cards:
    - type: conditional
      conditions:
        - condition: or
          conditions:
            - condition: state
              entity: media_player.spotify
              state: playing
            - condition: state
              entity: media_player.spotify
              state: paused
            - condition: state
              entity: media_player.spotify
              state: buffering
            - condition: state
              entity: media_player.spotify
              state: 'on'
      card:
        type: custom:stack-in-card
        cards:
          - type: custom:decluttering-card
            template: mini-media-spotify
        card_mod:
          style: |
            :host {    
              --ha-card-border-radius: 14px 14px 0 0;
              --ha-card-box-shadow: none;
            }
    - type: custom:stack-in-card
      mode: horizontal
      cards:
        - type: custom:decluttering-card
          template: bottom-nav
          variables:
            - dashboard-name: adaptive-mr
            - active-view: media
      card_mod:
        style: |
          ha-card {    
            background: rgb(var(--cstm-rgb-bottom-nav));
            box-shadow: none;
            border-radius: 0px;
          }
  card_mod:
    style: |
      :host {
        z-index: 1;
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        width: calc(100% - 17px);
      }
      ha-card {    
        background: rgb(var(--cstm-rgb-bottom-nav));
        box-shadow: none;
        padding-bottom: 15px;
        margin: 0px -4px -8px;
        border-radius: 14px 14px 0 0;
      }
  view_layout:
    grid-area: footer
    show:
      mediaquery: '(max-width: 800px)'

[eric1905]

Yes. For me as well

I guess you have to define a min heigth of that card

[ArenaCloser]

@kvanluijtelaar

You need to remove the below lines… as the blow CSS is not applied now.

Thanks for solving that issue!

@gh0st125 you could add a gap-card below the media player cards, it8s an invisible card that adds height to the layout. I think it comes standard with the layout-card that you already have installed. Define a height for it (idk, maybe 2000px) and the sticky footer should work.

[kvanluijtelaar (Kevin van Luijtelaar)]

you’re welcome, it seemed the CSS is commented with those lines. So removing them makes the footer sticky again

[ArenaCloser]

I updated my HA to 2024.2.5, and also updated Mushroom, button-card and card-mod. Luckily there was little to no damage to the dashboard. I’ve updated the github to reflect the changes. I’ve also added the code for my weather/news, automations and system/settings page.