i think it is likely to do with your z-index: in card-mod. you can try and set your other cards to z-index: 0; and then having your sticky card by z-index: 1? that might work.
I was hoping someone would have just had a nice block of code I could steal ha. I’ve not tried much myself yet, I could never get the positioning right. I don’t like in that example that there’s still a visible space under the bottom bar.
You are right, that fixes the issue! …no matter what I wrote in my previous post (that I am going to delete)
type: history-graph
entities:
- sun.sun
card_mod:
style: |
ha-card {
max-height: calc(100vh - var(--header-height)) !important;
overflow-y: auto !important;
max-width: var(--masonry-column-width, 490px) !important;
}
:host {
position: fixed !important;
z-index: 1 !important;
bottom: 10px !important;
width: 100% !important;
}
Glad to hear it!
i havent played around with a nav bar the the bottom so if you get a good design working let me know! 
I’m really looking for someone who can optimize mine ahaha
1 Like
Nice card! how do you set up your swipe card? if i use swipe card, when i try to swipe in mobile device it always register accidental press…do you get that too?
Nope, it doesn’t happen to me. You can check the code I shared in my post to see what I did.
Frankly, most of the time I have no clue what am I doing but by changing some settings and checking what it does I got it to a reasonable shape. At that point I give up otherwise I would spent entire weekend on that:)
I have tested it on my (iP mini) and my wife’s (iP Max) phones and both had it shaped as you can see so hopefully it will look the same on other devices too.
type: custom:stack-in-card
cards:
- type: custom:swipe-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: null
icon: mdi:sofa
layout: horizontal
icon_color: yellow
- type: custom:mushroom-template-card
primary: null
icon: mdi:bed-king-outline
layout: horizontal
icon_color: red
- type: custom:mushroom-template-card
primary: null
icon: mdi:chef-hat
layout: horizontal
icon_color: green
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: null
icon: mdi:teddy-bear
layout: horizontal
icon_color: blue
- type: custom:mushroom-template-card
primary: null
icon: mdi:flower
layout: horizontal
icon_color: green
- type: custom:mushroom-template-card
primary: null
icon: mdi:shower
layout: horizontal
icon_color: blue
card_mod:
style: |
ha-card {
padding: 12px 12px 30px 12px !important;
margin: -12px -6px -20px !important;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-box-shadow: none;
--chip-border-radius: 10px;
--chip-height: 42px;
--chip-padding: 10px;
max-height: calc(100vh - var(--header-height)) !important;
overflow-y: auto !important;
max-width: var(--masonry-column-width, 490px) !important;
background-color: #002f7a;
}
:host {
position: fixed !important;
z-index: 1 !important;
bottom: 0px !important;
width: 96% !important;
}
I recommend adding this to the last card on the dashboard to allow scrolling down to this last card. otherwise, it will stay hidden behind the nav bar.
card_mod:
style: |
ha-card {
margin: 0px 0px 100px 0px !important;
}
Also please note that the z-index: 1 will place this card over the editing dialog overlaying the Save button. You can scroll through other buttons on the dialog with Tab and then hit Enter to save the changes.
Can you explain me please how you added the icons on the right side of the living room light panel? Do they work like buttons?
Check the code for what I called Simple view card here
Mushroom Cards - Build a beautiful dashboard easily 🍄 - #7920 by eMeF?
Look for this pattern
type: custom:stack-in-card
cards:
- type: custom:mushroom-fan-card
- type: custom:mushroom-chips-card
chips:
- type: entity
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
top: 16px;
width: -webkit-fill-available;
right: 12px;
position: absolute;
}
.chip-container {
right: 0px;
position: absolute;
}
Hope that help
1 Like
Hey just wanted to circle back to you and say that i actually lied (out of ignorance!). There IS a way to get a close button on the popup card. The mushroom back chip works great for this purpose.
type: custom:mushroom-chips-card
chips:
- type: back
So just place this and your other card in a vertical stack card and then use that as your popup instead and voila, you have a back button that closes the popup!
theres one in this thread already i used to use … may have been by rhysb
Or you can create a chip that navigates to the previous page directly as the “back” sometimes requires taping on it multiple times before it actually takes you back.
type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.michal
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-mushroom
content_info: none
Also, you may find the placement of the button in the top part of the dashboard too far when holding your phone with one hand, and then it may come in handy sticking it to the middle of the screen with that code
Click here
type: custom:mushroom-chips-card
chips:
- type: back
alignment: end
card_mod:
style: |
ha-card {
background-color: #002f7a;
max-height: calc(100vh - var(--header-height)) !important;
overflow-y: auto !important;
max-width: var(--masonry-column-width, 490px) !important;
}
:host {
position: fixed !important;
z-index: 1 !important;
bottom: 400px !important;
width: 90% !important;
}
I have found that navigating to a different page with a browser mod popup doesnt actually close the popup. It just navigates to the correct view but doesnt close the popup. That is on android at least.
I have also not experienced the issue you are referring to with the back button requiring multiple presses to close the popup. At least this seems to work fine on android.
You are probably right as I don’t use pop-ups. I reverted to subviews for some reason and the issue may be related to that approach. I think that on subview, when you open a native entity pop-up, then you need to tap back twice to get back…
Custom Media Player Page
- minimalistic design
- designed for dark mode
- can control alexa media players
- vertical volume control
- shuffle mode
- One click music start with Spotcast
- Spotify current playing song and artist name displays at the top
- Song duration: Can forward or backward the song within the bar
- Do not disturb me button for Alexa player
- Designed for Alexa Media Players but can be used with any media players.
type: custom:stack-in-card
square: false
columns: 1
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: null
primary: Office Echo
picture: null
secondary: |
{% if is_state('media_player.office_dot', 'playing') %}
{{ state_attr( "media_player.office_dot", "media_title" ) }} by {{ state_attr( "media_player.office_dot", "media_artist" ) }}
{% else %}
Nothing is playing
{% endif %}
entity: entity.entity
fill_container: false
multiline_secondary: true
layout: horizontal
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 34px !important;
font-weight: bold !important;
margin-left: -15px;
margin-top: 0px;
width: 80px !important;
font-family: Georgia, serif;
text-align: left;
overflow: visible !important;
z-index:1;
text-indent: 10px;
--primary-text-color: rgb(var(--rgb-white));
}
.secondary {
font-size: 16px !important;
--secondary-text-color: var(--white-color);
margin-top: -10px !important;
margin-left: -15px;
width: 350px !important;
font-weight: 900 !important;
text-indent: 10px;
overflow: hidden !important;
}
.: |
ha-card {
box-shadow: none !important;
background-color: transparent;
}
:host {
height: 100px !important;
--mush-icon-size: 100px;
background: transparent !important;
margin-left: -1px !important;
margin-top: 0px !important;
margin-right: Auto;
}
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:volume-high
icon_color: white
primary: >
{{ (state_attr('media_player.office_dot', 'volume_level') |
float(0) / 1 * 100) | round(0) }} %
picture: null
secondary: null
entity: entity.entity
fill_container: false
multiline_secondary: true
layout: horizontal
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 34px !important;
font-weight: bold !important;
margin-left: -20px;
margin-top: 0px;
width: 80px !important;
text-align: left;
overflow: visible !important;
text-indent: 10px;
--primary-text-color: rgb(var(--rgb-white));
}
.: |
ha-card {
box-shadow: none !important;
background-color: transparent;
} mushroom-shape-icon {
--shape-color: none !important; }
:host {
background: transparent !important;
margin-left: -20px !important;
margin-top: 0px !important;
margin-top: 0px !important;
margin-right: Auto;
--mush-icon-size: 70px;
}
- type: grid
columns: 2
square: false
cards:
- type: custom:mushroom-template-card
icon: null
icon_color: null
primary: null
picture: /local/png/echo.png
secondary: null
entity: group.bedroom_lights_and_switches
fill_container: false
multiline_secondary: true
layout: horizontal
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
position: relative;
width: 350px !important;
left: -30px;
top: 20px;
border: 0px solid
.: |
ha-card {
box-shadow: none !important;
background-color: transparent;
}
:host {
height: auto;
--mush-icon-size: 150px;
background: transparent !important;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: custom:my-slider-v2
entity: media_player.office_dot
vertical: true
showMin: true
styles:
card:
- height: 120px
container:
- width: 140%
- height: 140%
- position: relative
- overflow: hidden
- border-radius: 70px
track:
- width: 100%
- height: 103%
- position: relative
- background: var(--card-background-color)
progress:
- height: 100%
- background: var(--paper-item-icon-active-color)
- position: absolute
- width: 0.00%
thumb:
- height: 100%
- background: white
- position: absolute
- right: 0px
- width: 42px
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
position: relative;
width: 350px !important;
left: -50px;
top: 20px;
border: 0px solid
.: |
ha-card {
box-shadow: none !important;
background-color: transparent;
} :host {
height: auto;
--mush-icon-size: 150px;
background: transparent !important;
margin-left: 120px !important;
margin-top: 0px !important;
} mushroom-shape-icon {
--shape-color: none !important;
}
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: grid
columns: 3
square: false
cards:
- type: custom:mushroom-template-card
secondary: null
primary: null
entity: entity.entity
icon: mdi:play
icon_color: black
fill_container: false
multiline_secondary: false
tap_action:
action: call-service
service: spotcast.start
data:
device_name: Office Dot
force_playback: true
layout: vertical
picture: null
card_mod:
style:
mushroom-shape-icon$: |
.shape {
position: relative;
border-radius: 0px !important;
--shape-color: none !important;
--mush-icon-size: 70px;
}
.: |
ha-card {
border-radius: 15px;
--secondary-text-color: grey;
box-shadow: none !important;
background: rgba(255, 255, 255, 2.85);
height: 90px !important;
width: 100px !important;
}
:host {
border-radius: 15px;
margin-left: 5px !important;
margin-right: 0px !important;
}
- type: custom:mushroom-template-card
secondary: null
primary: null
entity: switch.office_dot_do_not_disturb_switch
icon: mdi:shuffle
icon_color: black
fill_container: false
multiline_secondary: false
tap_action:
action: call-service
service: media_player.play_media
target:
entity_id: media_player.office_dot
data:
media_content_type: custom
media_content_id: turn on shuffle mode
double_tap_action:
action: call-service
service: media_player.play_media
target:
entity_id: media_player.office_dot
data:
media_content_type: custom
media_content_id: turn off shuffle mode
layout: vertical
picture: null
card_mod:
style:
mushroom-shape-icon$: |
.shape {
position: relative;
border-radius: 0px !important;
--shape-color: none !important;
--mush-icon-size: 70px;
}
.: |
ha-card {
{% if state_attr('media_player.office_dot', 'shuffle') == true %}
background-color: rgba(250,130,43, 0.9);
box-shadow: 0px 0px 15px 10px rgba(176,56,8) !important;
{% else%}
background: rgba(255, 255, 255, 2.85);
{% endif %}
border-radius: 15px;
--secondary-text-color: grey;
box-shadow: none !important;
height: 90px !important;
width: 100px !important;
}
:host {
border-radius: 15px;
margin-left: 5px !important;
margin-right: 5px !important;
}
- type: custom:mushroom-template-card
secondary: null
primary: null
entity: switch.office_dot_do_not_disturb_switch
icon: mdi:minus-circle-off
icon_color: black
fill_container: false
multiline_secondary: false
tap_action:
action: call-service
service: switch.toggle
target:
entity_id: switch.office_dot_do_not_disturb_switch
layout: vertical
picture: null
card_mod:
style:
mushroom-shape-icon$: |
.shape {
position: relative;
border-radius: 0px !important;
--shape-color: none !important;
--mush-icon-size: 70px;
}
.: |
ha-card {
{% if is_state('switch.office_dot_do_not_disturb_switch', 'on') %}
background-color: rgba(250,130,43, 0.9);
box-shadow: 0px 0px 15px 10px rgba(176,56,8) !important;
{% else%}
background: rgba(255, 255, 255, 2.85);
{% endif %}
border-radius: 15px;
--secondary-text-color: grey;
box-shadow: none !important;
height: 90px !important;
width: 100px !important;
}
:host {
border-radius: 15px;
margin-left: 5px !important;
margin-right: 5px !important;
}
card_mod:
style: |
ha-card {
background: none;
margin-top: 20px;
box-shadow: none;
height: auto; }
:host {
background-color: none;
--mush-icon-size: 70px;
margin-left: 40px !important;
margin-right: 40px !important;
margin-top: 40px !important;
border-radius: 0px;
}
- type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: grid
columns: 1
square: false
cards:
- type: conditional
conditions:
- entity: media_player.spotify_berkan_sezer
state: playing
card:
entity: media_player.office_dot
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{% if is_state(config.entity, 'playing') %}
--paper-progress-container-color: amber ;
{% endif %}
}
.: |
ha-card {
background: white;
width: 100%;
align-self: center;
margin: 0px auto auto;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: orange;
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
background-color: white !important;
border-radius: 15px !important;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
height: auto; }
:host {
background-color: none;
--mush-icon-size: 70px;
margin-top: 80px !important;
margin-left: -0px !important;
margin-right: 0px !important;
border-radius: 0px;
}
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: grid
columns: 1
square: false
cards:
- type: conditional
conditions:
- entity: media_player.spotify_berkan_sezer
state: playing
card:
type: custom:mushroom-media-player-card
entity: media_player.office_dot
media_controls:
- play_pause_stop
- next
- previous
volume_controls: []
primary_info: none
secondary_info: none
icon_type: none
card_mod:
style:
mushroom-media-player-media-control$:
mushroom-button:nth-child(2):
$: |
ha-icon {
--control-icon-size: 60px;
}
.: |
ha-card {
background-color: transparent;
--secondary-text-color: grey;
box-shadow: none !important;
height: 100px !important;
}
card_mod:
style: |
ha-card {
background: none;
margin-top: 20px;
box-shadow: none;
height: auto; }
:host {
background-color: transparent;
--mush-icon-size: 70px;
margin-left: 40px !important;
margin-right: 40px !important;
border-radius: 0px;
}
card_mod:
style: |
ha-card {
background: none;
margin-top: 0px;
box-shadow: none;
height: auto;
card_mod:
style: |
ha-card {
background: black;
margin-top: 0px;
box-shadow: none;
height: auto;
Note: Alexa Media Players integration updates the media players very laggy. You need to have an automation necessary to update the players in every 5 seconds.
Here is the automation :
alias: Spotify - 5s Update
description: ""
trigger:
- platform: time_pattern
seconds: /5
condition: []
action:
- service: homeassistant.update_entity
data: {}
target:
entity_id:
- media_player.bedroom_echo
- media_player.office_dot
- media_player.kitchen_dot
- media_player.salon_dot
- media_player.bathroom_dot
mode: single
My Advice use it with browser mode.
5 Likes
Try this card mod code.
card_mod:
style:
ha-dialog$: |
div.mdc-dialog__scrim {
-webkit-backdrop-filter: blur(6px) !important;
}
.: |
ha-dialog {
--vertical-align-dialog: center !important;
}
Please tell me, I want to add information about the leakage and the presence of water in the tank, how to make it better and more beautiful, can you suggest options please?
water availability sensor: binary_sensor.voda_v_butilke_polivalka
Leak sensor: binary_sensor.datchik_protechki_polivalka
- type: custom:mushroom-template-card
primary: Plant
secondary: information here
icon: mdi:flower
style: |
ha-card {
--card-secondary-font-size: 101% !important;
--card-primary-font-size: 103% !important;
}
icon_color: >
{% if is_state('light.yeelink_color3_5d45_light','on') %} blue {%else%} {%
endif %}
tap_action:
action: navigate
navigation_path: /lovelace/растения
yes its work only 1 card not, well I often don’t see my mistake because then it just didn’t come in