Sure but I didnāt get which ones you want ?
Thatās very cool 
Hi there - I posted a question earlier that you answered here a few days ago - sorry about that, I must have missed it.
The example you provided in this reply allows us to change the characteristics of all the cards inside a musroom-chips-card, which is awesome. Do you have any idea if itās possible to use is_state or states() logic in this top-level configuration as sort of a template? Iād love to have 20-30 binary_sensors in a single chips card and use the same styling logic for every card without having to repeat it per entity/template just to capture each sensorās entity idea.
I guess I could get around this a bit by using a decluttering-template that takes 3 sensors at a time and creates a chips card for every 3 sensors, but thatās kind of janky. Any ideas? Thanks!
Here you go 
Mushroom Light Card with animated SVG icon:
type: custom:mushroom-light-card
entity: light.office_light
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
use_light_color: true
icon: none
card_mod:
style: |
mushroom-state-item {
{% if is_state(config.entity, 'on') %}
{% set light_level = ((state_attr(config.entity, "brightness") / 255) * 10) | round(0) * 10 %}
{% if light_level == 100 %}
{% set light_level = 'on' %}
{% elif light_level == 0 %}
{% set light_level = 'off' %}
{% endif %}
{% else %}
{% set light_level = 'off' %}
{% endif %}
background: url("/local/lightbulb/lightbulb-{{ light_level }}.svg") no-repeat;
}
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none;
}
Animated SVG Lightbulb
8 Likes
Yes, you can use Jinja in there fine. What are you wanting to do with the entities?
Cheers, give me some time to get my head around itā¦ 
1 Like
Hi guys,
I have a question in regards to the usage of the browser_mod popup in combination with Mushroom. When I create a popup all the elemants in the popup have no style. The mushroom cards seem to loose the borders, shadows, etc. Do you have any clue what could cause this issue?
Iāve seen some pretty nice implementations in this thread where people use the popup with these awesome mushroom cards.
Thanks in advance for your help.
Hereās an example:
Hereās the code I used:
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Test
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.lichten_keuken
fill_container: true
use_light_color: false
show_brightness_control: true
show_color_temp_control: true
- type: custom:mushroom-light-card
entity: light.lichten_beneden
fill_container: true
use_light_color: false
show_brightness_control: true
show_color_temp_control: true
Kr,
Silvio
wow, this is cool.
1 Like
hello, may i know how do you code the wifi chip? iāve been trying to use url path but i still donāt get it. iām still new in HASS btw.
My post might not directly be mushroom related or itās not very clear what Iām trying to ask. The holy grail for a lot of āHome Assistant nerdsā is to have one UI (HA) that allows replacing all other apps. Along the same line removing of all the remotes is part of the same goal - TV, AVR, blinds etc.
So whatās not clear to me on this thread is how you guys navigate in a UI like Google TV, Plex etc. If I want to watch a movie I have to search it first which is done via the UI. How do you guys do this?
If I rather post this in another topic please advise as well.
Still struggling with this one. If my sonos beam is set to TV, it is āplayingā therefore the card extends to show what would be the progress bar, but there is no need for it to do so.
If music is playing then it extends and album artwork appears as it should.
.
However, id like to know how I can use mini media player variables to make the artwork gradient fade out to a colour rather than --rgb-card-background-color, I have tried variables such as some in this image, eg. --paper-item-icon-color
an example of the gradient fade to colour is here on mini media player card:
Where do you put the Decluttering Card template? Iāve never done anything like that with templates.
Download decluttering card from hacs and then just put that code in your Lovelace.yaml
I would like to have a badge with the number of open shutters in a room. Does anyone knows if its possible with chips? In the example below I know I can add it to the icon with the sofa, but I would like it to be on top of the shutter icon.
1 Like
Hi,
Is is also possible to blink the background(circle) of the icon?
i now how to blink the icon, but want to blink the background.
So the icon stayās the same collor.
Finally i want to make the background blink when the state = today(vandaag)
card_mod:
style:
mushroom-shape-icon:
$: |
.shape ha-icon
{
--icon-animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
}@rhysb do you know if I should put some link to the Mushroom css or the actual styling in popup css section ?
It can not be done??
Here is another option for āanimatingā an SVG icon.
Mushroom Light Card with animated SVG icon v2:
type: custom:mushroom-light-card
entity: light.office_light
show_brightness_control: true
show_color_control: true
icon: none
card_mod:
style: |
mushroom-state-item {
{% if is_state(config.entity, 'on') %}
{% set light_level = (100 - (state_attr(config.entity, "brightness") | int)) %}
background: url("/local/lightbulb/lightbulb-on.svg") no-repeat;
filter: sepia({{ light_level }}%);
{% else %}
background: url("/local/lightbulb/lightbulb-off.svg") no-repeat;
{% endif %}
background-size: 42px 42px;
}
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none;
}
You could also use a PNG or JPG and use grayscale() instead of sepia().
6 Likes
I havenāt used the swipe card, but perhaps you could use z-index to bring the switches forward or the swipe card back.
Hello Daros, your dashboard looks just great, my absolute respect for this work.
A few parts I have taken over, would you share the code for the top area with the chipcards?
Thanks a lot and greetings
Moss