@rhysb is there anyway to customize the mushroom title card font type, font size, font color?
The font type or size does not match the rest of the mushroom cards. At least to me they donāt look the same. It would be great if it was possible to make them match with card-mod or in the future get them to match natively.
Yes exactly this!! However I already tried that but as far as I know, my slider card does not have a light color state property. So I switched to mushroom light card. Thank you very much.
so when you are planning to share the code :)?
I am not finished yet 
I will post right after I complete it.
How can I make this template card take up as much space and be the same size as this lights card, with the picture on top and primary/secondary below just as itās formatted in the second picture. Which is just the same code a as below but using a mushroom light card.
type: custom:auto-entities
card:
type: grid
columns: 2
square: false
card_param: cards
filter:
include:
- domain: light
state: 'on'
entity_id: /[li]ghts/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
picture: local/icons/custom_icons/ceiling-lamp.png
vertical: true
tap_action: none
hold_action:
action: toggle
double_tap_action:
action: more-info
card_mod: null
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;}
ha-card {
background: transparent;
width: px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
sort:
method: entity_id
I am using DM Sans, which I personally think is a pretty cool font for HA! Screenshot below:
How to install and use (can apply to any font from Google by changing the name to match Google Fonts name, or adding extra lines to resources):
- url: 'https://fonts.googleapis.com/css?family=DM Sans'
type: css
- url: 'https://fonts.googleapis.com/css?family=Poppins'
type: css
- url: 'https://fonts.googleapis.com/css?family=Work Sans'
type: css
- url: 'https://fonts.googleapis.com/css?family=Nunito'
type: css
- url: 'https://fonts.googleapis.com/css?family=Raleway'
type: css
primary-font-family: 'DM Sans,sans-serif'
paper-font-common-base_-_font-family: "var(--primary-font-family)"
paper-font-common-code_-_font-family: "var(--primary-font-family)"
paper-font-body1_-_font-family: "var(--primary-font-family)"
paper-font-subhead_-_font-family: "var(--primary-font-family)"
paper-font-headline_-_font-family: "var(--primary-font-family)"
paper-font-caption_-_font-family: "var(--primary-font-family)"
paper-font-title_-_font-family: "var(--primary-font-family)"
ha-card-header-font-family: "var(--primary-font-family)"
Amazing, that worked! Thanks a bunch 
mind to share some more screenshots of your setup? this looks good!
Yes, have a look here:
@rhysb - Iām using the css you posted earlier in this thread for applying background art to my room cards, and wondered if there is any way to resize the background width to around half and fade it out to blend into the text area in my screenshot below?
Iām thinking something that covers approximately the red squared area, then blends to the card background color to the left of that?
I tried a bunch of CSS after searching online, but canāt seem to get anything that looks nice.
Sure, here you go! Havenāt had the chance to put much time in to it recently so lots of things are still a work in progress hence why some cards may look offā¦
Mostly based off Minimalist with a bit of Mushy in there for good measure
thatĀ“s a nice and clean setup. mind sharing your āheader/titleā code?
You can find most of my code here:
You will need to use my theme āminimalist-shadowā for all the colours, or copy the colour codes, main-theme and -bg variables to your own.
Awesome thank you.
Any idea on this?
I am curious if this is possible and surprised no one else has done it.
I am trying to display a person entity picture IF they are home. If they are not home, I donāt want anything to display.
I get the entity picture just fine using the code below. I tried setting up a template using a similar card for my garage covers where only if the garage cover is open will it display an mdi icon, if itās closed I donāt see anything. I canāt seem to figure out how to use a picture instead of an mdi icon and then associate that to a person (or even a device_tracker) being present.
type: custom:mushroom-person-card
entity: person.guest
use_entity_picture: true
tap_action:
action: call-service
service: switch.toggle
data: {}
target:
entity_id: switch.home
Try this. Also commented on your FB post.
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
picture: >-
{% if is_state('device_tracker.john', 'home') -%}
IMAGE
{% else %}
IMAGE
{%- endif %}
When you say you dont want anything to show, do you mean you dont want the image/icon to show or you dont want the card to show? If itās the latter, you can use a conditional card to show an entity card if the person is at home, or you can use my code above (without the condition for the picture).
Is this the sort of look you want?
Mushroom Room Card with faded background:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Lounge
secondary: '{{ states("sensor.lounge_sensor_temperature") | round(0) }} Ā°C'
icon: mdi:sofa
entity: light.lounge_light
tap_action:
action: navigate
navigation_path: lounge
hold_action:
action: toggle
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background-blend-mode: darken;
}
:host {
background-image: url('/local/lounge.jpg') , linear-gradient(to right, rgba(var(--rgb-card-background-color), 1), rgba(var(--rgb-card-background-color), 0));
background-size: 50% 100%;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.lounge_motion_occupancy
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: media_player.lounge_tv
state_not: 'off'
- entity: media_player.lounge_tv
state_not: unavailable
chip:
type: template
icon_color: disabled
icon: |-
{% set media_type = state_attr('media_player.lounge_tv',
'media_content_type') %}
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-open
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
mdi:plex
{% endif %}
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: climate.air_conditioner
state_not: 'off'
chip:
type: template
entity: climate.air_conditioner
icon_color: disabled
icon: |-
{% if is_state(entity, 'heat_cool') %}
mdi:sync
{% elif is_state(entity, 'heat') %}
mdi:fire
{% elif is_state(entity, 'cool') %}
mdi:snowflake
{% elif is_state(entity, 'dry') %}
mdi:water-percent
{% elif is_state(entity, 'fan_only') %}
mdi:fan
{% else %}
mdi:air-conditioner
{% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
{% if is_state(config.entity, 'fan_only') %}
animation: rotation 2s linear infinite;
{% endif %}
}
- type: conditional
conditions:
- entity: group.lounge_windows
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{{ 'filter: grayscale(100%);' if is_state('light.lounge_light', 'off') }}
}
Exactly that, amazing thank you!
I had been trying linear gradient but couldnāt get it to look as good as that! 
Hello @rhysb I followed your example from a few weeks back to animate a fan. I used it to animate my hot tub pump (spins faster when the pump is on high etc) but now wanted a nice animation when the heater is on, I wanted to alternate between mdi:radiator-disabled and mdi-radiator in a pulsing red circle (think I can manage that bit) Any pointers gratefully received Thanks.
Hey guys,
Ive found a problem and want to ask if someone else can confirm thisā¦ I have a mushroomt-template-card configured with card_mod and want to grey out the icon if a specified state is set. Im using this code:
- type: custom:mushroom-template-card
primary: ''
icon: ''
entity: switch.docker_watchtower
layout: vertical
multiline_secondary: true
picture: /local/images/watchtower.png
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
secondary: '{{states(entity)}}'
card_mod:
style: >
mushroom-shape-avatar {
{{'filter: grayscale(100%);' if
is_state('switch.docker_watchtower','off') }}
}
This is working fine on google chrome:
But its not working on my IOS home assistant app. The icon stays colorful. Is this issue known?
regards
Alex