Thank you for your answer
Unfortunately, it doesn’t work. I lose the layout of my card and it doesn’t stick to the top
Before
After
That link is using a very similar method I suggested. Below is the code that makes the card sticky in that thread. There has to be another issue if that code is not making the menu static.
ha-card {
z-index:1;
position: fixed;
bottom: 5px;
left: 5px;
width: calc(100% - 10px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
--chip-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.8) !important;
}
}
Hi all
I need some help with my code, im only able to make transparency in the upper part of the card as you can see in the image :
I want all the card with the same the value, can someone help me, im missing something and i cant figure it out what.
The code :
type: custom:swipe-card
slideToClickedSlide: false
parameters:
roundLengths: false
effect: slide
speed: 35
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
autoHeight: true
allowSlidePrev: true
preventClicks: true
spaceBetween: 8
scrollbar: null
hide: false
snapOnRelease: false
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Quarto
picture: /local/bed.png
layout: vertical
icon_color: yellow
tap_action:
action: navigate
navigation_path: /lovelace/quarto
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
picture: /local/temp.png
icon_color: yellow
content: '{{ states(''sensor.153931628258369_indoor_temperature'')}}°C'
- type: template
picture: /local/humidity.png
icon_color: blue
content: '{{ states(''sensor.153931628258369_indoor_humidity'')}}%'
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
position: center;
margin: 0px 0px 0px 0px;
left: 35px;
top: calc(25% - px);
}
.chip-container {
flex-flow: column !important;
}
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.shelly1_76a38e
picture: /local/groupbulb.png
tap_action:
action: toggle
card_mod:
style: |
ha-card {
{% if is_state('light.shelly1_76a38e', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: template
entity: switch.tomada_quarto_socket_1
picture: /local/socket.png
tap_action:
action: toggle
card_mod:
style: |
ha-card {
{% if is_state('switch.tomada_quarto_socket_1', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
margin: 0px 0px 0px 0px;
position: absolute;
right: 4px;
top: calc(25% - 0px);
}
.chip-container {
flex-flow: column !important;
}
}
card_mod: null
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.4);
}
mushroom-card {
background-size: 55px 40px;
}
1 Like
The null is telling you something is wrong
indent style: |
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.4);
}
mushroom-card {
background-size: 55px 40px;
}
This is not a thing
mushroom-card {
background-size: 55px 40px;
}
Its seems to be around the right width, but now its stuck in the middle of the screen instead of sitting at the bottom of the screen.
Try
position: fixed
Can you post your current code?
I managed to fix the position, but now the width on the left side is a little off.
type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-template-card
primary: Home
icon: mdi:home
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Server
icon: mdi:nas
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-server
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Energy
icon: mdi:lightning-bolt-outline
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/energi
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Map
icon: mdi:map-outline
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/map
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
--mush-icon-border-radius: 16px;
}
card_mod:
style: |
ha-card {
position: fixed !important;
bottom: 0px ;
width: 99%;
height: 13%;
padding-right: 0px;
z-index: 0;
}
Add left:-10px;
Adjust positive or negative
Thanks for the help.
This is the final code that worked.
type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-template-card
primary: Home
icon: mdi:home
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Server
icon: mdi:nas
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-server
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Energy
icon: mdi:lightning-bolt-outline
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/energi
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Map
icon: mdi:map-outline
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/map
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
--mush-icon-border-radius: 16px;
}
card_mod:
style: |
ha-card {
position: fixed !important;
bottom: 0px ;
width: 100%;
border-radius: 0px 0px 0px 0px;
height: 13%;
left: -1px;
padding-left: 10px;
z-index: 0;
}
1 Like
it doesn’t work, here is the full code.
If I switch to “fixed” my card does not display correctly but it is fixed well
If I leave it sticky, I keep the good structure but it does not stick
my full code here:
1 Like
Does this code work on multiple size screen or just a phone?
I tested it on both the PC and Android. He can always add @media settings if necessary.
1 Like
Hi.
I’ve been “away” from Home Assistant and it’s updates, been “fixing” some issues, but for some reason all my dashboard is now not aligned?
You can see on the screenshot that the smaller icons of the room cards seem to be “trimming” and that’s unintentional. And that wasn’t like that before and I built them. Now I’ve reviewed and reviewed and nothing.
Might any of your brilliant minds enlighten me what the % is happening? Hahaha. Thanks and have a wonderful sunday.
2 Likes
Hello,
I am trying to get the fan icon to spin using card_mod but I cant seem to get it to work (i’m using exact same code I found on other examples online).
type: custom:mushroom-template-card
entity: climate.thermostat
icon: mdi:fan
icon_color: |-
{% if is_state_attr('climate.thermostat', 'fan_mode', 'off') %}
grey
{% elif is_state_attr('climate.thermostat', 'fan_mode', 'on') %}
blue
{% endif %}
primary: |-
{% if is_state_attr('climate.thermostat', 'fan_mode', 'off') %}
Not Running
{% elif is_state_attr('climate.thermostat', 'fan_mode', 'on') %}
Running
{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace/temperature
secondary: ''
badge_color: ''
badge_icon: ''
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: spin 1s linear infinite;' if is_state_attr('climate.thermostat', 'fan_mode', 'off') }}
}
it should be
ha-state-icon
Still not working 
type: custom:mushroom-template-card
entity: climate.thermostat
icon: mdi:fan
icon_color: |-
{% if is_state_attr('climate.thermostat', 'fan_mode', 'off') %}
grey
{% elif is_state_attr('climate.thermostat', 'fan_mode', 'on') %}
blue
{% endif %}
primary: |-
{% if is_state_attr('climate.thermostat', 'fan_mode', 'off') %}
Not Running
{% elif is_state_attr('climate.thermostat', 'fan_mode', 'on') %}
Running
{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace/temperature
card_mod:
style:
mushroom-shape-icon$: |
ha-state-icon {
{{ '--icon-animation: spin 1s linear infinite;' if is_state_attr('climate.thermostat', 'fan_mode', 'on') }}
}
OK will admit this is more of a guess because I am unsure. @LiQuid_cOOled will know and gladly assist.
card_mod:
style:
mushroom-shape-icon$: |
ha-icon-icon {
{{ iif(is_state_attr('climate.thermostat', 'fan_mode', 'on'), '--icon-animation: spin 1s linear infinite') }}
}
