Sorry, not a mac man 
. Using -webkit-filter: grayscale(100%); should do the trick.
2 Likes
From the amount of troubleshooting that I’ve done, the normal filter: grayscale(100%) should work with Safari 15+. A snippet of code on JSFiddle works perfectly fine in the browser.
It’s like Home Assistant overwrites/overrides the image to undo the grayscale (but only on Safari?).
I’ll leave it as it is for now as I am no CSS expert, if anyone else on Safari (Mac/iOS) has a solution, please do let me know.
hey like you room card any chance if the code please?
Trying to change the font color and show no icon but so far it’s not working out…
Anyone have any suggestions?
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.12hourtime
icon: ""
card_mod:
style: |
ha-card {
width: 50%;
color: "#999999";
--chip-font-weight: bold;
--chip-font-size: 25px;
}
All the css is working except font color 
How do I show NO icon?
Thank you all!
Try:
ha-card {
width: 50%;
--text-color: #999999;
--chip-font-weight: bold;
--chip-font-size: 25px;
}
1 Like
Thank you!!! That worked great!
1 Like
Thank you all! I figured out the no icon by simply putting “icon: none”
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.12hourtime
icon: none
card_mod:
style: |
ha-card {
width: 50%;
--text-color: #000000;
--chip-font-weight: bold;
--chip-font-size: 25px;
}
Couple questions on the media card - first, any plans to include input selector on the card (w/o going into more info) and second, and plans to modify the power button/service so it can send magic packets to turn on TVs and such that WoL? Thanks! Love the mushroom cards, makes for a very straightforward way to create a nice looking dashboard.
Really appreciate (and I know everyone else does too) how willing you are to share and support.
Could you give me a nudge as to what style modifiers would bring my avatars more in-line with the example you provided? Ideally I’d like as little rectangular whitespace as possible and the dark background encircling the avatar. I believe the code is pretty much verbatim, so I’m guessing it’s a function of one of the other styles applied e.g. to the stack-in card I’m using or something. Still fiddling around.
I’ve taken a few scans through the thread but it’s getting tougher to find directed topics 
[actuallly, maybe an FAQ or compendium would be cool… rainy day project] But anyhow, my apologies if I missed an obvious example.
decluttering_templates:
person-home:
card:
type: custom:mushroom-person-card
entity: '[[entity]]'
primary_info: none
secondary_info: none
use_entity_picture: true
card_mod:
style: |
mushroom-shape-avatar {
{{ 'filter: grayscale(100%);' if is_state('[['entity']]', 'not_home') }}
}
4 Likes
How did you get that roller pic on the card?
For the avatar, try this:
Cant Change secondary text color: I want to ahve green if the constact sensor is on, else, standar color. the code is:
card_mod:
style: |
ha-card {
--secondary-text-color: {{ 'green' if is_state('binary_sensor.contact_sensor_ac_estar_contact', 'on') else '' }};;
}
The complete code is the following:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: |
AC
secondary: >
{%if is_state('climate.ac_estar', 'off')%} off {% else %}
{%if states('counter.aux_ac_estar')|int == 0 and
is_state('climate.ac_estar', 'heat')%} Idle {% else %} {%if
states('counter.aux_ac_estar')|int == 1 %} bajo {% else %} {%if
states('counter.aux_ac_estar')|int == 2 %} med {% else %} {%if
states('counter.aux_ac_estar')|int == 3 %} alto {% endif %} {% endif
%} {%
endif %} {% endif %} {% endif %}
icon: mdi:air-conditioner
icon_color: |-
{% if is_state('climate.ac_estar', 'heat') %}
orange
{% else %}
grey
{% endif %}
entity: climate.ac_estar
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--secondary-text-color: {{ 'green' if is_state('binary_sensor.contact_sensor_ac_estar_contact', 'on') else '' }};;
}
- type: custom:mushroom-climate-card
entity: climate.ac_estar
name: AC Estar
icon: mdi:air-conditioner
hvac_modes:
- heat
show_temperature_control: true
collapsible_controls: false
fill_container: false
icon_type: none
primary_info: none
secondary_info: none
1 Like
Hi @strangehadron,
nice work. Can you tell me how you did the menu pane on the left?
I want to build something similar where on the left I have a menu area and depending on the section, it loads a specific dashboard on the right.
If you can share what you used and how you arranged it this way that would be awesome! Thanks
Hi,
same here I would be very interested how you did the sidebar on the left with the menu? What cards and layout options did you use to make it fit?
You were almost there. Should be like this:
--secondary-text-color: {{ 'green' if is_state('binary_sensor.contact_sensor_ac_estar_contact', 'on') }};
‘mushroom-shape-icon’ is for when ‘icon type’ is ‘icon’ and now changes to ‘mushroom-shape-avatar’ when ‘icon type’ is ‘entity picture’.
I’m happy to share . It’s been fun seeing what we can do with Paul’s Mushroom cards.
Are you wanting to add the circle shadow (shape) behind your person pics (avatar) or remove it from the one on the left?
To remove the shape, Tempus has your answer.
To add a shape you can do it like this:
type: custom:mushroom-person-card
entity: person.rhys
icon: ' '
icon_type: icon
primary_info: none
secondary_info: none
card_mod:
style: |
mushroom-card {
background: url( {{ state_attr('person.rhys', 'entity_picture') }} ) no-repeat 0px center;
background-size: 42px 42px;
}
ha-card {
margin-left: auto;
margin-right: auto;
width: 66px;
border-radius: 50%;
}
5 Likes
Hi,
I did the same way from minimalist to mushroom with exactly the same room card issue.
I use the minimalistic area card right now:
It’s possible to get information about temperature, humidity and open doors/windows and also the option to toggle lights and switches, open audio players, change climate and ac settings and so on.
And everything is on a nice little picture of your choice. Really easy to setup!
Here is an example:
1 Like
Card as an option to use picture instead of icon
icon_type: entity-picture
So if you define cover’s entity-picture properties as a path/png, card will use it
I failed to use template for entity-picture so i could have image with some kind of %
1 Like
I can‘t get this working on a conditional chip for my lights. Could you post the whole yaml please?