Can anyone spot why this icon is green when it should be red?
looks like it is green no mater what I replace “on” with
type: custom:mushroom-template-card
primary: Full
secondary: ''
icon: mdi:emoticon-poop
layout: vertical
icon_color: >-
{% if is_state('binary_sensor.cat_toilet_need_emptying', 'on') %} red {% else %} green {% endif %}
multiline_secondary: false
fill_container: false
I use this exact code for another binary sensor, and there it is working
Did you create binary_sensor based on this input_boolean you presented in history? If not, I think you have answer 
yes 
Have a look here:
Thanks very much for your help, I’ve got it working now!
Amazing. Thank you!
Yes, you can change the Chip text and icon color like this:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:mushroom
content: Mushrooms
card_mod:
style: |
ha-card {
--text-color: rgb(var(--rgb-green));
--color: rgb(var(--rgb-red));
}
Try like this:
Use --color for on color and --icon-color for off color.
type: custom:mushroom-chips-card
chips:
- type: entity
entity: light.office_light
card_mod:
style: |
ha-card {
--color: rgb(var(--rgb-yellow));
--icon-color: rgb(var(--rgb-disabled));
}
Yes, you can add a shadow to the Mushroom icon shape like this:
type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16) !important;
}
Hi Rhys,
can you explain to me how to do that with the title on the card that Now Playing is only displayed when media is also playing?
I have my media player only shown on the home page when something is playing and can also assign a title of the card but this is then always shown even if nothing is played.
Thanks a lot
And my absolute respect how great you liven up this thread here and are always helpful.
Greetings
Moss
You can replace the secondary text of a non-template Mushroom card like this:
type: custom:mushroom-entity-card
entity: sensor.lounge_sensor_temperature
card_mod:
style:
mushroom-state-info$: |
.secondary {
font-size: 0px !important;
}
.secondary:before {
content: "{{ states(config.entity) | round(1) }} °C";
font-size: var(--card-secondary-font-size);
}
I combine all my media players using a Universal Media Player:
media_player:
- platform: universal
name: Currently Playing
children:
- media_player.lounge_tv
- media_player.lounge
- media_player.family_room_tv
- media_player.family_room
- media_player.office
- media_player.bedroom
- media_player.garage
- media_player.elijahs_bedroom
I then conditionally display the Universal Media Player when it is not off:
type: conditional
conditions:
- entity: media_player.currently_playing
state_not: 'off'
card:
type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Currently Playing
- type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary:before {
content: "{{ state_attr(state_attr(config.entity, "active_child"), "friendly_name") }} - ";
}
.: |
mushroom-shape-icon {
{% set media_type = state_attr(config.entity, 'media_content_type') %}
--card-mod-icon:
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-open
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
mdi:play
{% endif %};
}
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: 'off'
- entity: media_player.currently_playing
state_not: idle
card:
entity: media_player.currently_playing
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 {
{{ '--paper-progress-container-color: rgba(63, 81, 181, 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 0px 0px;
--mmp-progress-height: 8px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(63, 81, 181);
--ha-card-border-radius: 12px;
}
card_mod:
style: |
ha-card {
{% if not is_state('media_player.currently_playing', 'off') %}
background: rgba(var(--rgb-card-background-color), 0.6) url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
background-size: cover;
background-blend-mode: overlay;
{% endif %}
}
view_layout: {}
Thank you for your kind words 
Apologies if this has been discussed before. Does anyone else feel the need for more visual feedback when a mushroom entity card is tapped? The standard HA button has the ripple effect when you tap it, and I kind of miss that with Mushroom. It’s not so bad on iPhone, where you get haptic feedback, but on iPad it would be nice to have that extra feedback.
You may be trying to re-invent the wheel here. You can make the Mushroom Media Card into a dedicated volume control very easily:
type: custom:mushroom-media-player-card
entity: media_player.family_room
show_volume_level: true
volume_controls:
- volume_set
- volume_mute
use_media_info: false
card_mod:
style: |
mushroom-shape-icon {
{% set vol_level = state_attr(config.entity, 'volume_level') | float %}
--card-mod-icon:
{% if state_attr(config.entity, 'is_volume_muted') == true %}
mdi:volume-mute
{% else %}
{% if vol_level > 0.66 %}
mdi:volume-high
{% elif vol_level < 0.33 %}
mdi:volume-low
{% else %}
mdi:volume-medium
{% endif %}
{% endif %};
}
Here are some ideas for visual feedback when you ‘activate’ a Mushroom card:
Background
(I tried to keep the effect subtle so it’s a bit hard to see in the GIF)
type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Background
card_mod:
style: |
ha-card:active {
background: rgba(var(--rgb-disabled), 0.1);
transition: 0s;
}
Box-Shadow:
type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Box-Shadow
card_mod:
style: |
ha-card:active {
box-shadow: 0 0 20px rgba(var(--rgb-grey), 0.5);
transition: 0s;
}
Scale:
type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Scale
card_mod:
style: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
this is really nice…
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.cpu
icon: mdi:thermometer
icon_color: '{{ "green" if states("sensor.cpu") | int < 55 else "red" }}'
card_mod:
style: >
mushroom-shape-icon {
--icon-symbol-size: 20px;
--icon-size: 35px;
display: flex;
animation: blink 2s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
I am trying to change the cooler of the icon to green if cpu temp is less than 55 else red, also trying to make the icon to blink. What am I doing wrong ?
kindly guide
You need to use a template chip. Entity chip does not allow Jinja. CSS you have used is for a Mushroom card not a Mushroom Chip.
type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.processor_use_percent
icon: mdi:thermometer
icon_color: '{{ "green" if states(entity) | int < 55 else "red" }}'
content: '{{ states(entity) }} %'
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
animation: blink 2s linear infinite;
}
@keyframes blink {
50% {
opacity: 0
}
}
I was using template earlier but then it wasn’t showing the scale of the temperature Celsius or fahrenheit.is there a way to automatically show that in template.
Also the chip icon is not blinking.
Kindly help