check this …
animation:
{% if is_state('light.master_bedroom_main_lights', 'on') %}
illumination 1s infinite;
{% endif %}
Did you ever figure this one at? I’m at the same point right now.
nice man & can you share you code pleas ?
hello I can probably help you with the question you are looking for the shuffling control for the volume the use of the my-slider-v2 is ideal, it can be used vertically and set as you wish it is this card:
my-cards/slider-v2.md at main · AnthonMS/my-cards (github.com)
here the code for this slider:
type: custom:my-slider-v2
entity: media_player.sonos_beam
vertical: true
showMin: true
styles:
card:
- height: 200px
- width: 50px
track:
- background: |
[[[
if (entity.state == "off") return "red";
else return "lightblue";
]]]
progress:
- background: |
[[[
if (entity.state == "off") return "red";
else return "blue";
]]]
I’m trying to have 3 chips at the bottom:
- 1 at the left (temperature)
- 2 at the right (covers and light state)
I have tried something and playing with some css values. But it is still not the correct version (I have to say that I have almost no knowledge of css):
- The temperature value is seperated over 2 lines instead of one line
- The gap between the cover and light is different on the pc and on the iOS app. (Maybe the css option of margin is not the correct one to use for this goal?
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Masterbedroom
icon: mdi:bed-king-outline
layout: horizontal
icon_color: blue
tap_action:
action: navigate
navigation_path: /dashboard-mushroo/masterbedroom
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:thermometer
tap_action:
action: navigate
navigation_path: /dashboard-mushroo/masterbedroom
content: >-
{{ states('sensor.masterbedroom_temperatuur') | replace
(".",",") }} °C
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: 0;
--chip-border-width: 0;
}
alignment: start
card_mod:
style: |
ha-card {
margin: 0px 0px 6px 4px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.masterbedroom
icon: >
{% if states('cover.master_bedroom') == "closed" %}
mdi:window-shutter
{% elif (state_attr('cover.master_bedroom', 'current_position'
)
| int == 100) %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter-alert
{% endif %}
tap_action:
action: navigate
navigation_path: /dashboard-mushroo/masterbedroom
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
alignment: end
card_mod:
style: |
ha-card {
margin: 0px -28px 6px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.masterbedroom
icon: mdi:lightbulb-group
icon_color: |
{% if is_state('light.masterbedroom', 'on') %}
yellow
{% else %}
disabled
{% endif %}
tap_action:
action: navigate
navigation_path: /dashboard-mushroo/masterbedroom
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
alignment: end
card_mod:
style: |
ha-card {
margin: 0px 8px 6px 0px;
}
Does anybody have some tips?
Question, how can I remove the icon background from a entity card?
As you can see in the image, I would like to remove the background from the icons on the right and not the one on the left
Thanks
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Sicurezza
secondary: Controllo
icon: mdi:alert-decagram-outline
tap_action:
action: navigate
navigation_path: sicurezza
icon_color: orange
multiline_secondary: true
- square: false
columns: 5
type: grid
cards:
- type: custom:mushroom-entity-card
entity: light.luci
primary_info: none
secondary_info: none
layout: horizontal
icon_color: orange
tap_action:
action: navigate
navigation_path: sicurezza
- type: custom:mushroom-entity-card
entity: binary_sensor.stato_termostati
primary_info: none
secondary_info: none
layout: horizontal
icon: mdi:thermostat
icon_color: orange
tap_action:
action: navigate
navigation_path: sicurezza
- type: custom:mushroom-entity-card
entity: binary_sensor.porte
primary_info: none
secondary_info: none
layout: horizontal
icon_color: orange
tap_action:
action: navigate
navigation_path: sicurezza
- type: custom:mushroom-entity-card
entity: binary_sensor.finestre
primary_info: none
secondary_info: none
layout: horizontal
icon_color: orange
tap_action:
action: navigate
navigation_path: sicurezza
- type: custom:mushroom-entity-card
entity: switch.termobagno
primary_info: none
secondary_info: none
icon_color: orange
fill_container: false
name: Termobagno
layout: horizontal
tap_action:
action: navigate
navigation_path: sicurezza
2 Likes
Hi.
You can use in the card “justify-content: center” into card-mod.
Bye
1 Like
That stopped the animation completely. Any thoughts? I’m trying to get a light card with brightness slider that I can animate. I have tried using a template card but can’t seem to create the slider in it. Thanks for the help.
features:
- type: light-brightness
type: tile
entity: light.master_bedroom_main_lights
icon: mdi:lightbulb-on
card_mod:
style:
ha-tile-icon$: |
ha-icon {
{% if is_state('light.master_bedroom_main_lights', 'on') %}
illumination 1s infinite;
{% endif %}
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
Hi, I need some advice. I would like to change the height of the control bar on the Mushroom Fan card.
I found the elements I need in inspector mode, but I don’t know how to correct apply them to the card mod style.
type: custom:mushroom-fan-card
entity: fan.zhimi_mb3_8b86_air_purifier
icon_animation: true
name: Living Room Air Purifier
show_percentage_control: true
show_oscillate_control: false
secondary_info: state
layout: horizontal
tap_action:
action: more-info
fill_container: false
card_mod:
style:
mushroom-slider$: |
.slider {
height: 30px !important;
margin-block: auto !important;
}
Definitely…once I sort out these two things. I actually found another card called the slider-button-card that at least looks like I want, but it’s seems to be a little janky in operation. I need to make sure I’ve configured it properly and use it a little bit. I’ll probably also try to round out the edges with card-mod to get a consistent look.
I’m still open to pointers for the trackpad area in the middle. I saw these custom repos on HACS, but they seem to be only for Samsung TV’s. I need something that works for at least Apple TV’s.
I think this should handle “off” and RBG vs Regular lights:
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'off') %}
background: rgba(115, 115, 115, 0.2); //or whatever color you want
{%- else -%}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
{% if r == null %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
{%- endif %}
{%- endif %}
}
Thanks @rhysb - this was exactly what I was looking for for my AMOLED themed dashboards!
5 Likes
this is a beautifully done card! Thanks so much for it…
What I’m trying to tweak is the volume element. Can you help “map” the volume slider to my theater’s amplifier and not my Shield TV. Is that something you could help me with?
1 Like
Hello,
Is it possible to hide the icon, the primary and secondary text when an entity goes “on” (without losing the card size)
The goal is to display the image of a camera in the background when a detection is active.
The card already works as it is but I would like to remove the icon and the texts for better visibility
Card without motion detection
Card with motion detection
I get this result with this code:
type: custom:mushroom-template-card
primary: |-
{% if is_state('group.grp_motion', 'on') %}
{% else %}
Caméra
{% endif %}
secondary: |-
{% if is_state('group.grp_motion', 'on') %}
{% else %}
UI
{% endif %}
icon: |-
{% if is_state('group.grp_motion', 'on') %}
{% else %}
mdi:cctv
{% endif %}
icon_color: |-
{% if is_state('group.grp_motion', 'on') %}
transparent
{% else %}
purple
{% endif %}
3 Likes
Lab page getting there, device icons are green when up-to-date, and online otherwise they go orange to signify an update is available or red if they are offline.
10 Likes
I’m also interested, how did you get the temperature from the UDM?
Wonderful project! Made my day for building dashboard. 
Same here, curious how you’re getting that info from your UDM Pro. Would love to see the code behind it! Thanks 
Sure, here is the code what i use:
Code
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 18px
margin: ‘-4px -4px -8px 8px;’
cards:- type: custom:mushroom-climate-card
entity: climate.climate
name: Airco Slaapkamer
layout: standard
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
show_temperature_control: true
hvac_modes:- ‘off’
- heat
- cool
- fan_only
card_mod:
style: |
ha-card {
background: none;
–ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.ac_slaapkamer
primary: ‘’
secondary: ‘’
icon: mdi:chevron-down
icon_color: disabled
hold_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
transition: transform 0.14s !important;
{{ ‘transform: rotate(-180deg);’ if is_state(config.entity, ‘on’) }}
}
.: |
ha-card {
align-items: flex-end;
background: none;
–ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
–shape-color: none !important;
}
- type: custom:mushroom-climate-card
- type: conditional
conditions:- entity: input_boolean.ac_slaapkamer
state: ‘on’
card:
type: custom:stack-in-card
cards:- type: entities
entities:- entity: input_boolean.sleep
name: Timer Airco Aan-/Uit
icon: mdi:timer-play-outline - label: ’ ’
type: section - entity: input_number.sleep
name: Minuten - entity: timer.sleep
name: Timer (Resterend)
icon: mdi:timer-check-outline
- entity: input_boolean.sleep
- type: entities
- entity: input_boolean.ac_slaapkamer
you need download in HACS the “stack-in-card” card for it.
Question is this a bug?
So you see that the template chip is not showing the sensor state 0
The entity chip is showing 0.
Also the developer tools gives 0
This is the template sensor:
template:
- sensor:
- name: "woonkamer_total_covers_closed"
state: >
{{ expand('cover.woonkamer_covers') | selectattr('attributes.current_position', 'eq', 0) | list | count | int }}