Thanks you very much !
1 Like
Hi there.
If you have a second, could you give me a nudge as to how to accomplish something similar but: with either all chips in a chips card or individual chips, āpermanentlyā leaving the box-shadow red?
The use case is a card Iām working on that greys out motion sensor chips unless thereās motion and then various aspects of the chip changes (icon color, text color, etc.). Iād like a red border around the chip as well, but canāt seem to find the right place to style this. I can handle the sensor on/off condition stuff, I just canāt figure out the CSSā¦
Will save some room by not pasting the CSS attempts that didnāt work, but I was thinking itād be as simple as using box-shadow: 0 0 20px red or something similar without the animation clause from previous examples and without the active clause in this exampleā¦ butā¦ where? 
Looks like the hierarchy for an individual chip in this card is: mushroom chips card->shadow root->ha card->mushroom template chip->shadow root->mushroom chip->shadow root->ha-card->shadow root. I think Iāve tried most of the permutations as to where to put the red box-shadow but am obviously missing something 
To further illustrate, I was able to make the border for the entirety of the card change as per this pic, but Iād like to be able to do it for individual chips (or apply the same conditional logic to all). e.g. āKitchen Motionā could have the red border around it.
Anyone using the swipe card, how have you gotten around the horrible styling issue? Seems the border around the entities I want to swipe are showing up weird. The top 2 buttons are inset and not like the 3D Printer dropdown. @rhysb any idea?
NVM, sorted Now to try and make if binary_sensor check affect the box-shadow for every single chipā¦ for about 25 chips 
style: |
ha-card {
--chip-box-shadow: 0px 0px 20px red;
--text-color: {{ "#999999" if is_state('binary_sensor.kitchen_motion_sensor_1', 'off') }};
}
1 Like
Thank you all for the wonderful card_mod examples.
Iāve scoured this thread to understand, but Iām failing to find a way to combine two card_mod style things, state based icons along with a state based animation.
mushroom-shape-icon { contents no longer function if
mushroom-shape-icon$: | onward is used. I assume itās overriding the former, but I lack the knowledge to merge them.
- type: custom:mushroom-climate-card
entity: climate.master_bedroom
name: Heater
icon: mdi:heat-wave
hvac_modes:
- heat
primary_info: none
secondary_info: last-changed
show_temperature_control: true
layout: horizontal
double_tap_action:
action: more-info
card_mod:
style:
.: |
mushroom-badge-icon {
{% if state_attr(config.entity, 'hvac_action') == 'idle' %}
--icon-color: grey;
--card-mod-icon: mdi:pause;
{% endif %}
}
mushroom-shape-icon {
{% set preset = state_attr(config.entity, 'preset_mode') %}
--card-mod-icon:
{% if preset == 'none' %}
mdi:heat-wave
{% elif preset == 'comfort' %}
mdi:fireplace
{% elif preset == 'sleep' %}
hue:scene-nightlight
{% else %}
mdi:heat-wave
{% endif %};
}
mushroom-state-info$: |
.primary:before {
content:
{% if state_attr(config.entity, "hvac_action") == 'idle' %}
"Idling"
{% else %}
"{{ state_attr(config.entity, "hvac_action") }}"
{% endif %};
}
.primary:after {
content:
{% if states('switch.fireshrine_timer') == 'on' %}
"ā²"
{% endif %};
}
.primary::first-letter {
text-transform: uppercase;
}
mushroom-shape-icon$: |
.shape {
{% if state_attr(config.entity, 'hvac_action') == 'heating' %}
--shape-animation: ping 3s infinite;
{% endif %}
}
@keyframes ping {
0% {
box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);
}
70% {
box-shadow: 0 0 0 6px transparent;
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
The other thing Iāve noticed is that the icon state change doesnāt occur until reloading my pop-up for this card, however the animation and displayed text is able to update with state change just fine.
@Airyphyla code, also @rhysb asked for it too requires a date time helper creating for each reminder
Lovelace Card:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-title-card
title: '{{ user }}, Here are you reminders!'
subtitle: ''
- type: custom:decluttering-card
template: rec_event
variables:
- entity: input_datetime.kitchen_sink_water_filter
- name: Kitchen Sink Water Filter
- icon: water-opacity
- interval: 182
- interval_text: (due every 6 Months)
- type: custom:decluttering-card
template: rec_event
variables:
- entity: input_datetime.tim_toothbrush_head_replace
- name: Tim Toothbrush head replacement
- icon: toothbrush
- interval: 93
- interval_text: (due every 3 Months)
Decluttering Card template:
decluttering_templates:
rec_event:
default:
- icon: calendar-clock
- next_text: Next due in
- overdue_text: Overdue by
- almost_due_offset: 1
- unit_sec: 86400
- interval_text: ''
- service: script.script_set_timedate
- comments: Resets the timer of last event to now
card:
type: custom:mushroom-template-card
entity: '[[entity]]'
icon: mdi:[[icon]]
icon_color: >-
{%- set ts_period = [[interval]]*[[almost_due_offset]]*[[unit_sec]] %}
{%- set ts_event = as_timestamp(states.[[entity]].state) %}
{%- set ts_now = as_timestamp(now())|round(0) %}
{%- set ts_delta = (ts_now - ts_event) %}
{% if (ts_period != 0) and (ts_delta > ts_period) %}red {% elif
(ts_period-ts_delta) < [[almost_due_offset]]*[[unit_sec]] %}orange {%
endif %}
primary: '[[name]]'
layout: horizontal
tap_action:
action: call-service
service: '[[service]]'
service_data:
entity: '[[entity]]'
timedate: 0
confirmation:
text: Reset the timer of last event to now?
secondary: >-
{%- set ts_period = [[interval]]*[[unit_sec]] %} {%- set ts_event =
as_timestamp(states.[[entity]].state) %} {%- set ts_now =
as_timestamp(now())|round(0) %} {%- set ts_delta = (ts_now - ts_event)
%} {%- set ts_xdiff = (ts_period - ts_delta)|abs %} {% if ts_delta <
ts_period %}[[next_text]] {% else %}[[overdue_text]] {% endif %}{% if
ts_xdiff >= 604800 %}{{ (ts_xdiff // 604800) | int }}w, {{ (ts_xdiff %
604800 // 86400) | int }}d {% elif ts_xdiff >= 86400 %}{{ (ts_xdiff %
604800 // 86400) | int }}d {% elif ts_xdiff >= 3600 %}{{ (ts_xdiff %
86400 // 3600) | int }}h {% elif ts_xdiff >= 600 %}{{ (ts_xdiff % 3600
// 60) | int }}m {% elif ts_xdiff >= 60 %}{{ (ts_xdiff % 3600 // 60) |
int }}m, {{ (ts_xdiff % 60) | int }}s {% else %}{{ (ts_xdiff % 60) | int
}}s {% endif %} [[interval_text]].
style: |-
{%- set ts_period = [[interval]]*86400 %}
{%- set ts_event = as_timestamp(states.[[entity]].state) %}
{%- set ts_now = as_timestamp(now())|round(0) %}
{%- set ts_delta = (ts_now - ts_event) %}
ha-card {
border: solid 2px {% if (ts_period != 0) and (ts_delta > ts_period) %}red {% elif (ts_period-ts_delta) < [[almost_due_offset]]*[[unit_sec]] %}orange {% elif (ts_period == 0) or (ts_delta < ts_period) %}var(--card-background-color) {% else %}red {% endif %};
}
Script to reset to zero:
alias: Set Timedate
sequence:
- service: input_datetime.set_datetime
data:
timestamp: >-
{{ now().timestamp() + (timedate | default(0)) * (unit | default(86400))
}}
entity_id: "{{ entity }}"
mode: single
7 Likes
In reality it would be lovely to be able to have a countdown bar for how many days until next due date. Plus be able to see last date it was carried out.
Hi, is it possible to insert one or more icons in the template card? In the content I would like to write some text-icon-text-icon-text, is it possible?
Is there a way to hide this ugly padlock with card-mod? Iām using the Lovelock card or whatever
itās called.
Thank you so much, that a great job. I understand my mistake about the speed and also discover the presetā¦
But the crowning glory would be an animation with SVG. Itās a pity that nothing is being developed in this direction.
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.