Thanks for your suggestion but it was like @rhysb that I was after.
Thanks again 
You can control the size of the Mushroom Chip Icon with --chip-icon-size and --chip-height. If you are using the entity picture we can use --chip-avatar-padding and --chip-height.
Mushroom Chip Size:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:mushroom
icon_color: red
card_mod:
style: |
ha-card {
justify-content: center;
--chip-icon-size: 64px;
--chip-height: 64px;
width: var(--chip-height) !important;
border-radius: 50% !important;
--chip-background: rgba(var(--rgb-green), 0.2);
}
- type: entity
entity: person.rhys
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
--chip-avatar-padding: 2px;
--chip-height: 64px;
border-radius: 50% !important;
--chip-background: rgba(var(--rgb-yellow), 0.8);
}
4 Likes
9 Likes
@rhysb I know we have a CRT animated icon, but can we get an up to date LCD/Flatscrren/Monitor icon and a microwave icon too please?
Hi
Is there any reason why this does not work please ? I have a animated bulb and the badge that you added yesterday. They both work fine individually but not together ?
Thanks
Martyn
type: custom:mushroom-template-card
primary: ''
icon: |2
{% set state=expand(states.light.all_lights) | selectattr( 'state', 'eq', 'on') | list | count %}
{% if state > 0 %}
mdi:lightbulb-on
{% else %}
mdi:lightbulb
{% endif %}
icon_color: |2-
{% set state=expand(states.light.all_lights) | selectattr( 'state', 'eq', 'on') | list | count %}
{% if state > 0 %}
green
{% else %}
grey
{% endif %}
badge_icon: none
badge_color: transparent
entity: light.all_lights
fill_container: false
layout: vertical
tap_action:
action: more-info
hold_action:
action: navigate
navigation_path: /mobile-lighting
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: clip 1s linear infinite;' if is_state('light.all_lights','on') }}
}
@keyframes clip {
0% {
clip-path: polygon(43% 19%, 67% 23%, 81% 41%, 70% 98%, 32% 98%, 22% 65%, 20% 35%);
}
100% {
clip-path: inset(0 0 0 0);
}
}
mushroom-badge-icon$: |
after {
content: "{{ expand(states.light.all_lights) | selectattr( 'state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
I have been playing again and looking to improve this.
I keep trying all sorts of formatting for the templating, but end up with
UndefinedError: 'input_datetime' is undefined
{%- set event = as_timestamp(states.entity.state) %}
{%- set now = as_timestamp(now()) %}
{% if (now) > (event) %}
days overdue
{% elif (now) > (event) %}
days remaining
{% endif%}
Im trying to incorporate these two as the secondary text to replace Days Due and Overdue
{{ (states(entity) | as_datetime | as_local - now()).days + 1 }} days remaining
{{ (states(entity) | as_datetime | as_local - now()).days + 1 }} days overdue```
Well that’s absolutely amazing!
Once again thanks for all your support @rhysb
Is there any way to get that orange badge number on a single chips card?
I see you proposed something over here? But that’s not working for me.
1 Like
Does anyone have a “template” for a room with chips?
in a style with minimalistics room card
ps. kind of hard to search foor “room” xD
1 Like
My initial response was “Don’t be silly, Chips can’t have Badges!” but then I thought “Why not?”.
Mushroom Chip Badge:
type: custom:mushroom-chips-card
chips:
- type: template
entity: group.all_lights
icon: mdi:lightbulb
icon_color: amber
card_mod:
style: |
ha-card:after {
content: "{{ expand(states.group.all_lights) | selectattr( 'state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
24 Likes
You are missing the selector before :after.
Should be:
mushroom-badge-icon$: |
ha-icon:after {
1 Like
Did you ever figure this out? I also see that weird highlight on android
Omg you are a hero! Working like a charm and rocking as hell 
Once again many thanks for your support 
1 Like
Try like this:
secondary: >-
{{ ((states(entity) | as_datetime | as_local - now() | as_local).days + 1) | abs }}
{% set due = (states(entity) | as_datetime | as_local) %}
{% set current = (now() | as_local) %}
{% if current > due %}
days overdue
{% else %}
days remaining
{% endif %}
1 Like
That was brilliant, thank you and working brilliant now 
1 Like
This is my theme that fixes that for me, the webkit-tap-highlight transparent I would think would make sense as a default on the card for mushroom, but this works everywhere when I add to my theme
Mushroom Custom:
card-mod-theme: "Mushroom Custom"
card-mod-card: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
-webkit-tap-highlight-color: transparent;
}
modes:
light: {}
dark: {}
2 Likes
Still new to CSS but wanted to try recreating this minimalist room card, if anyone sees any improvements that can be made let me know
Minimalist Room Card
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:door
icon_color: green
primary: Hallway
secondary: '{{ states(''sensor.hallway_temperature'') }} °F'
layout: horizontal
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -60px;
left: -195px;
overflow: visible !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -62px;
left: -195px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -50px;
top: 80px;
--icon-color: rgb(128, 199, 149) !important;
--shape-color: rgba(128, 199, 149, 0.2) !important;
}
.: |
ha-card {
--primary-text-color: rgb(128,199,149);
--secondary-text-color: rgba(128,199,149,0.5);
background: none;
}
:host {
--mush-icon-size: 186px;
}
- type: custom:mushroom-template-card
primary: none
icon_color: disabled
icon: mdi:lightbulb-group
secondary: none
entity: light.andrews_room
tap_action:
action: call-service
service: light.toggle
data: {}
target:
entity_id: light.andrews_room
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% 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 is_state(config.entity, 'on') %}
--icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
{% endif %}
}
.: |
ha-card {
width: 66px;
margin-left: 72%;
top: -205px;
background: none;
}
- type: custom:mushroom-template-card
primary: none
icon_color: |-
{% if is_state(entity, 'on') %}
green
{%else%}
disabled
{% endif %}
icon: mdi:fan
secondary: none
entity: fan.andrew_s_fan
card_mod:
style: |
ha-card {
width: 66px;
margin-left: 72%;
top: -215px;
background: none;
}
- type: custom:mushroom-template-card
primary: none
icon_color: none
icon: none
secondary: none
card_mod:
style: |
ha-card {
width: 66px;
margin-left: 72%;
top: -225px;
background: none;
}
- type: custom:mushroom-template-card
primary: none
icon_color: none
icon: none
secondary: none
card_mod:
style: |
ha-card {
width: 66px;
margin-left: 72%;
top: -235px;
background: none;
}
card_mod:
style: |
ha-card {
height: 240px !important;
}
27 Likes
Maybe it could be a bit smaller?
To be able to have more cards viewable at the same time 
@rhysb thanks for the additional icons. With previous icons I have them setup ie:
{{ '--icon-animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;' if states('sensor.diskad_dishwasher_power_local') | float > 1 }}
transform-origin: 50% 75%;
}
How would I do this with the new microwave icon?
EDIT: figured it out, was as simply as placing the ha-icon:before inside an if statement
1 Like
love it!
10 Likes