@rhysb Hi, love your work! Do you think is it possible to animate a badge icon? (for exemple for a blinking battery alert). Thanks in advance.
1 Like
please share your configuration!!!
Can someone kindly help me with reducing the white space at the bottom of my card? It appears to be caused by a before pseudo element - setting a padding-bottom of 184.5px - which is a child of div#root in the grid card. Am i able to mod the CSS? I’ve tried without success.
My card yaml is:
type: custom:stack-in-card
cards:
- type: custom:mushroom-title-card
title: Media
- type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.bedroom_currently_playing
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
{% set media_type = state_attr(config.entity, 'media_content_type') %}
--card-mod-icon:
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-open
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
mdi:play
{% endif %};
}
card_mod:
style: |
ha-card {
{% if not is_state('media_player.bedroom_currently_playing', 'off') and not is_state('media_player.bedroom_currently_playing', 'idle') %}
background: url( '{{ state_attr("media_player.bedroom_currently_playing", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
{% if state_attr('media_player.bedroom_currently_playing', 'media_content_type') == 'tvshow' %}
background-size: auto 100%, cover;
{% else %}
background-size: 50% auto, cover;
{% endif %}
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% endif %}
}
- square: true
columns: 2
type: grid
cards:
- type: custom:mushroom-template-card
icon: phu:nvidia-shield
entity: switch.bedroom_hub_tv
tap_action:
action: toggle
icon_color: '{{ "green" if is_state(entity, "on") else "disabled" }}'
layout: vertical
- type: custom:mushroom-template-card
icon: phu:firetv
entity: switch.bedroom_hub_fire_tv
tap_action:
action: toggle
icon_color: '{{ "green" if is_state(entity, "on") else "disabled" }}'
layout: vertical
Thanks in advance for any assistance
Is it possible to centre the chip in the middle?
Code:
type: custom:mushroom-chips-card
chips:
- type: template
content: '{{ now().strftime(''%H:%M %a, %d %b'') }}'
- type: light
entity: light.living_all_lights
content_info: none
use_light_color: true
tap_action:
action: toggle
- type: template
content: '{{ states(''sensor.outdoor_temperature}} °C'
show_conditions: true
show_temperature: true
tap_action:
action: navigate
navigation_path: weather
alignment: justify
1 Like
Hi, there are options (margin, outer_padding) for the stack-in-card i think:
- type: custom:stack-in-card
mode: horizontal
keep:
box_shadow: true/false
margin: true/false
border_radius: true/false
background: true/false
outer_padding: true/false
A little messy but here are my chips 
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:thermometer
content: >-
{{states('sensor.temperatur_lavest')|int}}-{{states('sensor.temperatur_hoyest')|int}}°
tap_action:
action: more-info
entity: sensor.temperatur_lavest
hold_action:
action: more-info
- type: template
entity: sensor.fuktighet_lavest
icon: mdi:water
icon_color: light-blue
content: '{{states(entity)| int}}-{{states(''sensor.fuktighet_hoyest'') | int}}%'
tap_action:
action: more-info
hold_action:
action: more-info
- type: template
entity: sensor.netatmo_innemodul_air_health
icon: mdi:weather-windy
icon_color: green
content: |+
{% set netatmo=states('sensor.netatmo_innemodul_air_health') %}
{% set p1=states('sensor.p1_air_health') %}
{% if netatmo == 'Farlig' or p1 == 'Farlig' %}
Farlig
{% elif netatmo == 'Veldig Dårlig' or p1 == 'Veldig Dårlig' %}
Veldig Dårlig
{% elif netatmo == 'Dårlig' or p1 == 'Dårlig' %}
Dårlig
{% elif netatmo == 'Ok' or p1 == 'Ok' %}
Ok
{% elif netatmo == 'Bra' or p1 == 'Bra' %}
Bra
{% elif netatmo == 'Utmerket' or p1 == 'Utmerket' %}
Utmerket
{% else %}
error
{% endif %}
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: more-info
- type: template
entity: sensor.eva_meter_reader_smartenergymetering
icon: mdi:lightning-bolt
icon_color: '{{''orange'' if ((states(entity)|int) > 3000) else ''amber'' }}'
content: '{{states(entity)}} W'
tap_action:
action: navigate
navigation_path: /lovelace/strom
hold_action:
action: navigate
navigation_path: /lovelace/strom
- type: conditional
conditions:
- entity: sensor.current_lights_on
state_not: '0'
chip:
type: template
icon: >-
{{ "mdi:lightbulb-group" if states(entity) | int > 1 else
"mdi:lightbulb" }}
double_tap_action:
action: none
entity: sensor.current_lights_on
icon_color: amber
tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card:after {
content: "{{ states('sensor.current_lights_on') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
- type: conditional
conditions:
- entity: sensor.current_speakers_playing
state_not: '0'
chip:
type: template
entity: sensor.current_speakers_playing
icon: '{{ state_attr(entity, ''icon'') }}'
icon_color: teal
tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card:after {
content: "{{ states('sensor.current_speakers_playing') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-teal));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
- type: conditional
conditions:
- entity: switch.varmtvannsbereder
state: 'off'
chip:
type: template
double_tap_action:
action: none
entity: switch.varmtvannsbereder
tap_action:
action: navigate
navigation_path: /lovelace/varmtvann
hold_action:
action: none
icon: mdi:water-boiler
icon_color: grey
- type: conditional
conditions:
- entity: binary_sensor.foliestatus
state: 'on'
chip:
type: entity
entity: sensor.varmefolie_sanntid
icon: mdi:radiator
icon_color: orange
content_info: none
- type: conditional
conditions:
- entity: binary_sensor.contactsensor_inngangspartidor
state: 'on'
chip:
type: entity
entity: binary_sensor.contactsensor_inngangspartidor
content_info: name
- type: conditional
conditions:
- entity: binary_sensor.contactsensor_stuedor_kontaktsensor
state: 'on'
chip:
type: entity
entity: binary_sensor.contactsensor_stuedor_kontaktsensor
name: Altan
content_info: name
- type: conditional
conditions:
- entity: binary_sensor.contactsensor_utebod_kontaktsensor_door
state: 'on'
chip:
type: entity
entity: binary_sensor.contactsensor_utebod_kontaktsensor_door
name: Utebod
content_info: name
- type: conditional
conditions:
- entity: binary_sensor.contactsensor_fryseboks
state: 'on'
chip:
type: template
double_tap_action:
action: more-info
entity: binary_sensor.contactsensor_fryseboks
icon: mdi:fridge-alert
icon_color: red
content: Fryseboks
tap_action:
action: more-info
hold_action:
action: more-info
- type: conditional
conditions:
- entity: switch.front_door_live_stream
state: 'on'
chip:
type: template
entity: switch.front_door_live_stream
icon: mdi:record-rec
icon_color: red
tap_action:
action: toggle
- type: conditional
conditions:
- entity: binary_sensor.leaf_lader
state: 'on'
chip:
type: template
icon: mdi:car-electric
icon_color: blue
tap_action:
action: navigate
navigation_path: leaf
alignment: center
4 Likes
Brilliant, works a charm, wish I could get my head round this templating and css.
1 Like
Change square: true to square: false.
1 Like
For those triggered by an off-center Chip 
, you can center it properly like this.
Mushroom Chip True Center:
type: custom:mushroom-chips-card
chips:
- type: template
content: '{{ now().strftime(''%H:%M %a, %d %b'') }}'
- type: light
entity: light.office_light
content_info: none
use_light_color: true
tap_action:
action: toggle
card_mod:
style: |
ha-card {
position: absolute;
left: calc(50% - (var(--chip-height) / 2));
}
- type: template
content: '{{ states(''sensor.weatherflow_feels_like_temperature'')}} °C'
show_conditions: true
show_temperature: true
tap_action:
action: navigate
navigation_path: weather
alignment: justify
6 Likes
Thanks for the suggestions. I tried them all without success; changing to a custom-layout card did the trick.
Ty. That was it. I didn’t even think to change that.
1 Like
Yes, you can like this.
Mushroom Badge Animation:
type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
badge_icon: mdi:snail
badge_color: green
card_mod:
style: |
mushroom-badge-icon {
animation: pulse 1s infinite;
}
@keyframes pulse {
50% { opacity: 0;}
}
8 Likes
Got ispired and made a wind-chip.
It shows the direction and the wind force in beaufort.
Although the outcome of my cut-and-paste code is oké, I doubt whether this is correct.
Could you check?
type: custom:mushroom-chips-card
chips:
- type: template
content: ""
icon: mdi:navigation
card_mod:
style: |
ha-card:after {
content: "{{ state_attr('sensor.knmi_home_wind', 'beaufort')|round(0) }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: var(--primary-text-color);
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -6px;
right: -6px;
width: 16px;
height: 16px;
font-size: 11px;
}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
{% set BEARING = state_attr('sensor.knmi_home_wind', 'graden') %}
transform: rotate({{BEARING}}deg);
}
3 Likes
Apologies for not taking the time to look, I was hoping someone could quickly tell me how to change the colours for the media card and slider? ie. green when playing, blue when paused, grey when idle/everything else etc.
Working on a new AND FINAL tablet layout, here is the Sonos card broken up to allow Mushy to shine.
7 Likes
Here you go:
Good job 
.
The only thing I could suggest is that you could do away with the second card_mod and complex selector to put it in .content like this:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:navigation
card_mod:
style: |
ha-card:after {
content: "{{ states('sensor.weatherflow_beaufort') | round(0) }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: var(--primary-text-color);
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -6px;
right: -6px;
width: 16px;
height: 16px;
font-size: 11px;
}
.content {
transform: rotate({{ states('sensor.weatherflow_wind_bearing') }}deg);
}
2 Likes
very nice. What is this card layout called? How did you make the left bar?
Chip Card Help anyone?
Is it possible to add text to a chip card entity?
I am using them to display my internet connection and while i have icons, I would like to add text to them.
Is that possible? I have read the threads but unfortunatly I cannot find an answer.
Moin,
you must take a template chip. Here is an example:
- type: template
icon_color: blue
content: |2-
test
{{ states('sensor.openweathermap_forecast_precipitation_probability') }}% | {{
states('sensor.openweathermap_forecast_precipitation' ) | int }}mm
icon: mdi:weather-pouring
Greets
Basti
2 Likes
I previously had customized the font size in the Mushroom Light card but after the update to HA 2022.11 it was removed. Now I can’t remember how to do it again and how do I make sure that it is not overwritten again?