Btw, I also had several questions regarding the lighting card (or template card with lighting):
I didnāt find the answer on my own or didnāt understand how to apply it, is it possible to show the current color of the entity as the native HA does?
I searched and tried to implement it myself, but so far to no avail, I would like to try the effect of a pulsating radius if the lighting is on (similar to how we do it with person cards).
Here is my code: Mushroom Cards - Build a beautiful dashboard easily š (Part 2) - #48 by SoulAssassin
Here is the icon: Mushroom Cards - Build a beautiful dashboard easily š (Part 2) - #55 by SoulAssassin
From bottom to topā¦
card_mod:
style: |
ha-state-icon {
animation: air 3s infinite linear;
}
@keyframes air {
0%, 100% { clip-path: inset(0 0 38% 0); }
0% { clip-path: inset(0 0 0 0 ); }
}
:host {
--icon-size: 80px !important;
perspective: 900px;
}
Hello everyone,
So, long story short, i am trying to recreate @rhysb dashboard setup from here
So far it seems that the styling part is defeating me 
How it should look like:
How it looks for me
Also, blurring of the card doesnāt work with mushroom theme, only with the minimalist theme. However it still doesnt look like the original.
How it should look like:
Mine (mushroom theme)
Mine (minimalist theme)
Top sticky card:
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, 0px));
/* Remove styling from card */
box-shadow: none;
border: none;
background: none;
padding: var(--mush-chip-spacing, 8px);
transition: all 0s;
}
/* Make card sticky at top of page */
:host {
position: sticky;
z-index: 4;
top: 0px;
}
/* Pseudo element to hide card styling when at top */
ha-card:after {
content: "";
/* Make fixed so element scrolls up */
position: absolute;
top: 0px;
/* Adjust height when notifications visible */
height: {{ '104px' if is_state('input_boolean.menuconsumi', 'on') else '60px' }};
/* Set width to match */
width: 100%;
max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));
/* Center element on page */
left: 50%;
transform: translateX(-50%);
/* Position between chips and background pseudo elemnt */
z-index: -1;[quote="system, post:1, topic:693055, full:true"]
/* Match background to main card */
background: rgba(var(--rgb-card-background-color), 0);
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
}
/* 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.1);
/* Set styling of card */
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
box-shadow: 20px !important;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #
}
Bottom card:
card_mod:
style: |
ha-card {
/* Set padding of card */
padding: 8px 8px 12px;
/* Move card up to match header card */
margin-top: -10px;
/* Styling of card background */
background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color)) !important;
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
transition: all 0s;
}
Any help is welcomed.
Thanks
Hi
Do you have any idea about height control in tile card for light brightness?
or is it even possible ?
I can hide data but can not control light bar height.
The code I tried is.
type: tile
entity: light.hue_color_lamp_1_2
features:
- type: light-brightness
card_mod:
style: |
ha-card .content {
display: none !important;
}
ha-card {
background: transparent;
padding: 0px 11px 11px;
--mush-rgb-disabled: 189,189,189;
--mush-rgb-state-light: 255, 152, 0;
--control-height: 16px;
--control-top: 16px;
--control-border-radius: 5px;
You are using a tile card not a mushroom card.
There is a Tile thread that was just started. @Mariusthvdb may knowā¦
@berkans Got it to workā¦
type: tile
entity: light.tv_lights
hide_state: false
show_entity_picture: false
features:
- type: light-brightness
tap_action:
action: toggle
icon: mdi:light-recessed
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.slider {
--control-slider-border-radius: 4px !important;
height:15px !important;
}
.: |
ha-card .content {
display: none !important;
}
Perfect. Thank you very much.
Hi thanks very much for this wonderful set of cards.
Thereās something I couldnāt achieve yet with the custom template or light cards.
I use the template cards badge to show if thereās presence detected in the rooms where I have detectors
The problem is that I couldnāt add this feature to the light cards, and if using the template cards I cannot reach the advanced setting for the lights (colour, intensityā¦)
Iād like to add a badge when detected any zone where I have it set (these are light cards), as I have a FP2 that gives that info
Is there any way to achieve it?
Thanks!
Here I would like to place it
Share your code and ill make it happend
to startā¦The card you are using is a mini-media-player, not a Mushroom card. The Mini-media player has itās own mod settings youāll need to adjust.
checkout this extensive guide and look for mini-media-player
Hello Everyone!
Does anyone has the code, or something similar, to create this?
The important part is, Iām not sure how to add the three buttons side by side, any help would be kindly appreciated, thanks!
Its a Tile or a Mushroom Cover Card. They are automatically added.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Garage Door
secondary: >-
{% if is_state('cover.garage_door','open') and
is_state('binary_sensor.garage_door_open','on') %}
Open and Unlocked
{% elif is_state('binary_sensor.garage_door_open','on') %}
Door Open
{% elif is_state('cover.garage_door','open') %}
Unlocked
{% else %}
Closed
{% endif%}
icon: >-
{% if is_state('cover.garage_door','open') and
is_state('binary_sensor.garage_door_open','on') %}
mdi:garage-open-variant
{% elif is_state('binary_sensor.garage_door_open','on') %}
mdi:garage-open-variant
{% elif is_state('cover.garage_door','open') %}
mdi:garage-alert-variant
{% else %}
mdi:garage-variant-lock
{% endif%}
icon_color: >-
{% if is_state('cover.garage_door','closed') and
is_state('binary_sensor.garage_door_open','off') %}
green
{% else %}
red
{% endif%}
badge_icon: |-
{% set bl = states('sensor.garage_door_sensor_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
badge_color: |-
{% set bl = states('sensor.garage_door_sensor_battery_level') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} disabled
{% endif %}
tap_action:
action: none
card_mod:
style: |
mushroom-badge-icon {
left: -3px;
}
- type: custom:mushroom-cover-card
entity: cover.garage_door
name: Garage Door
primary_info: none
secondary_info: none
icon_type: none
tap_action:
action: none
show_buttons_control: true
card_mod:
style: |
ha-card {
margin-top: -12px;
}
card_mod:
style: |
ha-card {
{% if is_state('cover.garage_door','closed') and
is_state('binary_sensor.garage_door_open','off') %}
background: rgba(101,170,91,0.2);
{% else %}
background: rgba(226,84,66,0.2);
{% endif %}
}
Hey guys! I need help. a long time ago my animations stopped working, and I tried everything but I cant get them to work, can someone help me and checkout what Iām doing wrong?
Thank you 
example:
cards:
- type: custom:mushroom-template-card
icon: mdi:sofa
entity: light.livingroom_group
primary: Living Room
icon_color: |-
{% if is_state('light.livingroom_group', 'on') %}
orange
{% endif %}
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: livingroom
secondary: '{{ states(''sensor.atc_0ae9_temperature'') }}Ā°F'
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: ducky 2s ease-in-out infinite;' if
is_state('light.livingroom_group', 'on') }}
transform-origin: 50% 75%;
}
@keyframes ducky {
0%, 100% { transform: rotate(-15deg); }
50% { transform: rotate(15deg); }
}
- type: custom:mushroom-template-card
icon: mdi:bed-queen
primary: Bedroom
icon_color: |-
{% if is_state('light.bedroom_bathroom_group', 'on') %}
orange
{% endif %}
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: bedroom
secondary: '{{ states(''sensor.ewelink_th01_temperature'') }}Ā°F'
entity: light.bedroom_bathroom_group
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: ducky 2s ease-in-out infinite;' if
is_state('light.bedroom_bathroom_group', 'on') }}
transform-origin: 50% 75%;
}
@keyframes ducky {
0%, 100% { transform: rotate(-15deg); }
50% { transform: rotate(15deg); }
}
ha-icon should be ha-state-icon and --icon-animation: should just be animation:
An example
type: custom:mushroom-template-card
primary: Spin
icon: mdi:fan
icon_color: red
card_mod:
style: |
ha-state-icon {
animation: rotate .5s infinite linear}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-359deg);
}
}
Thanksss! That solved it.
is there a way to make it so that the animation only will work when the entity is on?
An example with a if statement that controls the animation.
type: custom:mushroom-template-card
primary: Spin
entity: fan.bedroom_fan
icon: mdi:fan
icon_color: red
card_mod:
style: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: rotate .5s infinite linear}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-359deg);
}
}
{% endif %}
Thank you so so much! 