Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

brewston · December 9, 2023, 2:10pm

I have this media card :
ksnip_20231209-140443
based on something rhysb posted once

type: custom:stack-in-card
cards:
  - type: custom:mushroom-media-player-card
    entity: media_player.mymediaplayer
    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 {
          display: flex;
          {% set media_type = state_attr(config.entity, 'media_content_type') %}
          {% if  media_type == 'music' %}
            --card-mod-icon: mdi:music;
            animation: beat 1.3s ease-out infinite both;
          {% elif media_type == 'playlist' %}
            --card-mod-icon: mdi:music;
            animation: beat 1.3s ease-out infinite both;
          {% else %}
            --card-mod-icon: mdi:play;
          {% endif %}

          {{ 'animation: none;' if not is_state(config.entity, 'playing') }}

        }
        @keyframes flicker {
          0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
          32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
        }
        @keyframes beat {
          0%, 60% { --icon-symbol-size: 21px; }
          5%, 17%, 57% { --icon-symbol-size: 22px; }
          10%, 20%, 51% { --icon-symbol-size: 23px; }
          25%, 45% { --icon-symbol-size: 24px; }
          30%, 39% { --icon-symbol-size: 25px; }
          33% { --icon-symbol-size: 26px; }
        }
        ha-card {
          --ha-card-border-width: 0;
        }
  - type: conditional
    conditions:
      - entity: media_player.mymediaplayer
        state_not: 'off'
      - entity: media_player.mymediaplayer
        state_not: idle
    card:
      entity: media_player.mymediaplayer
      hide:
        icon: true
        name: true
        runtime: true
        source: true
        power: true
        state_label: true
        volume: true
        info: true
        progress: false
        controls: true
      more_info: false
      type: custom:mini-media-player
      toggle_power: false
      group: true
      card_mod:
        style:
          mmp-progress$: |
            paper-progress {
              {{ '--paper-progress-container-color: rgba(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
            }
          .: |
            ha-card {
              margin: 0px 12px 12px;
              --mmp-progress-height: 12px !important;
              height: var(--mmp-progress-height);
              --mmp-accent-color: rgb(var(--rgb-indigo-color));
              --mmp-border-radius: 12px !important;
              --ha-card-border-width: 0;
            }
card_mod:
  style: |
    ha-card::before {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      {% if not is_state('media_player.lounge_speaker', 'idle') %}
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        background: url( '{{ state_attr('media_player.mymediaplayer', "entity_picture") }}' ) center no-repeat;
        filter: blur(150px) saturate(400%);
        background-size: 100%;
      {% endif %}
    }
    ha-card {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      --ha-card-border-width: 0;
      --primary-text-color: rgb(ff,bf,00);
      --secondary-text-color: rgb(ff,bf,00);
      {% if not is_state('media_player.mymediaplayer', 'idle') %}
        background: url( '{{ state_attr("media_player.mymediaplayer", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 90%);

       
          background-size: 20% auto, cover;
       

        background-position: right;
        background-repeat: no-repeat;
        background-blend-mode: saturation;
      {% endif %}
    }

I’d like to know how to

Swap the artist with the track (ie swap primary & secondary information)
Square off the album cover on the right handside, whilst retaining the rounded edges to the actual card

Thanks

bjesus75 · December 9, 2023, 2:45pm

what am i doing wrong?

            card_mod:
                    style: |
                      ha-card {
                        background: #afc9d1;
                        box-shadow: none;
                        border: none !important; 
                        }
                      mushroom-shape-avatar$: |
                        .picture {
                          animation: ping 2s infinite;
                        }
                        @keyframes ping {
                          0% {
                            box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
                          }
                          
                          100% {
                            box-shadow: 0 0 5px 15px transparent;
                          }
                        }

dimitri.landerloos · December 9, 2023, 5:36pm

Next time do please state what you are trying to achieve. But in essence your problem is that you cant have 2 | in a row which you had here (if you removed the extra things you had listed)

card_mod:
  style: |
    mushroom-shape-avatar$: |

This is not allowed. You need to only have 1 | so like this:

card_mod:
  style: 
    mushroom-shape-avatar$: |

Then to get back to using style: | which you need for your ha-card you can use .: | this is used to take you back like this:

card_mod:
  style:
    mushroom-shape-avatar$: |
      .picture {
        something: test;
      }
    .: |
      ha-card {
        something-else: test;
      }

So to fix your code it would be like this:

card_mod:
  style: 
    mushroom-shape-avatar$: |
      .picture {
        animation: ping 2s infinite;
      }
      @keyframes ping {
        0% {box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);} 
        100% {box-shadow: 0 0 5px 15px transparent;}
      }
    .: |
      ha-card {
        background: #afc9d1;
        box-shadow: none;
        border: none !important; 
      }

bjesus75 · December 9, 2023, 7:22pm

dimitri.landerloos:

card_mod:
  style: 
    mushroom-shape-avatar$: |
      .picture {
        animation: ping 2s infinite;
      }
      @keyframes ping {
        0% {box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);} 
        100% {box-shadow: 0 0 5px 15px transparent;}
      }
    .: |
      ha-card {
        background: #afc9d1;
        box-shadow: none;
        border: none !important; 
      }

this now works, but when person is away, how to change the color of the ping?

type: custom:mushroom-person-card
mode: vertical
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 5px 1px rgba(var(–rgb-green), 0.7);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
background: #afc9d1;
box-shadow: none;
border: none !important;
}

