so when you are planning to share the code :)?
I am not finished yet 
I will post right after I complete it.
1 Like
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):
- Add to your resources.yaml file the below. I have added a few myself, like the below:
- 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
- Add the below to the theme you are using, changing the of the font on the first line to the one you want to use globally across HA:
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)"
- Reload themes and resources, or restart.
5 Likes
Amazing, that worked! Thanks a bunch 
mind to share some more screenshots of your setup? this looks good!
Yes, have a look here:
1 Like
@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
36 Likes
that´s a nice and clean setup. mind sharing your âheader/titleâ code?
1 Like
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.
13 Likes
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') }}
}
18 Likes
Exactly that, amazing thank you!
I had been trying linear gradient but couldnât get it to look as good as that! 
1 Like
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
is there a way to hide the name âLounge Lightâ ? i tried to put âshow_name: falseâ on some places but no luck
just dont put the name in
