I need a littble bit of help,
I want to create an animation based on what page i am.
Just only show the animation based on the navigation path
this is the navigation path:
navigation_path: house
i have this one,
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: pulse 1s ease-in-out infinite;
}@Railnolds After trials and errors. Almost for giving up, I got the code
type: custom:mushroom-chips-card
chips:
- type: template
entity: fan.bano_extractor
icon: mdi:fan
icon_color: green
content: '{{ states(entity) }} '
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
{% if is_state('fan.bano_extractor', 'on') %}
ha-icon {
animation: rotation linear infinite;
animation-duration: 2s;
}
@keyframes rotation {
0% {transform: rotate(0deg);
}
100% {transform: rotate(360deg);
}
}
{% endif %}
Could you share your code please
Fantastic design
Thanks alot! I made a little changes and now it is working!
Adding grid-gap: 0px and/or margin: 0px to the layout options of the grid-layout card should help
I’ve been wondering how to sort all waste types by most recently upcoming date! I’ll definitely steal this code.
The indentation is because in your for-loop you have a space between the if-statements and the text “Bio”, “Gelber” etc.
Thanks, but no effect. I think that the issue is that the space is inside the media card rather than added by the grid card.
This should help you get started:
type: custom:mushroom-climate-card
entity: climate.office_air_conditioner
icon: none
show_temperature_control: true
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
content: "{{ state_attr(config.entity, 'current_temperature') }}°";
font-size: 14px;
position: absolute;
}
.shape {
{% set mode = state_attr(config.entity, 'hvac_action') %}
--shape-color: rgba(var(--rgb-
{%- if mode == 'heating' -%}
orange
{%- elif mode == 'cooling' -%}
blue
{%- else -%}
grey
{% endif %}), 0.2);
}
.: |
mushroom-badge-icon:after {
content: "{{ states('sensor.valve_opening') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-black));
color: rgb(var(--rgb-white));
font-weight: bolder;
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
hahah. someone helped me to write that. But I also scroll through forums to steal code 
I removed the spaces shown in the picture, then spaces were gone. but still extra line problem is there.
update:
changing like this solved extra line problem also
This should help:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
card_mod:
style: |
ha-card {
margin: 0px 0px 0px;
border-width: 0;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 58px
margin: '-14px 0px -8px -4px;'
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
volume_controls:
- volume_mute
- volume_set
- volume_buttons
media_controls: []
show_volume_level: true
use_media_info: false
icon_type: none
primary_info: none
secondary_info: none
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
box-shadow: none;
margin-right: -8px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: action
icon: mdi:volume-equal
alignment: end
name: SYNC
tap_action:
action: call-service
service: script.sonos_whole_house_volume
data: {}
target: {}
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-disabled), 0.2);
margin-top: 12px;
--chip-box-shadow: none;
--chip-border-radius: var(--control-border-radius);
--chip-border-width: 0;
--chip-height: 42px;
}
This card is perfect, well done.
But there is one thing that always bothers me with card mod which is moving icons at the very begining while page loads. I don’t know if there is any other method to prevent that. Maybe @rhysb may have an idea.
Above picture is what I am trying to explain. While loading the page for the first time or even moving from another page, the icons that were coded with margin, always floats in the screen for a second. Then it turns back to normal.
@rhysb unbelievable cool stuff you can create
It’s exactly what I had in mind. Once again a big thank you!!
Hi i am trying to replicate same thing. but I couldn’t do it. i don’t get the bag at all.
code:
- type: custom:mushroom-climate-card
entity: climate.room_climate_office
name: Office
icon: mdi:facebook-workplace
show_temperature_control: true
collapsible_controls: false
hvac_modes:
- heat
- 'off'
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.: |
mushroom-badge-icon:after {
content: "{{ states('sensor.office_thermostat_valvetappet') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-black));
color: rgb(var(--rgb-white));
font-weight: bolder;
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
I have copied this and it works well for music - However, I would like to see something similar for Apple TV, I can’t seem to get the rounded corners or “live” background? Any help would be appreciated.
Perfect. Thanks so much!
Hello. I used your code to create my card
ok: I add background: none
These are attributes of “media_player.current_playing” entity:
Can I show “media_album_name” near to media title ?
Thank you
Its a pretty long setup i have for my media dashboard. i can sheare it when I get home on monday.
But for calling implayer, i use
- type: custom:mushroom-entity-card
entity: media_player.android_tv_192_168_1_168
name: Television
layout: vertical
icon: mdi:television-box
use_entity_picture: false
fill_container: true
hide_icon: false
tap_action:
action: call-service
service: media_player.select_source
service_data:
source: com.myiptvonline.implayer
target:
device_id: 3bc91d20cc21f1be27a524f1cbc8e393
primary_info: name
secondary_info: none
icon_color: deep-orange
@rhysb : can you help with this? I want to use the mushroom media card with extra buttons for squeezelite multiroom audio. but i cant get it to work 
And what would be the change in the code when the badge should only be visible when the valve_opening is > 0?
If the valve_opening is 0 → no badge
If the valve opening > 0 → badge visible with valve opening value.
This is not doing the trick …
type: custom:mushroom-climate-card
entity: climate.master_bedr
icon: none
show_temperature_control: true
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
content: "{{ state_attr(config.entity, 'current_temperature')|replace('.', ',') }}°";
font-size: 14px;
font-weight: bolder;
color: white;
position: absolute;
}
.shape {
{% set mode = state_attr(config.entity, 'hvac_action') %}
--shape-color: rgba(var(--rgb-
{%- if mode == 'heating' -%}
orange
{%- elif mode == 'cooling' -%}
blue
{%- else -%}
grey
{% endif %}));
}
.: |
mushroom-badge-icon:after {
{% set state_on = states('sensor.valve_opening') %}
{% if state_on > 0 %}
content: "{{ states('sensor.valve_opening') }}";
{% endif %}
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-green));
color: rgb(var(--rgb-white));
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.7em;
}