Thank you so much
1 Like
Hi,
Sorry for late reply.
I set the cover card param
icon_type: entity-picture
And added attribute to cover entity using cutomize.yaml
cover.volet_amis_prop:
entity_picture: "/local/images/devices/volets/volet65.png"
1 Like
Can you share info on your salt level sensor? I’ve considered doing this so I’d like to see how you get on.
Anyone have any ideas on this?
I finally switched to mushroom themes from google theme.
but how can i get rid of this line seperating the two entries?
This is a Mushroom Horizontal Bar Gauge you could use:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 42px auto
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
entity: sensor.disk_use
icon: mdi:harddisk
icon_color: green
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:bar-card
entity: sensor.disk_use
height: 42px
min: '0'
max: '250'
entity_row: true
color: rgb(var(--mush-rgb-green))
positions:
icon: 'off'
indicator: 'off'
card_mod:
style: |
ha-card {
padding: 12px;
margin-left: 12px;
--bar-card-border-radius: 12px;
}
bar-card-value {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-name {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-backgroundbar {
opacity: 0.2;
filter: brightness(1);
}
This uses stack-in-card, card-mod, layout-card, mushroom-template-card & bar-card.
Update: Removed box shadow and improved bar color to match Mushroom
14 Likes
I’m not sure what you are trying to do? Do you want the bottom cards to look like the Master bedroom card?
I want the first card that’s a custom template card (the one with a picture) to look like the bottom card that uses a mushroom light card. Meaning the same size. The card size is significantly different right now. I prefer the big boxy look for this application.
You can comment out or remove these background bits like this:
card_mod:
style: |
:host([dark-mode]) {
#background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
#background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
1 Like
Thanks 
it works and looks so much better.
1 Like
Perfect, will give it a go!
1 Like
This is the code for the regular light card…
All I changed is from a light card to a template 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-light-card
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 {
--ha-card-background: transparent;
--card-primary-font-size: 12px;
--icon-symbol-size: 55px;
}
sort:
method: entity_id
Template 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
1 Like
Is this what you wanted?
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
entity: light.office_light
picture: local/icons/custom_icons/ceiling-lamp.png
hold_action:
action: toggle
double_tap_action:
action: more-info
layout: vertical
tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
Yes that’s exactly what I was looking for.
I’m having an issue with the rotation animation.
It works in a regular template card but not a chip template card.
What I have to spin a regular template card
card_mod:
style:
mushroom-shape-icon:
$: |
.shape ha-icon {
{% set status = state_attr('climate.daniel_s','hvac_action') %}
{% if status == 'cooling' or status == 'heating' %}
--icon-animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
This is not working in a template chips card. The status template is correct.
card_mod:
style:
mushroom-shape-icon:
$: |
.shape ha-icon {
{% set status = state_attr('climate.daniel_s','fan_mode') %}
{% if status == 'Low' %}
--icon-animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
The method is different for Mushroom Chips. Have a look here:
I figured that.
This doesn’t seem to be working.
card_mod:
style:
div:
mushroom-template-chip:
$:
mushroom-chip: |
ha-icon {
{% set status = state_attr('climate.daniel_s','fan_mode') %}
{% if status == 'Low' %}
--icon-animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Great catch. Oddly enough, I did spell it correctly in the household overview popup. Thank you very much!
Try this
type: template
icon_color: white
icon: mdi:snowflake-alert
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
animation: rotation linear infinite;
animation-duration: 2s;
}
Thanks, I will use this for the two electric cars we have. Do you know if it can be altered so the colour changes depending on the value? For instance, below 20% the bar is red, 20%-80% the bar is green and above 80% its a totally different colour?
Not sure if that will work as it’s targeting the card and not the icon?