can you share your code?
Hi, the following template is not showing the state of the sensor in the secondary information part. It is left empty. The template itself is OK. It renders fine in the template check in the developer section of HA. Any ideas why?
primary: Upstream Fehler
entity: sensor.upstream_fehler
secondary: |
{% if states('sensor.upstream_fehler') in ['unknown','unavailable'] %}
Offline
{% else %}
{{ states('sensor.upstream_fehler') }}
{% endif %}Do this in a chip and I will give you a cookie.
I figured out that the issue is that the template renders to 0 (zero). Zero is not displayed, even if just using the number zero instead of the template. The following also does NOT work.
{% if states('sensor.upstream_fehler') in ['unknown','unavailable'] %}
Offline
{% else %}
0
{% endif %}
The following works:
secondary: |
{% if states('sensor.upstream_fehler') in ['unknown','unavailable'] %}
Offline
{% else %}
- {{ states('sensor.upstream_fehler') }} -
{% endif %}
It would be awesome to have style supported in the visual editor
2 Likes
Who wants a cookie? 
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:cookie
icon_color: brown
content: Cookie
card_mod:
style:
mushroom-template-chip$: |
ha-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
12 Likes
Mind posting your yaml?
How are you getting the fan to rotate?
I think I already posted it in here but here it is again:
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
icon: |-
{% if is_state('fan.YOURFAN', 'on') %}
mdi:fan
{% else %}
{% endif %}
icon_color: |-
{% if is_state_attr('fan.YOURFAN', 'preset_mode',
'Normal')%}
blue
{% elif is_state_attr('fan.YOURFAN', 'preset_mode',
'Nature')%}
green
{% else %}
disabled
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
entity: fan.YOURFAN
card_mod: null
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
--chip-box-shadow: 0px 0px;
animation: rotation linear infinite;
{% if states('fan.YOURFAN') == 'on' %}
animation-duration: 3s;
{%- else -%}
{%- endif %}
}
And it’s right above your question:
3 Likes
Just want to say, I enjoy watching this thread - some great ideas being thrown around (which I may have borrowed for my dashboard 
)
@rhysb - You are some sort of CSS god… we need to get all these code snippets you’ve posted made available in some kind of card mod cookbook 
7 Likes
With all the secondary information bit on the “room” cards, is there any easy way to show the motion icon if there has been any motion within X (example last 15mins) and not just the current state?
Is there a way to fan and other icon higher up? More inline with the 19c but still on the right?
@swifty agreed! Some sort of wiki or even on the GitHub repo wiki!
Although it’s kinda highjacking the Mushroom Card topic I’d also love to have some kind of glossary for the various mods.
Whatabout something thomasloven and did in the Card-mod thread: 🔹 Card-mod - Add css styles to any lovelace card - #1396 by Ildar_Gabdullin
A simple post with all mods and the TS - @piitaya in this case - would link that in the opener. But…somebody would have to collect and care for actuality.
5 Likes
Of course you can do this by using custom:stack-in-card and mode: horizontal so you would have the chips to the right and not at the bottom.
Maybe have a placeholder in a vertical stack to have the wanted chip in the lower right corner
You could steal some code here: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #996 by RodgerDodger
Can you share your roborock card ?
Here you go!
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
entity_id: vacuum.xiaomi_vacuum_cleaner
primary: Roborock S4
secondary: '{{ states(entity) }}'
icon: mdi:vacuum
entity: vacuum.xiaomi_vacuum_cleaner
icon_color: white
tap_action:
action: call-service
service: vacuum.pause
data: {}
target:
entity_id: vacuum.xiaomi_vacuum_cleaner
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
background: #3d5afe
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
icon: mdi:play
entity: script.1590800934038
icon_color: white
layout: vertical
tap_action:
action: call-service
service: script.turn_on
service_data: {}
target:
entity_id: script.1590800934038
secondary: Start
- type: custom:mushroom-template-card
icon: mdi:delete
icon_color: white
entity_id: script.empty_vacuum
tap_action:
action: call-service
service: script.turn_on
service_data: {}
target:
entity_id: script.empty_vacuum
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
secondary: Empty
- type: custom:mushroom-template-card
layout: vertical
entity: vacuum.xiaomi_vacuum_cleaner
icon: mdi:home-alert
icon_color: white
tap_action:
action: call-service
service: vacuum.return_to_base
service_data: {}
target:
entity_id: vacuum.xiaomi_vacuum_cleaner
double_tap_action:
action: none
hold_action:
action: none
secondary: Dock
card_mod:
style: |
ha-card {
--chip-box-shadow: 0px 0px;
background: #3d5afe
}
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
card_mod: null
style: |
ha-card {
background: #3d5afe
}
2 Likes
Brilliant! I was able to finally get the fan to spin in the chip and still have content with this code, thank you! 
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: fan.fans
state: 'on'
chip:
type: template
entity: sensor.count_fans_on
icon: mdi:fan
icon_color: green
tap_action:
action: call-service
service: fan.turn_off
data: {}
target:
entity_id: fan.fans
content: '{{ states(entity) }}'
style:
div:
mushroom-template-chip:
$:
mushroom-chip: |
ha-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Can you share your code for your dashboard? I think you’ve done a really nice job and would like to build something similar. Thanks!
Sure, it starts with the scripts - pasting one example:
start_radio1:
alias: 'Start Radio1'
sequence:
- service: media_player.volume_mute
data:
entity_id: media_player.gh_mini
is_volume_muted: true
- service: spotcast.start
data:
device_name: 'Salon'
uri: 'spotify:track:5V3b2UB9tCAHuqXj2b2EP7' # track with 1 second of silence
- service: media_player.volume_mute
data:
entity_id: media_player.gh_mini
is_volume_muted: false
- service: media_player.volume_set #setting the volume is optional ofcourse
data:
entity_id: media_player.gh_mini
volume_level: 0.1
- service: media_player.play_media
target:
entity_id: media_player.gh_mini
data:
media_content_type: music
media_content_id: "http://217.74.72.11/rmf_fm"
RMF maxx url: RMF MAXXX Kraków - RMF MAXXX Kraków - słuchaj w RMF ON
eska:http://www.pldm.ml/radio.php?id=-1&url=http://www.eskago.pl/radio/eska-malopolska-zakopane"
zet:
https://zt.cdn.eurozet.pl/zet-tun.mp3"
then here is the whole lovelace card:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 51% 49%
grid-template-rows: auto
cards:
- type: custom:mushroom-media-player-card
entity: media_player.gh_mini
layout: horizontal
tap_action:
action: toggle
hold_action:
action: more-info
use_media_artwork: true
style: |
ha-card {
box-shadow: 0px 0px;
- type: conditional
conditions:
- entity: media_player.gh_mini
state_not: 'off'
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:play
show_icon: false
name: test
tap_action:
action: call-service
service: media_player.media_play
service_data:
entity_id: media_player.gh_mini
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: template
icon: mdi:pause
tap_action:
action: call-service
service: media_player.media_pause
service_data:
entity_id: media_player.gh_mini
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: template
icon: mdi:stop
tap_action:
action: call-service
service: media_player.media_stop
service_data:
entity_id: media_player.gh_mini
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: template
icon: mdi:skip-forward
tap_action:
action: call-service
service: media_player.media_next_track
service_data:
entity_id: media_player.gh_mini
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
alignment: center
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:plus
tap_action:
action: call-service
service: script.volumeup
service_data:
entity_id: media_player.gh_mini
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: template
card_mod: null
content: >-
{{ state_attr('media_player.gh_mini', 'volume_level') |
round(2,default="0") *10 }}
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: template
icon: mdi:minus
tap_action:
action: call-service
service: script.volumedown
service_data:
entity_id: media_player.gh_mini
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
alignment: center
- type: horizontal-stack
cards:
- type: custom:text-divider-row
text: Spotify
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
fill_container: false
multiline_secondary: false
primary: Daily Mix 1
layout: vertical
tap_action:
action: call-service
service: script.start_radio1
- type: custom:mushroom-template-card
fill_container: false
multiline_secondary: false
primary: Daily Mix 2
layout: vertical
tap_action:
action: call-service
service: script.start_radio1
- type: custom:mushroom-template-card
fill_container: false
multiline_secondary: false
primary: Weekly
layout: vertical
tap_action:
action: call-service
service: script.start_radio1
- type: custom:text-divider-row
text: Radio
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi
fill_container: false
multiline_secondary: false
layout: vertical
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/images/radia/rmf_v3.png' ) no-repeat center 0px;
background-size: 60px 35px;
}
tap_action:
action: call-service
service: script.start_radio1
- type: custom:mushroom-template-card
icon: mdi
fill_container: false
multiline_secondary: false
layout: vertical
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/images/radia/rmf_maxxx_v2.png' ) no-repeat center 0px;
background-size: 60px 40px;
}
tap_action:
action: call-service
service: script.start_radio2
- type: custom:mushroom-template-card
icon: mdi
fill_container: false
multiline_secondary: false
layout: vertical
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/images/radia/eska_v2.png' ) no-repeat center 0px;
background-size: 50px 45px;
}
tap_action:
action: call-service
service: script.start_radio3
- type: custom:mushroom-template-card
icon: mdi
fill_container: false
multiline_secondary: false
layout: vertical
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/images/radia/zet_v2.png' ) no-repeat center 0px;
background-size: 60px 40px;
}
tap_action:
action: call-service
service: script.start_radio4
2 Likes
posted here 