Yes, that’s it. But the existing cards I have are smaller and transparent, which I used this to achieve :
ha-card {
background: none ;
width: 65px;
display: flex;
}
I’m trying to figure out where to drop that in to that card. At some point though, I think I’m going to need to learn what | $ .: etc all mean 
Hello,
First of all, thanks you for this incredible cards set.
Is anyone know if it is possible to add a button at the end of a light card ? In my case, it is for activate or not motion detection in the room the light belong.
The goal is to look like this :
Thanks you.
Try:
card_mod:
style: |-
@keyframes blink {
50% {opacity: 0;}
}
mushroom-shape-icon {
{% if is_state('binary_sensor.solar_pumpe', 'on') %}
animation: blink 2s linear infinite;
{% endif %}
}
actually i added a new card to test and copied this code and nothing is happening. I swapped out dummy_fan for mine. Is there something else Im supposed to be changing as well that im missing?
Is there a way to control how big the shape icon area (area around the icon itself) is? I’m using the squares and would like them to be a little smaller without making the icon size smaller.
this is not working with if condition …without if condition animation works
Hi,
is it possible to show two icons beside eachother in chip card ? if yes does someone have and sample code how they implemented it ?
i would like to show boiler icon + sun icon in my chip.
thanks in advance.
hey can i do something like this? i already have some cardmode styles soo how do i add animation to it…my code:
card_mod:
style: |
ha-card {
background: ;
height: 60px !important;
}
:host {
--icon-size: 40px !important;
--card-primary-font-size: 12px !important;
--card-primary-line-height: px!important;
--card-secondary-font-size: 11px!important;
}
mushroom-shape-icon$: |
ha-icon {
--icon-animation:
{% if is_state('binary_sensor.oneplus_6t_is_charging', 'off')%} clip 2s linear infinite;
{% endif %}
}
@keyframes clip {
0% {
clip-path: inset(70% 0 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
@keyframes ping {
0% {
box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);
}
70% {
box-shadow: 0 0 0 10px transparent;
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
}
Combined a few cards on here to make one specific for my use needs. Added a conditional drop down to a media card that allows me to control my ambient tv backlighting all from one card. Any ideas how I can make this better? or possible change the state to what is playing instead of off or on?
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 20px
margin: '-4px -4px -8px -4px'
cards:
- type: custom:mushroom-media-player-card
entity: media_player.shield_universal
name: Shield TV
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: true
media_controls:
- on_off
- play_pause_stop
- previous
- next
volume_controls:
- volume_set
- volume_mute
fill_container: true
card_mod:
style: |
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 %};
}
:host {
{% if not is_state(config.entity, 'off') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
{% endif %}
background-size: 50%, 100%;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
}
:host([dark-mode]) {
background-blend-mode: darken;
}
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.ambilight_dropdown
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-down' if is_state(entity, 'off') else 'mdi:chevron-up'
}}
icon_color: disabled
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.ambilight_dropdown
state: 'on'
card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.ambilight_wled
icon: mdi:television-ambient-light
name: Ambilight
layout: horizontal
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
use_light_color: true
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
Perhaps something like this:
type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: '{{ state_attr(entity, ''friendly_name'') | title }}'
icon: |+
{% set battery_level = (states(entity) | int / 10) | round(0) | int * 10 %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
icon_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
layout: horizontal
tap_action:
action: none
entity: sensor.rhys_phone_battery_level
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% if is_state('binary_sensor.rhys_phone_is_charging', 'on')%}
--icon-animation: clip 2s linear infinite;
{% endif %}
}
@keyframes clip {
0% {
clip-path: inset(100% 0 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
.shape {
{% if is_state('binary_sensor.rhys_phone_is_charging', 'on')%}
--shape-animation: ping 2s infinite;
{% endif %}
}
@keyframes ping {
0% {
{% set battery_level = states(config.entity) | int %}
box-shadow: 0 0 0 0 rgba(var(
{% if battery_level > 90 %}
--mush-rgb-green
{% elif battery_level > 60 %}
--mush-rgb-light-green
{% elif battery_level > 50 %}
--mush-rgb-lime
{% elif battery_level > 40 %}
--mush-rgb-yellow
{% elif battery_level > 30 %}
--mush-rgb-amber
{% elif battery_level > 20 %}
--mush-rgb-orange
{% elif battery_level > 10 %}
--mush-rgb-deep-orange
{% else %}
--mush-rgb-red
{% endif %}
), 0.7);
}
70% {
box-shadow: 0 0 0 10px transparent;
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
.: |
ha-card {
background: none;
height: 60px !important;
}
:host {
--icon-size: 40px !important;
--card-primary-font-size: 12px !important;
--card-secondary-font-size: 11px!important;
}
You can do it like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.dining_room_light
show_brightness_control: true
- type: custom:mushroom-entity-card
entity: input_boolean.dining_room_motion_override
primary_info: none
secondary_info: none
card_mod:
style: |
ha-card {
width: 66px;
margin-left: auto;
top: -120px
}
card_mod:
style: |
ha-card {
height: 120px;
}
Like this:
.: |
ha-card {
background: none;
width: 66px;
display: flex;
}
Thank you,
i’m using this in switch and wondering if the switch is off how do i get a different icon to appear
chip:
type: template
icon_color: "{{ 'green' if is_state('switch.sonoff_10004da9de','on') else 'red' }}"
icon: mdi:cctv
thank you.
Try like this:
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% if is_state('binary_sensor.solar_pumpe', 'on')%}
animation: blink 2s linear infinite;
{% endif %}
}
@keyframes blink {
50% {opacity: 0;}
}
Yes, you can adjust the Mushroom Icon Shape size like this:
type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
card_mod:
style: |
mushroom-shape-icon {
--icon-symbol-size: 21px;
--icon-size: 63px;
}
What is the value range of your fan?
Apply it to the Chips like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: switch.lounge_amp_front
icon_color: light-blue
name: Front
content_info: name
- type: entity
entity: switch.lounge_amp_center
icon_color: light-blue
name: Center
content_info: name
card_mod:
style: |
ha-card {
--chip-background: none;
--chip-box-shadow: none;
--chip-spacing: 0px;
}