dimitri.landerloos · December 9, 2023, 7:32pm

Im not trying to be annoying, but please just ask all your questions in the first post please

But you can use templates in card mod. So like this:

card_mod:
  style:
    mushroom-shape-avatar$: |
      .picture {
        {% if states(config.entity) == 'home' %}
          animation: pinghome 2s infinite;
        {% elif states(config.entity) == 'away' %}
          animation: pingaway 2s infinite;
        {% endif %}
      }
      @keyframes pinghome {
        0% {box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);} 
        100% {box-shadow: 0 0 5px 15px transparent;}
      }
      @keyframes pingaway {
        0% {box-shadow: 0 0 5px 1px rgba(var(--rgb-red), 0.7);} 
        100% {box-shadow: 0 0 5px 15px transparent;}
      }
    .: |
      ha-card {
        background: #afc9d1;
        box-shadow: none;
        border: none !important; 
      }

Tadies · December 9, 2023, 8:26pm

Dimitri?
Im using your mushroom person card
But i wanted to have on right side
Of the icon (person)
The proximity then underneath it
The battery and under that wfi
Is this possible to do?
I saw in persons thread such but not with
Your mushroom card…
Using it in an horizontal-stack card
So there will be room for it…

entity: person.tork
icon_type: entity-picture
fill_container: true
card_mod:
  style:
    mushroom-shape-avatar$: |
      .picture {
      display: flex;
      border-radius: 50%;
      {% if states(config.entity) == 'home' %}
      animation: pinggreen 6s infinite;
      {% else %}
      animation: pingred 6s infinite;
      {% endif %}
      }
      @keyframes pinggreen {
      0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
      100% {box-shadow: 0 0 5px 5px transparent;}
      } 
      @keyframes pingred {
      0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
      100% {box-shadow: 0 0 5px 5px transparent;}
      }
    .: |
      ha-card {
      border: 0.5px outset grey !important;  
      height: 69px !important; 
      font-variant: small-caps;
      }

dimitri.landerloos · December 10, 2023, 8:03am

Thanks for listing all that you want in 1 question - could you however try and give a bit more detail on what you want? Perhaps some screenshots of what you saw and want to mimic or draw some explanation of what you want where?

Tadies · December 10, 2023, 9:11am

Im sorry for not beeing clear…did try tho…heh

This is what im trying to adcieve…
Took it from this thread >person card show off
Thank You Dimitri!!!

dimitri.landerloos · December 10, 2023, 2:45pm

Something like this?
SmartSelect_20231210_144731_Home Assistant

