Can someone have a look and tell me if this is formatted correctly? This is a section from a mushroom-template-card. The code works, but as you can see, the editor doesn’t seem to like it, and when I save the code, I get a warning that “comments will be deleted”, so the editor is seeing the hex color codes as comments, but they aren’t actually deleted and they do work as expected on the dashboard. I’ve tried a couple of different things formatting wise, but they all result in no color changes. Basically, should this be different?
you need single quote " ’ " around color hex codes eg. ‘#00d0b1’
I would swear I tried that and fixed the comment issue, but broke the color change. I’ve just gone back and done it though and its working now, so I must not have done it properly the first time. Thank you.
Is there a way to use another entity’s image as an icon in a mushroom chips card?
chip:
type: entity
entity: sensor.personiphoneble
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
name: Person
content_info: state
icon: person.person
Update: Best way I found to do this is to use the chips card then template option then rely on referencing the state or image indirectly.
Dear Community,
it’s possible add a button/switch in right corner???
my goal is turn off and turn on the NAS.
my code is:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#nas'
name: Network Area Storage
- type: grid
columns: 1
square: false
cards:
- type: custom:bubble-card
card_type: separator
name: Nas
icon: mdi:nas
styles: |
.separator-container div:last-child {
opaticy: 1|important;
}
- type: custom:vertical-stack-in-card
mode: horizontal
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.nas007_ping
color: '#14ff8d'
hours_to_show: 8
points_per_hour: 8
hour24: true
line_width: 1
bar_spacing: 10
update_interval: 30
height: 70
aggregate_func: avg
group: true
animate: true
show:
labels: false
fill: gradient
state: false
name: false
icon: false
card_mod:
style: |
ha-card {
border-radius: 8px;
margin-bottom: -60px;
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
primary: Nas007
secondary: >-
{% set
attr=state_attr('binary_sensor.nas007_stploop_com','round_trip_time_avg')
%} {% set state=states('binary_sensor.nas007_stploop_com',
'round_trip_time_avg') %} {% if attr==None%}
🟥 0 ms - Down
{% elif attr>10%}
🟨 {{ state_attr('binary_sensor.nas007_stploop_com', 'round_trip_time_avg') }} ms - Raggiungibile
{% elif attr<10%}
🟩 {{ state_attr('binary_sensor.nas007_stploop_com', 'round_trip_time_avg') }} ms - Raggiungibile
{% endif %}
picture: /local/loghi/zyxel.png
tap_action:
action: navigate
navigation_path: '#nas007'
card_mod:
style: |
ha-card {
--icon-size: 35px;
--icon-border-radius: 0;
height: !important;
background: transparent;
}
Let me know
Thanks!
Does anyone have code for this Area card? thanks
- type: horizontal-stack
cards:
- type: "custom:stack-in-card"
cards:
- type: custom:mushroom-template-card
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.eetplaats
icon: mdi:air-conditioner
icon_color: X,x,x
I added the chips card and changed the icon color to the same color as the background. Because I want to reserve the empty space to have a cleaner nicer stack in card.
Is there a better way to get that empty space ?
So to make it short… I dont want the airco icon, but still want the grey space around it …
if I am understanding you correctly. you can just add padding to the template card.
type: custom:mushroom-entity-card
entity: sun.sun
card_mod:
style: |
ha-card {
padding-bottom: 50px !important ;
}
It was not what I wanted (because the chips card gives me a little difference in color by a card mod style). But what you gave me is better 
thanks
the only problem I’ve got now, is that the padding bottom is not clickabele. The tap action on the custom:mushroom-template-card stops at the padding bottom…
if you want the whole card clickable you could do this with custom layout card
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:stack-in-card
view_layout:
grid-column-start: 1
grid-row-start: 1
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
padding-bottom: 50px !important ;
primary: home
icon: mdi:home
- type: custom:layout-card
layout_type: custom:grid-layout
- type: button
view_layout:
grid-column-start: 1
grid-row-start: 1
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: none ;
border-style: none;
}
1 Like
- type: horizontal-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:stack-in-card
view_layout:
grid-column-start: 1
grid-row-start: 1
cards:
- type: custom:mushroom-template-card
primary: '{{ states(''input_text.ruimte_1'')}}'
icon: mdi:lightbulb
entity: switch_keuken_verlichting #switch_ruimte1_verlichting
tap_action:
action: toggle
icon_color: >
{% if is_state("switch_ruimte1_verlichting", 'on') %}
orange
{% else %}
138,153,119
{% endif %}
fill_container: true
layout: horizontal
multiline_secondary: false
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);
}
ha-card {
padding-bottom: 55px !important ;
}
- type: button
entity: switch_keuken_verlichting #switch_ruimte1_verlichting
view_layout:
grid-column-start: 1
grid-row-start: 1
tap_action:
action: toggle
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);
}
ha-card {
padding-bottom: 55px !important ;
}
like this ?
your missing
- type: custom:layout-card
layout_type: custom:grid-layout
under
- type: custom:mushroom-template-card
plus ha-card needs background none
ha-card {
padding-bottom: 55px !important ;
background: none;
}
one more thing I noticed which I didn’t include is add this to the button so it hides icon and name
show_name: false
show_icon: false
Is there anyway to rotate the mdi:icon 90 degrees in general and then still make the animation work? Basically I’m trying to rotate the sprinkler animation in order for it to point the sprayer up at all times and then when I turn the entity on it’s associated with for the animation to work. I’m trying to use it for a sundeck bubbler in my pool and this was the closest looking icon I could find that would look good if it was pointing the sprayer up instead of to the right.
Thanks
This will rotate the icon.
type: custom:mushroom-template-card
icon: mdi:sprinkler
icon_color: cyan
primary: Sprinkler
card_mod:
style: |
ha-state-icon {
rotate: -90deg;
margin: 10px 0px 22px 22px;
animation: sprinkle 2s linear infinite;
transform-origin: 29% 88%;
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
2 Likes
Awesome! thank you!!
Looking for some assistance if possible, i would like to remove the white background when the card is un-collapsed
type: custom:collapsable-cards
title: Group control
cards:
- type: custom:auto-entities
filter:
include:
- domain: automation
area: beau_s_room
options:
type: tile
icon_tap_action:
action: toggle
tap_action:
action: more-info
color: primary
- domain: script
area: beau_s_room
options:
type: tile
icon_tap_action:
action: toggle
tap_action:
action: more-info
color: primary
show_empty: false
card_param: cards
card:
square: false
type: grid
columns: 2
sort:
method: state
reverse: false
card_mod:
style: |
ha-card {
background: transparent !important;
box-shadow: none !important;
}
Your post is not Mushroom related. I would suggest posting in the appropriate thread.
I don’t get it right 
##########
# Ruimte 1#
##########
- type: horizontal-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:stack-in-card
view_layout:
grid-column-start: 1
grid-row-start: 1
cards:
- type: custom:mushroom-template-card
primary: '{{ states(''input_text.ruimte_1'')}}'
icon: mdi:lightbulb
entity: switch_keuken_verlichting #switch_ruimte1_verlichting
tap_action:
action: toggle
icon_color: >
{% if is_state("switch_ruimte2_verlichting", 'on') %}
orange
{% else %}
138,153,119
{% endif %}
fill_container: true
layout: horizontal
multiline_secondary: false
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);
}
ha-card {
padding-bottom: 55px !important ;
}
- type: button
view_layout:
grid-column-start: 1
grid-row-start: 1
tap_action:
action: toggle
show_name: false
show_icon: false
card_mod:
style: |
ha-card {
background: none ;
border-style: none;
padding-bottom: 55px !important ;
}
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
}
######
# Ruimte2
#######
- type: "custom:stack-in-card"
cards:
- type: custom:mushroom-template-card
primary: '{{ states(''input_text.ruimte_2'')}}'
icon: mdi:lightbulb
entity: switch_keuken_verlichting #switch_ruimte2_verlichting
tap_action:
action: toggle
icon_color: >
{% if is_state("switch_ruimte2_verlichting", 'on') %}
orange
{% else %}
138,153,119
{% endif %}
fill_container: true
layout: horizontal
multiline_secondary: false
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);
}
ha-card {
padding-bottom: 55px !important ;
}
it is smaller, and looks like a square
Can I ask where did you get this code? There is a lot here that is either unnecessary or not even working.
For example:
entity: switch_keuken_verlichting
{% else %}
138,153,119
- type: "custom:stack-in-card"
You can extend the clickable area multiple ways. Here is an alternative…
- type: custom:mushroom-template-card
primary: test
icon: mdi:lightbulb
entity: switch.kitchen_lights
tap_action:
action: toggle
icon_color: |
{% if is_state('switch.kitchen_lights', 'on') %}
orange
{% else %}
red
{% endif %}
fill_container: true
layout: horizontal
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 40px;
}
Used my entities to test so you’ll need to adjust