would you mind to share the code for the „chips“ in the top right corner?
thanks!
Sure … that is:
square: false
columns: 2
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.alle_lampen
icon: |2
{% set state=expand(states.person|selectattr('state','equalto','home'))|list|length %}
{% if state > 0 %}
fapro:home
{% else %}
fapro:home-blank
{% endif %}
tap_action:
action: navigate
navigation_path: familie
card_mod:
style: |
ha-card:after {
content: "{{ expand(states.person|selectattr('state','equalto','home'))|list|length }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
alignment: start
card_mod:
style:
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-right: 8px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.alle_lampen
icon: |2
{% set state=expand(states.person|selectattr('state','!=','home'))|list|length %}
{% if state > 0 %}
fapro:home-blank
{% else %}
fapro:home-blank
{% endif %}
tap_action:
action: navigate
navigation_path: familie
card_mod:
style: |
ha-card:after {
content: "{{ expand(states.person|selectattr('state','!=','home'))|list|length }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
- type: template
icon: mdi:account-tie-voice
tap_action:
action: assist
pipeline_id: preferred
start_listening: true
hold_action:
action: assist
pipeline_id: preferred
start_listening: true
alignment: end
card_mod:
style:
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-right: 8px;
}
1 Like
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:
-
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.
-
In the UI editor the footer is broken.
-
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:
@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.
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. 
1 Like
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.
1 Like
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 
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?
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).
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.
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?
I am Not able to fix my Footer until now. But i am Not very experienced with css
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.
Unfortunately this didn’t fix it
could you share the code?? This way it’s easier to see what is wrong.
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)"
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
2 Likes
Thank you. That helped. After removing the comment it IS now sticky
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)'
Yes. For me as well
I guess you have to define a min heigth of that card
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.