I dont use a picture so just swap mushroom-shape-icon$: | for mushroom-shape-avatar$: |, .shape { for .picture { and --shape-animation: for animation:

Code

type: custom:stack-in-card
cards:
  - type: custom:mushroom-person-card
    entity: person.dimitri_landerloos
    fill_container: true
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            display: flex;
            border-radius: 50%;
            --icon-symbol-size: 58px;
            --icon-size: 80px;
            {% if states(config.entity) == 'home' %}
              --shape-animation: pinggreen 6s infinite;
            {% else %}
              --shape-animation: pingred 6s infinite;
            {% endif %}
          }
          @keyframes pinggreen {
            0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
            100% {box-shadow: 0 0 5px 5px transparent;}
          } 
          @keyframes pingred {
            0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
            100% {box-shadow: 0 0 5px 5px transparent;}
          }
        mushroom-state-info$: |
          .container {
            --card-primary-font-size: 20px;
            --card-secondary-font-size: 20px;
          }
        .: |
          ha-card {
            background: none !important;
            font-variant: small-caps;
            height: 116px !important;
          }
          mushroom-badge-icon {
            --badge-size: 24px;
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:map-marker-distance
        content: 4 km
      - type: template
        icon: mdi:battery-charging
        content: 89%
      - type: template
        icon: mdi:wifi
        content: Signal
    alignment: justify
    card_mod:
      style: |
        ha-card {
          position: absolute;
          top: 2px;
          right: 30px;
          width: 80px;
          --chip-spacing: 0px;
        }
card_mod:
  style: |
    ha-card {
      border: 0.5px outset grey !important;
    }

I also dont have the sensors that you mentioned so i just put fixed values instead. But just fill in the content section of each template chip with the state of your sensor.

The chips will be a bit sensitive to width because they arent forced to stay in a column. So just keep that in mind

Tadies · December 10, 2023, 5:14pm

Somehow i could not get this working…
But it was pretty helpfull!
So i did made this:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-person-card
    entity: person.tork
    icon_type: entity-picture
    fill_container: true
    card_mod:
      style:
        mushroom-shape-avatar$: |
          .picture {
           display: flex;
           border-radius: 50%;
           {% if states(config.entity) == 'home' %}
           animation: pinggreen 6s infinite;
           {% else %}
           animation: pingred 6s infinite;
           {% endif %}
           }
           @keyframes pinggreen {
           0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
           100% {box-shadow: 0 0 5px 5px transparent;}
           } 
           @keyframes pingred {
           0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
           100% {box-shadow: 0 0 5px 5px transparent;}
           }
  - type: entities
    entities:
      - entity: proximity.afstand
        icon: mdi:map-marker-distance
      - entity: sensor.sm_a546b_battery_level
        name: Batterij
    show_header_toggle: false
    state_color: true
    card_mod:
      style: |
        ha-card {
         # background: none !important;
          position: absolute;
          top: -18px;
          right: 50px;
          width: 170px;
        }
card_mod:
  style: |
    ha-card {
    # background: none !important;
     border: 0.5px outset grey !important;  
     height: 84px !important; 
    font-variant: small-caps;
     }

Im still learning!..
There is only 1 prob with it…
The spacing between the both lines ( distance & battry)…wanted it closer to eachother in line
Thanky!!!

ignacio82 · December 10, 2023, 6:04pm

I’m trying to follow your example but I cannot get it to work. This is my current code:

type: custom:mushroom-person-card
entity: person.ignacio_martinez
icon_type: entity-picture
name: Ignacio
primary_info: none
secondary_info: none
fill_container: true
tap_action:
  action: navigate
  navigation_path: '#ignacio'
hold_action:
  action: call-service
  service: script.unmute_ignacios_pixel_5
  data: {}
  target: {}
card_mod:
  style:
    mushroom-shape-avatar$: |
      .shape {
        display: flex;
        border-radius: 50%;
        --icon-symbol-size: 58px;
        --icon-size: 80px;
        {% if states('switch.ignacio') == 'on' %}
          --shape-animation: pinggreen 6s infinite;
        {% else %}
          --shape-animation: pingred 6s infinite;
        {% endif %}
        animation: var(--shape-animation);
      }
      @keyframes pinggreen {
        0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
        100% {box-shadow: 0 0 5px 5px transparent;}
      } 
      @keyframes pingred {
        0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
        100% {box-shadow: 0 0 5px 5px transparent;}
      }

and this is what the card looks like

I checked in the developer tools console that the if statemet works:

dimitri.landerloos · December 10, 2023, 6:30pm

Adjusted now - should work better and no need to change anything other than the entities being referred to
Untitled video - Made with Clipchamp - 2023-12-10T182936.028

type: custom:stack-in-card
cards:
  - type: custom:mushroom-person-card
    entity: person.dimitri_landerloos
    icon_type: entity-picture
    fill_container: true
    card_mod:
      style:
        mushroom-shape-avatar$: |
          .picture {
            display: flex;
            border-radius: 50%;
            {% if states(config.entity) == 'home' %}
              animation: pinggreen 6s infinite;
            {% else %}
              animation: pingred 6s infinite;
            {% endif %}
          }
          @keyframes pinggreen {
            0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
            100% {box-shadow: 0 0 5px 5px transparent;}
          } 
          @keyframes pingred {
            0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
            100% {box-shadow: 0 0 5px 5px transparent;}
          }
          .container {
            --icon-size: 80px !important;
          }
        mushroom-state-info$: |
          .container {
            --card-primary-font-size: 20px;
            --card-secondary-font-size: 20px;
          }
        .: |
          ha-card {
            background: none !important;
            font-variant: small-caps;
            height: 96px !important;
          }
          mushroom-badge-icon {
            --badge-size: 24px;
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:map-marker-distance
        content: 4 km
        card_mod:
          style: |
            ha-card {
              border: none;
              box-shadow: none;
            }        
      - type: template
        icon: mdi:battery-charging
        content: 89%
        card_mod:
          style: |
            ha-card {
              border: none;
              box-shadow: none;
            }        
      - type: template
        icon: mdi:wifi
        content: Signal
        card_mod:
          style: |
            ha-card {
              border: none;
              box-shadow: none;
            }
    alignment: justify
    card_mod:
      style: |
        ha-card {
          position: absolute;
          top: 2px;
          right: 30px;
          width: 80px;
          --chip-spacing: -10px;
          --chip-background: none;
        }
card_mod:
  style: |
    ha-card {
      border: 0.5px outset grey !important;
    }

dimitri.landerloos · December 10, 2023, 6:31pm

take a look at the one i just posted instead.

but also in the code you posted you didnt adjust the things that i mentioned for when using a picture.

you shouldnt need to adust anything with the new code provided. but you do need to have stack-in-card from HACS downloaded.

Tadies · December 10, 2023, 6:40pm

That worked great!!!
And yes the one i posted last i made myself
After fiddling around with yours…
Keep on rocking Dimitri!!! Yay

dimitri.landerloos · December 10, 2023, 7:08pm

You can swap the primary and secondary just by adding

    primary_info: state
    secondary_info: name

to your initial mushroom-media-player-card.

im not getting the card itself to look like yours for some reason. so i am struggling to be able to help you with the album bit.

brewston · December 11, 2023, 2:03pm

Thanks for the primary/secondary bit. You’ve made me realise that the album art is being rendered by custom mini player and nothing mushrooms related. I also suspect there’s something in my theme which makes mine appear different to yours… I’ll keep tinkering… thanks

1umnyy · December 11, 2023, 6:39pm

please tell me how to connect in one line without borders?

dimitri.landerloos · December 11, 2023, 11:42pm

Cant be done by default, but easy enough with card mod:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: person.dimitri_landerloos
card_mod:
  style: |
    ha-card {
      --chip-background: none;
      --chip-border: none !important;
      --chip-box-shadow: none !important;
    }

Intro_Verti · December 12, 2023, 10:33am

That is super, thanks!
Is this also possible with the mushroom template card?

I have now my chips without background, would love to have this card also without background.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:pine-tree
    icon_color: green
    primary: Aantal dagen tot Kerst
    secondary: >-
      {{ (states('input_datetime.christmas') | as_datetime | as_local -
      now()).days + 1 }}
    layout: vertical
  - type: custom:mushroom-template-card
    icon: mdi:star-four-points
    icon_color: yellow
    layout: vertical
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            top: -118px;
            background: none !important;
          }
          ha-state-icon {
            animation: star 8s ease infinite alternate;
          }
          @keyframes star {
            0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
            50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
          }
  - type: custom:mushroom-template-card
    icon: mdi:gift
    icon_color: red
    layout: vertical
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
            --icon-size: 20px;
            top: 16px;
            left: 18px;
          }
        .: |
          ha-card {
            top: -183px;
            right: 10px;
            background: none !important;
          }
          ha-state-icon {
            animation: surprise 4s ease infinite;
          }
          @keyframes surprise {
            0%, 20%, 100% { transform: translateY(0); }
            2.5% { transform: translateY(-2px) rotate(-27deg); }
            5% { transform: translateY(-2px) rotate(21deg); }
            7.5% { transform: translateY(-2px) rotate(-15deg); }
            10% { transform: translateY(-2px) rotate(9deg); }
            12.5% { transform: translateY(0); }
            15% { transform: translateY(-1.2px) }
          }
card_mod:
  style: |
    ha-card {
      height: 116px;
    }

Intro_Verti · December 12, 2023, 11:21am

Found it, this will do

card_mod:
  style: |
    ha-card {
      background-color: #0000;
    }

Only looking for a way to make it more (or less) transparent.
Any thoughts?