Hmm weird. Maybe its the theme. I use minimalist.
When we solved the issue he just didnt have card mod installed. Do you have card mod installed from Hacs?
Thank you for the reply, I eventually figured it out. I was missing a few cards and card mod was one of them 
I have an number card which I use to determine how long to have the water heater on. I have two questions:
- Is it possible to have the slider change colour, as I slide instead of when I stop sliding (as happens with the code below.
- Using the code below, when I select 5 minutes, the slider is red, instead of what I would expect would be blue - any advice on how to correct that?
type: custom:mushroom-number-card
entity: input_number.hot_water_timer
icon: mdi:timer-outline
layout: horizontal
fill_container: false
name: Timer
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if states(config.entity) == 'on' %}
outline: red 1.5px solid;
{% else %}
outline: var(--disabled-text-color) 1.5px solid;
{% endif %}
--icon-color: red !important;
--icon-color-disabled: var(--disabled-text-color) !important;
--shape-color-disabled: var(--primary-background-color) !important;
--shape-color: var(--primary-background-color) !important;
}
mushroom-number-value-control$: |
mushroom-slider {
{% if states(config.entity) <= '10.0' %}
--main-color: blue !important;
{% elif states(config.entity) <= '20.0' %}
--main-color: orange !important;
{% elif states(config.entity) <= '40.0' %}
--main-color: purple !important;
{% elif states(config.entity) <= '60.0' %}
--main-color: red !important;
{% else %}
--main-color: grey !important;
{% endif %}
--bg-color: var(--disabled-text-color) !important;
}
Thanks in advance
To fix your issue with the color not being as you expected do this:
{% if states(config.entity) | float <= 10 %}
Instead of what you are doing now. What you are doing now is comparing a float to a string is 5 <= '10.0'? You tell me ?
So just compare a float to a float
I have added | float just for safety but shouldnt actually be required.
In terms of changing color as you slide the answer is easy. No that is not possible with the mushroom sliders and card mod.
Hey,
How can i change the color of the icon on a template card based on the light bulb color?
Like " Use light color " option on the mushroom light card.
Edit
Found it
{{ state_attr('light.your_light', 'rgb_color') }}
Hi all, I’ve been playing around with trying to modify the margins of the mushroom title card without any luck. Is this possible? seems like card mod is not able to be used with mushroom titles?
Next time post your code like i have please.
But you can just use ha-card or :host to achieve this.
ha-card
type: custom:mushroom-title-card
title: Hello, {{ user }} !
card_mod:
style: |
ha-card {
margin-right: 200px;
margin-bottom: -40px;
margin-top: -40px;
margin-left: -12px;
}
:host (!important is required.)
type: custom:mushroom-title-card
title: Hello, {{ user }} !
card_mod:
style: |
:host {
margin-right: 200px !important;
margin-bottom: -40px !important;
margin-top: -40px !important;
margin-left: -12px !important;
}
And, to post it like that, use the </> button.
Screen shots take us a lot of work to try to duplicate/test. When, we can just copy out of a code paste to test.
Btw with your post helped me figure out you can use an rgba value of the light color in card mod even easier than i previously thought.
rgba{{ state_attr('light.bedroom_lights', 'rgb_color') + (0.2,)}}
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon_color: '{{ state_attr(''light.bedroom_lights'', ''rgb_color'') }}'
icon: mdi:home
card_mod:
style: |
ha-card {
background-color: rgba{{ state_attr('light.bedroom_lights', 'rgb_color') + (0.2,)}};
}
Just adjust the 0.2 value to your desired alpha value
Way easier than i previously thought…
FYI the , after the 0.2 is required and not a mistake. The rgb_color value you get is a tuple, so to append anything to it needs to be a tuple as well, you can force jinja to see it as a tuple with the , otherwise its just seen as an int.
4 Likes
I’m happy that i helped, i was trying to create this light card.
1 Like
Hey Mushroom fans
Just sharing my updated google nest hub home dash - it has bee casting to my nest hub displays and working well for 4mnths now.
This weekend i updated the dash to include the swipe card - swipe cards in action - which lets me hide the weather forecast under the clock and enjoy an excellent media gallery experience.
As ever, thanks to everyone for contributing to this forum
type: grid
columns: 1
square: false
cards:
- type: custom:swipe-card
card_width: auto
start_card: 1
parameters:
slidesPerView: 1
spaceBetween: 0
grabCursor: true
followFinger: true
pagination:
type: bullets
color: white
cards:
- type: custom:clock-weather-card
entity: weather.openweathermap
sun_entity: sun.sun
temperature_sensor: sensor.openweathermap_temperature
weather_icon_type: fill
animated_icon: true
forecast_days: 0
locale: an-GB
fill: true
time_format: 12
date_pattern: dd MMMM
hide_today_section: false
hide_forecast_section: true
hide_clock: false
hide_date: false
hourly_forecast: false
use_browser_time: true
- type: custom:clock-weather-card
entity: weather.openweathermap
hide_forecast_section: false
hide_date: false
animated_icon: true
hide_today_section: true
weather_icon_type: line
forecast_days: 4
9 Likes
How can I add a condition map appearance animation?
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-light-card
entity: light.bolshaya_group
name: Большая
show_brightness_control: true
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.climate_bolshaya_temperature
icon_color: orange
card_mod:
style: |
ha-card {
border: none;
--text-color: orange;
--chip-font-size: 12px;
}
- type: entity
entity: sensor.climate_bolshaya_humidity
icon_color: orange
card_mod:
style: |
ha-card {
border: none;
--text-color: orange;
--chip-font-size: 12px;
}
- type: template
entity: binary_sensor.open_door_bolshaya_contact
icon: |-
{% if is_state('binary_sensor.open_door_bolshaya_contact', 'off') %}
mdi:door-closed
{% else %}
mdi:door-open
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.open_door_bolshaya_contact', 'off') %}
blue
{% else %}
purple
{% endif %}
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: none
card_mod:
style: |-
{% if is_state('binary_sensor.open_door_bolshaya_contact', 'on') %}
@keyframes blink {
50% { opacity: 0; }
}
ha-card {
border: none;
animation: blink 1s ease infinite;
}
{% else %}
ha-card {
border: none;
}
{% endif %}
- type: template
entity: binary_sensor.open_window_bolshaya1_contact
icon: >-
{% if is_state('binary_sensor.open_window_bolshaya1_contact', 'off')
%}
mdi:window-closed-variant
{% else %}
mdi:window-open-variant
{% endif %}
icon_color: >-
{% if is_state('binary_sensor.open_window_bolshaya1_contact', 'off')
%}
blue
{% else %}
purple
{% endif %}
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: none
card_mod:
style: >-
{% if is_state('binary_sensor.open_window_bolshaya1_contact', 'on')
%}
@keyframes blink {
50% { opacity: 0; }
}
ha-card {
border: none;
animation: blink 1s ease infinite;
}
{% else %}
ha-card {
border: none;
}
{% endif %}
- type: template
entity: binary_sensor.open_window_bolshaya2_contact
icon: >-
{% if is_state('binary_sensor.open_window_bolshaya2_contact', 'off')
%}
mdi:window-closed-variant
{% else %}
mdi:window-open-variant
{% endif %}
icon_color: >-
{% if is_state('binary_sensor.open_window_bolshaya2_contact', 'off')
%}
blue
{% else %}
purple
{% endif %}
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: none
card_mod:
style: >-
{% if is_state('binary_sensor.open_window_bolshaya2_contact', 'on')
%}
@keyframes blink {
50% { opacity: 0; }
}
ha-card {
border: none;
animation: blink 1s ease infinite;
}
{% else %}
ha-card {
border: none;
}
{% endif %}
- type: template
entity: input_boolean.bolshaya_light_ui_toggle
alignment: right
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
icon_color: |-
{% if is_state('input_boolean.bolshaya_light_ui_toggle', 'off') %}
#d8a159
{% else %}
{% endif %}
double_tap_action:
action: none
tap_action:
action: toggle
hold_action:
action: none
card_mod:
style: |
ha-card {
border: none;
}
- type: conditional
conditions:
- entity: input_boolean.bolshaya_light_ui_toggle
state: 'on'
card:
type: horizontal-stack
cards:
- type: custom:my-slider-v2
entity: light.bolshaya
allowTapping: true
styles:
card:
- height: 42px
container:
- width: 100%
- height: 100%
- position: relative
- overflow: hidden
- border-radius: 8px
track:
- width: 100%
- height: 100%
- position: relative
- background: |
[[[
if (entity.state == "on") return "#493416";
else return "#2C2C2C";
]]]
progress:
- height: 100%
- background: '#ff9800'
- position: absolute
thumb:
- background: none
card_mod:
style: |
ha-card {
border: none;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
- type: custom:my-slider-v2
entity: light.bolshaya_dop
allowTapping: true
styles:
card:
- height: 42px
container:
- width: 100%
- height: 100%
- position: relative
- overflow: hidden
- border-radius: 8px
track:
- width: 100%
- height: 100%
- position: relative
- background: |
[[[
if (entity.state == "on") return "#493416";
else return "#2C2C2C";
]]]
progress:
- height: 100%
- background: '#ff9800'
- position: absolute
thumb:
- background: none
card_mod:
style: |
ha-card {
border: none;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
card_mod:
style: |
ha-card {
opacity: 90%;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.66);
margin-bottom: 10px;
}
I’ve tried to get the washing machine animation as part of a grid. Unfortunately I am not able to get the icon to be in the center where you would expect it to be. Any ideas?
type: custom:mod-card
card_mod:
style:
hui-grid-card$: |
div#root {
grid-template-columns: 25% 75%;
}
card:
square: false
columns: 2
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: orange
card_mod:
style: |
ha-state-icon {
{{ 'animation: shake 400ms ease-in-out infinite;' if not is_state('sensor.wasmachine_washer_job_state', 'none') }}
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
- type: custom:mushroom-template-card
fill_container: true
icon: mdi:washing-machine
icon_color: orange
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
{{ 'animation: spin 1s linear infinite;;' if not is_state('sensor.wasmachine_washer_job_state', 'none') }}
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
card_mod:
style: |
ha-card {
height: 93px;
}
- type: history-graph
show_names: false
hours_to_show: 3
entities:
- entity: sensor.wasmachine_washer_job_state
thanks @dimitri.landerloos - that makes sense! Although, why does it work as expected for the other thresholds? Or is that just by chance?
By chance because sometimes 10 <= ‘10.0’
Int’s (and floats) and Str’s are comparable but not in the way you would expect. I would just stay away from it
Try like this:
type: custom:mod-card
card_mod:
style:
hui-grid-card$: |
div#root {
grid-template-columns: 25% 75%;
}
card:
square: false
columns: 2
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: orange
card_mod:
style: |
ha-state-icon {
{{ 'animation: shake 400ms ease-in-out infinite;' if not is_state('sensor.wasmachine_washer_job_state', 'none') }}
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
ha-card {
height: 93px !important;
right: -13%;
}
- type: custom:mushroom-template-card
fill_container: true
icon: mdi:washing-machine
icon_color: orange
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
ha-card {
top: -93px;
right: -13%;
height: 93px !important;
}
ha-state-icon {
{{ 'animation: spin 1s linear infinite;;' if not is_state('sensor.wasmachine_washer_job_state', 'none') }}
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
card_mod:
style: |
ha-card {
height: 93px;
}
- type: history-graph
show_names: false
hours_to_show: 3
entities:
- entity: sensor.wasmachine_washer_job_state
1 Like
It works! Hero!
How do I remove the box shadow from the card on the right?
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 5fr 1fr
grid-template-areas: |
"one two"
cards:
- type: custom:mushroom-template-card
view_layout:
grid-area: one
entity: binary_sensor.internet
icon: mdi:web
icon_color: green
primary: Internet
secondary: online
card_mod:
style: |
ha-card {
/* Remove default card styling */
background: none;
box-shadow: none;
border-width: 0;
padding: 0px !important;
}
- type: custom:stack-in-card
view_layout:
grid-area: two
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.speedtest_download
max: 550
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 85%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
legend:
show: false
chart:
height: 90
card_mod:
style: |
ha-card {
margin-top: -8px;
/* Remove default card styling */
background: none;
box-shadow: none;
border-width: 0;
padding: 0px !important;
}
- type: custom:mushroom-template-card
entity: sensor.speedtest_download
primary: '453'
secondary: mbps
layout: vertical
card_mod:
style: |
ha-card {
--card-primary-font-size: .8rem;
--card-secondary-font-size: .7rem;
margin-top: -38px;
/* Remove default card styling */
background: none;
box-shadow: none;
border-width: 0;
padding: 0px !important;
}
1 Like