I see. You can disable the pointer events for the slider like this:
type: custom:mushroom-number-card
entity: input_number.dummy_fan
card_mod:
style:
mushroom-number-value-control$: |
mushroom-slider {
pointer-events: none;
}
Great Job rhysb
I hope one day do something like that…
this worked perfectly, thx a lot!
Hello everybody,
How i can change the background-color of the icon?
This is the code
type: custom:stack-in-card
mode: horizontal
style: |
ha-card {
background: #EBEBEB;
box-shadow: 3px 3px 2px #616A6B
}
cards:
- type: custom:mushroom-light-card
entity: light.controller_rgbw_f4f553
hold_action:
action: navigate
navigation_path: quarto-marco-and-fatima
style: |
ha-card {
width: 120px;
border: none;
}
- type: custom:mushroom-light-card
entity: light.leds_armario
style: |
ha-card {
border: none;
}
- type: custom:mushroom-media-player-card
entity: media_player.lg_webos_tv_9496
hold_action:
action: navigate
navigation_path: sala
style: |
ha-card {
border: none;
}
and another question, how i can add one picture instead the icon?
picture: /local/icons/cooking.png
like that?
Thanks
hey,
the easiest way is to use a mushroom-template card instead of a light card,
there you can set the icon color as you want even with stuff like:
{% if is_state('binary_sensor.motionsensor2_aqara_occupancy','on') %}
green
{% endif %}
there is also a field called “Picture (will replace the icon)” in the template one, this should do the trick
Oh, great! I see, you put the title card into a mod-card 
This is my final result:
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Wohnzimmer
card_mod:
style:
mushroom-title-card$: |
.title {
--title-font-size: 20px;
--primary-text-color: rgb(var(--rgb-grey));
}
.header {
--title-padding: 10px;
}
Hey @rhysb, do you have in mind how to recreate this card?
I’m trying with stack in card to merge a light card and a slider-button-card but without solutions 
custom:mushroom-template-card … primary … secondary … horizontal
ohhh, just noticed rhysb answered it slightly more “correct” 
EDIT: yeah, i was week behind in y readings on this Topic 
Hey, is it possible to show the title and picture of the movie im watching on Netflix on my Google Chromecast with android tv right now?
Hehe yeah, the only thing about the layout is that the text field is simply just one and I don’t know how to change color on just a part on one text field. I know I can do it in a markdown but not cards.
try this, thou i haven’t seen you code yet …
:host {
font-weight: lighter;
--mush-icon-symbol-size: 30px;
--secondary-text-color: #FFBF00;
--mush-card-primary-font-size: 14px;
--mush-card-primary-font-weight: lighter;
--mush-card-secondary-font-weight: lighter;
}
add optional primary-text color
EDIT: wait is it mushroom-chips(template) ? … if so, then yo have to get into the container i think
card_mod:
style: |
ha-card div.content {
--text-color: red;
}
but as you say, i haven’t found the “trick” for individual there either ( so i “re-modded” mushroom-template, to look like chips)
Why does not the snowflake gets animated? I am struggling to get this working, can I get some helpful ideas?
first here is the generated HTML section snippet:
Not sure what I am missing but here are my thoughts and what I understand from the docs
mushroom-shape-icon: => This line should find the matching element `mushroom-shape-icon`
$: | => This $ sign should go inside the first #shadow-root element
ha-icon => This should select the ha-icon element
type: custom:mushroom-template-card
primary: Air Conditioner
secondary: |
Currently: {{ states('climate.home')|capitalize}}
icon: |-
{% from 'ac_tools.jinja' import ac_icon %}
{{ ac_icon('climate.home') }}
icon_color: |
{% from 'ac_tools.jinja' import ac_icon_color %}
{{ ac_icon_color('climate.home') }}
tap_action: none
card_mod:
style:
mushroom-shape-icon:
$: |
ha-icon {
/* Animate icon based on AC mode */
{% set mode = states(config.entity) %}
--icon-animation:
{% if mode == 'heat_cool' %}
spin 3s ease-in-out infinite alternate
{% elif mode == 'heat' %}
heat 1.5s infinite
{% elif mode == 'cool' %}
cool 6s ease-in-out infinite
{% elif mode == 'dry' %}
dry 1.5s linear infinite
{% elif mode == 'fan_only' %}
spin 1s linear infinite
{% endif %};
}
@keyframes cool {
0%, 100% { transform: rotate(25deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(50deg); }
75% { transform: rotate(-50deg); }
}
@keyframes heat {
50% { opacity: 0.5; }
}
@keyframes dry {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.25); }
}
Following this awesome post I have also tried as:
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
/* Animate icon based on AC mode */
{% set mode = states(config.entity) %}
--icon-animation:
{% if mode == 'heat_cool' %}
spin 3s ease-in-out infinite alternate
{% elif mode == 'heat' %}
heat 1.5s infinite
{% elif mode == 'cool' %}
cool 6s ease-in-out infinite
{% elif mode == 'dry' %}
dry 1.5s linear infinite
{% elif mode == 'fan_only' %}
spin 1s linear infinite
{% endif %};
}
@keyframes cool {
0%, 100% { transform: rotate(25deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(50deg); }
75% { transform: rotate(-50deg); }
}
@keyframes heat {
50% { opacity: 0.5; }
}
@keyframes dry {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.25); }
}
but again the result is the same, no icon animation 
@rhysb can you help?
PS: wish we could use macros for CSS as well, haven’t tried 
You can get a bit more fancy like this.
type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.office_air_conditioner
icon: mdi:thermometer
icon_color: red
content: Climate
card_mod:
style: |
ha-card {
padding: calc(var(--chip-spacing) / 2);
}
::slotted(span) {
white-space: pre-wrap;
}
::slotted(span):after {
content: "\a {{ state_attr(config.entity, 'temperature') | round(1) }} °C ";
font-weight: normal;
line-height: 1.2;
color: var(--secondary-text-color);
}
Indeed. I was inspired by the design of the lights in the Google app they screenshotted but with my own spin. Should help get them most of the way there!
Perhaps something in your macros as this works:
type: custom:mushroom-template-card
entity: climate.air_conditioner
primary: Air Conditioner
secondary: |
Currently: {{ states(entity) | capitalize }}
icon: |
{% set mode = states(config.entity) %}
{% if mode == 'heat_cool' %}
mdi:sync
{% elif mode == 'heat' %}
mdi:fire
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'dry' %}
mdi:water-percent
{% elif mode == 'fan_only' %}
mdi:fan
{% else %}
mdi:air-conditioner
{% endif %}
icon_color: |
{% set mode = states(config.entity) %}
{% if mode == 'heat_cool' %}
green
{% elif mode == 'heat' %}
red
{% elif mode == 'cool' %}
blue
{% elif mode == 'dry' %}
orange
{% elif mode == 'fan_only' %}
teal
{% endif %}
tap_action:
action: none
card_mod:
style:
mushroom-shape-icon:
$: |
ha-icon {
/* Animate icon based on AC mode */
{% set mode = states(config.entity) %}
--icon-animation:
{% if mode == 'heat_cool' %}
spin 3s ease-in-out infinite alternate
{% elif mode == 'heat' %}
heat 1.5s infinite
{% elif mode == 'cool' %}
cool 6s ease-in-out infinite
{% elif mode == 'dry' %}
dry 1.5s linear infinite
{% elif mode == 'fan_only' %}
spin 1s linear infinite
{% endif %};
}
@keyframes cool {
0%, 100% { transform: rotate(25deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(50deg); }
75% { transform: rotate(-50deg); }
}
@keyframes heat {
50% { opacity: 0.5; }
}
@keyframes dry {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.25); }
}
hmmm not working for me … maybe this matter?
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
primary: Air Conditioner
secondary: |
Currently: {{ states('climate.home')|capitalize}}
...
the mushroom card lives inside this grid and custom:stack-in-card
Time to have a play 
. Let me know how you get on.
BTW, do you have any card_mod in your theme for Mushroom Templates?
Do you mean this?
Google Mushroom:
# Mushroom part
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
ha-card-border-width: 0
ha-card-border-radius: 20px
