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;
}
6 Likes
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
2 Likes
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;
}
3 Likes
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!!
4 Likes
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!
1 Like
Hello. I used your code to create my card
Can I remove background ?
thank you
ok: I add background: none
2 Likes
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;
}
Try like this:
{% if states('sensor.valve_opening') | float > 0 %}
content: "{{ states('sensor.valve_opening') }}";
{% endif %}
Your selector is not correct. Should be something like this:
card_mod:
style: |
mushroom-badge-icon:after {
Have a look here:
Just use the attribute media_album_name for the content.
1 Like
I’m trying to get this to work for me with no luck, I’m trying to make my chips bigger, current code is:
type: custom:mushroom-chips-card
chips:
- type: weather
entity: weather.forecast_smithhouse
show_conditions: true
show_temperature: true
- type: light
entity: light.scott_s_bedroom
name: All Lights
content_info: name
when I add in the card_mod lines, it just does nothing. Any advice @rhysb ?
This will enlarge all the Chips:
type: custom:mushroom-chips-card
chips:
- type: weather
entity: weather.forecast_smithhouse
show_conditions: true
show_temperature: true
- type: light
entity: light.scott_s_bedroom
name: All Lights
content_info: name
card_mod:
style: |
ha-card {
--chip-height: 48px;
--chip-border-radius: 20px;
}
Make sure you have card-mod installed.
1 Like
Hello, can someone help with code? My animation is not working:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
columns: 2
layout: {}
cards:
- type: custom:mushroom-template-card
primary: ☕ Kávovar
secondary: null
icon: mdi:coffee-maker
icon_color: |
{% if is_state('switch.kavovar_power', 'on') %}
brown
{% else %}
disabled
{% endif %}
fill_container: true
multiline_secondary: true
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
{% if is_state('sensor.kavovar_operation_state', 'run') %}
ha-icon {
--icon-animation: java 2s linear infinite;
}
{% endif %}
@keyframes rotating {
0%, 80%, 100% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 0 100%); }
10% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 77%, 55% 80%, 57% 100%, 0 100%); }
15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 77%, 55% 80%, 55% 100%, 0 100%); }
20% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 76%, 55% 76%, 57% 100%, 0 100%); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 76%, 55% 76%, 56% 100%, 0 100%); }
30% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 55%, 42% 69%, 44% 73%, 55% 73%, 57% 100%, 0 100%); }
35% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 54%, 42% 69%, 44% 73%, 55% 73%, 56% 100%, 0 100%); }
40% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 57% 70%, 57% 100%, 0 100%); }
45% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 55% 70%, 56% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 57% 65%, 57% 100%, 0 100%); }
55% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 55% 65%, 56% 100%, 0 100%); }
60% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 57% 60%, 57% 100%, 0 100%); }
65% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 55% 60%, 56% 100%, 0 100%); }
70% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 57% 56%, 57% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 55% 56%, 55% 100%, 0 100%); }
}
.: |
ha-card {
--card-primary-font-size: 24px;
--card-secondary-font-size: 18px;
--icon-size: 96px;
}