Frosty
June 5, 2024, 11:25am
799
what’s wrong with the example you provided?
I have this which I was going to use if and when I added my washing machine.
I think it’s @dimitri.landerloos card if I remember correctly.
type: custom:mushroom-template-card
primary: Dishwasher
secondary: |-
{% if states('input_boolean.dishwasher') == 'on' %}
{% if states('timer.dishwasher_run_time') == 'active' %}
{% set ctd = state_attr('timer.dishwasher_run_time', 'finishes_at') | as_datetime %}
{% set finald = (ctd - now()).total_seconds() | timestamp_custom('%-Hh %-Mm', false) %}
{% set testd = finald.split('h')[0] | int %}
{% if testd == 0 %}
Est. Completion {{ finald.split('h')[1] }}
{% else %}
Est. Completion {{finald}}
{% endif %}
{% else %}
Finished
{% endif %}
{% else %}
{% endif %}
icon: mdi:dishwasher
badge_icon: |-
{% if states('input_boolean.dishwasher') == 'on' %}
mdi:waves
{% else %}
mdi:flag-checkered
{% endif %}
badge_color: |-
{% if states('input_boolean.dishwasher') == 'on'%}
#697fff
{% else %}
#5bc779
{% endif %}
icon_color: |-
{% if states('input_boolean.dishwasher') == 'on' %}
#697fff
{% else %}
#5bc779
{% endif %}
entity: sensor.kitchen_dishwasher_plug_power
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
multiline_secondary: false
card_mod: null
style: |
ha-state-icon {
{% if states('input_boolean.dishwasher') == 'on' %}
animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite; transform-origin: 50% 75%;
{% else %}
{% endif %};
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
@media (prefers-color-scheme: dark) {
ha-card {
width: 285px;
background-color:
{% if states('input_boolean.dishwasher') == 'on' %}
#001f5c
{% else %}
{% endif %};
}
}
@media (prefers-color-scheme: light) {
ha-card {
width: 285px;
background-color:
{% if states('input_boolean.dishwasher') == 'on' %}
#c2d4ff
{% else %}
{% endif %};
}
}
1 Like
paddy0174
June 5, 2024, 11:43am
800
Take a look into the Mushroom Styling Guide, you can find it here:
jimz011
June 5, 2024, 7:57pm
801
I have been searching for hours now but I can’t seem to find the solution. I wonder if anyone could help me.
I use mushroom chips in my setup, and I want a spinning icon. I have tried most examples here using the ha-icon or mushroom-shape-icon elements, but none of them seem to work. I don’t see anyone talking about the actual chips card when implementing the spinning icon, most of you seem to use a mushroom entity card or something in that direction.
I wonder if the chips card is limited in that way? I can make the whole card spin without a problem, but I want to spin just the icon.
Below is the code that I last tried (I have tried tons of other stuff, but none of them seemed to work)
type: custom:mushroom-chips-card
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
animation: spin 1s linear infinite !important;
}
chips:
- type: entity
entity: person.jimmy
tap_action:
action: none
jimz011
June 5, 2024, 8:39pm
803
Thanks, this was it, seems that you must add them to the chip card itself instead of the actual chips themselves.
Many thanks, I can work with this
1 Like
Faecon
June 6, 2024, 9:26am
804
- type: custom:mushroom-template-card
primary: Neen
tap_action:
action: call-service
service: browser_mod.close_popup
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 0px 0px 0px 40px;
}
.: |
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}})
text-align: center;
}
I want the text on my card centered, but this gives me an error… what is the right code ?
place it under .container
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
text-align: center !important;
}
1 Like
Faecon
June 6, 2024, 9:30am
806
are you an AI replyer ? hahahah
Nope! 99% human… Am I wrong?
2 Likes
Frosty
June 6, 2024, 11:39am
808
LiQuid_cOOled:
Nope! 99% human
I am now wondering about the 1% imagining you with some sort of cyborg implant… like an eye that can process code and relay that to your fingers.
doesn’t change color, can’t see why it doesn’t, would like to flash green or red if on and off. And gray if unknown
type: custom:mushroom-template-card
primary: Mushroom10
picture: /local/carport_bil.jpg
entity: switch.irrigation_drivhus_e_d
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
animation: ping 2s infinite;
{% if is_state('switch.irrigation_drivhus_e_d', 'on') %}
box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
{% elif is_state('switch.irrigation_drivhus_e_d', 'off') %}
box-shadow: 0 0 5px 1px rgba(var(--rgb-red), 0.7);
{% else %}
box-shadow: 0 0 5px 1px rgba(var(--rgb-grey), 0.7);
{% endif %}
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-primary-color), 0.7);
}
100% {
box-shadow: 0 0 5px 15px transparent;
}
}
jemtlands
June 7, 2024, 7:11am
810
After the recent 2024.6 update my card doesn’t seem to stick to the screen anymore. This card is meant to stay still at the bottom of the screen, but now it just acts as a normal card.
Any thoughts on how to solve this?
- 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;
}
:host {
--mush-icon-border-radius: 16px;
}
card_mod:
style: |
:host {
z-index: 999;
position: sticky;
position: -webkit-sticky;
bottom: 0;
}
ha-card {
padding-bottom: 20px;
margin: 0px -13px -10px -13px;
border-radius: 0px;
}
.dark-mode ha-card {
background: var(--ha-card-background-dark);
}
.light-mode ha-card {
background: var(--ha-card-background-light);
}
You’ll have to figure out the x-axis
card_mod:
style: |
ha-card {
position: fixed !important;
bottom: 0px ;
z-index: 0;
}
You have defined the ping color in the keyframes
box-shadow: 0 0 5px 1px rgba(var(--rgb-primary-color), 0.7);
change to
@keyframes ping {
0% {
box-shadow: (0 0 5px 1px);
}
100% {
box-shadow: 0 0 5px 15px transparent;
}
jemtlands
June 7, 2024, 7:57am
813
Cant seem to get it to work, could you paste the correct code it in the card mod code.
card_mod:
style: |
:host {
z-index: 999;
position: sticky;
position: -webkit-sticky;
bottom: 0;
}
ha-card {
padding-bottom: 20px;
margin: 0px -13px -10px -13px;
border-radius: 0px;
}
.dark-mode ha-card {
background: var(--ha-card-background-dark);
}
.light-mode ha-card {
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;
}
:host {
--mush-icon-border-radius: 16px;
}
card_mod:
style: |
ha-card {
position: fixed !important;
bottom: 0px ;
z-index: 0;
}
1 Like
jemtlands
June 7, 2024, 8:48am
815
Thanks, now its fixed but i cant seem to get the width right here is a before and after picture.
How can i get the width and bottom padding right?
Before:
After
Guizmos
June 7, 2024, 6:59pm
816
Good morning
I also have a problem fixing my menu since update 2024.6.
Unfortunately the solution above does not work for me.
Either I lose the layout or the menu doesn’t stay fixed.
Does somebody have an idea ?
The part of the code that manages the menu:
card_mod:
style: |
/* Remove styling from top card with chips */
ha-card {
/* Allow pseudo elements to display outside card */
overflow: visible !important;
/* Remove gap at top of card */
margin-top: calc(-1 * var(--mush-chip-spacing, 8px));
/* Remove styling from card */
box-shadow: none;
border: none;
background: none;
padding: var(--mush-chip-spacing, 10px);
transition: all 0s;
}
/* Make card sticky at top of page */
:host {
position: sticky !important;
z-index: 4 !important;
top: var(--header-height) !important;
}
/* Pseudo element for background & other card styling */
ha-card:before {
content: "";
/* Position & size card behind chips */
position: absolute;
top: 0px;
left: 0px;
height: 100%;
/* Adjust width to account for border */
width: calc(100% - 2 * var(--ha-card-border-width, 1px));
/* Position card at back */
z-index: -1;
/* Blur content behind card */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* Adjust opacity of card */
background: rgba(var(--rgb-card-background-color), 0.35);
/* Set styling of card */
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
box-shadow: var(--ha-card-box-shadow);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
}
/* Pseudo element to hide card styling when at top */
1 Like
Test this out and let me know…
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: absolute;
bottom: 5px ;
width: 99%;
border-radius: 0px 0px 50px 50px;
z-index: 2;
}
The code in the solution has the necessary fields under ha-card {, not host:
Test this out
card_mod:
style: |
/* Remove styling from top card with chips */
ha-card {
/* Allow pseudo elements to display outside card */
overflow: visible !important;
position: absolute !important;
z-index: 4 !important;
top: var(--header-height) !important;
/* Remove gap at top of card */
margin-top: calc(-1 * var(--mush-chip-spacing, 8px));
/* Remove styling from card */
box-shadow: none;
border: none;
background: none;
padding: var(--mush-chip-spacing, 10px);
transition: all 0s;
}
/* Pseudo element for background & other card styling */
ha-card:before {
content: "";
/* Position & size card behind chips */
position: absolute;
top: 0px;
left: 0px;
height: 100%;
/* Adjust width to account for border */
width: calc(100% - 2 * var(--ha-card-border-width, 1px));
/* Position card at back */
z-index: -1;
/* Blur content behind card */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* Adjust opacity of card */
background: rgba(var(--rgb-card-background-color), 0.35);
/* Set styling of card */
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
box-shadow: var(--ha-card-box-shadow);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
}
/* Pseudo element to hide card styling when at top */
