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

Hey,

what cards for Progress and Graph do you use?

Could you please share YAML?

Thanks

Hey all, for some reason i cant figure out (NFI really) why when I put my cards in horizontal stack, the chips at the bottom are not displayed when I exit the GUI


Code for anyone interested - https://pastecode.io/s/dwai9o2z

This has been posted many times recently, but how animations are applied changed a few months back.

see the updated animations below:

post your yaml in the message itself.

people are not going to click a link no matter how trustworthy you may seem :wink:

I did do a search from bottom to top on terms like wobble, blink etc, tried several examples with chips and not but none of them worked. I did see your post but i thought it was a copy of rhysb’s post so skipped it.

Your updated versions work, thanks :wink:

1 Like

Hi All,
I dont condone cross-posting, but i hope it will be a allowed in this instance as i just wanted a wider group to know about the alternative to the light card horizontal layout i created.
image
i didnt like the fact that a bunch of space is being wasted, and that you have very limited room for the slider. so i built this:
image
and its alternative that keeps the text in 2 rows:
image

check out the post with all of the details here:

8 Likes

Amazing cards… Did anyone create a great looking card for vacuum?

The whole yaml is more than the supported character number lol

Hi @Mosher

Progress is bar-card and graph is apexcharts-card.

Here is the YAML, let me know if you have any questions:

type: vertical-stack
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-title-card
        title: 3D Printer
        alignment: center
        title_tap_action:
          action: url
          url_path: http://192.168.3.11:4408
        subtitle: |
          {{ states('sensor.creality_current_print_state') | title }}
  - type: custom:button-card
    entity: switch.creality_k1
    size: 10%
    color: purple
    name: K1 Power Switch
    show_state: true
    confirmation: true
    styles:
      card:
        - font-size: 14px
        - font-weight: bold
        - padding: 10px
      icon:
        - margin-bottom: 10px
  - type: conditional
    conditions:
      - entity: sensor.creality_current_print_state
        state: printing
    card:
      type: vertical-stack
      cards:
        - type: custom:vertical-stack-in-card
          horizontal: true
          cards:
            - type: custom:mushroom-entity-card
              entity: sensor.creality_print_duration
              name: Active
              primary_info: state
              secondary_info: name
              fill_container: false
              icon_color: blue
            - type: custom:mushroom-entity-card
              entity: sensor.creality_slicer_print_duration_estimate
              name: Projected
              primary_info: state
              secondary_info: name
              fill_container: false
              icon_color: green
            - type: custom:mushroom-entity-card
              entity: sensor.creality_slicer_print_time_left_estimate
              name: Remaining
              primary_info: state
              secondary_info: name
              fill_container: false
              icon_color: orange
        - type: custom:bar-card
          name: Print Progress...
          icon: mdi:clock-end
          color: purple
          animation:
            state: 'on'
            speed: 5
          positions:
            indicator: inside
            name: inside
          entities:
            - entity: sensor.creality_progress
          style: |-
            bar-card-currentbar, bar-card-backgroundbar {
              border-radius: 10px;
            }
            ha-icon {
             color: white;
            }
  - type: custom:webrtc-camera
    url: rtsp://graincam:[email protected]/live
  - type: custom:apexcharts-card
    graph_span: 1h
    header:
      show: true
      title: Temp
      show_states: true
      colorize_states: true
    apex_config:
      chart:
        height: 150px
      legend:
        show: false
      grid:
        xaxis:
          lines:
            show: true
        borderColor: '#555'
    yaxis:
      - opposite: true
        decimals: 0
        apex_config:
          tickAmount: 2
    all_series_config:
      stroke_width: 2
      float_precision: 0
    series:
      - entity: sensor.creality_extruder_temperature
        name: Hotend
      - entity: sensor.creality_extruder_target
        name: Hotend Target
        show:
          in_chart: false
      - entity: sensor.creality_bed_temperature
        name: Bed
      - entity: sensor.creality_bed_target
        name: Bed Target
        show:
          in_chart: false
      - entity: sensor.creality_chamber_temp
        name: Chamber
        color: green
    style: |
      ha-card {
        color:white;
        background-color: black;
       }
       .state {
         display: block !important;
       }

2 Likes

they display just fine on all devices for me:

image
image

even checked in a grid since that is what it looks like you have and it still works fine:
image

i would assume that you are accidentally forcing some height restriction on your vertical stack card somewhere as i note that you havent posted the full card for your entire stack.

Just click the link lol its not a scam mate

here is the card_mod part at the bottom of each card

    alignment: end
    card_mod:
      style: |
        ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        --chip-spacing: -0.0em;
        --chip-icon-size: 0.5em
        }
card_mod:
  style: |
    ha-card:active {
      transform: translateY(1.5px);
      transition: 0s;
      box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
    }

I checked, I cant find any card height restrictions

I did, and that is what i used to check. But what you posted is only the 1 card that i took a screenshot of. Not everything in your massive vertical stack card.

Try this - https://pastecode.io/s/jfdyvo3w

Still works just fine. but again. not your full card.
image

this is the full card you posted that you have issues with.


i understand trying to drill down to what you think is causing the issue, but clearly the individual parts seem to be working. just not put together :slight_smile:

so post me the full card and we can try and work on it :slight_smile:

this is the code for the 2 rooms in a horizontal stack,
https://pastecode.io/s/z1ri0w5a

if I do a f5 cache refresh it temporarily fixes the problem until I go into edit mode

Look i dont know what you want me to do if you refuse to post the entire card.

i can see from the screenshot you sent that you have multiple things stacked on top of eachother.

a horizontal stack with 2 cards at the bottom. a card on top, another card on top of that, and some sort of title card on top of that. all in a stack of some kind (probably a vertical stack) if you dont post the full vertical stack i cant help you.

but honestly what is likely causing the issue is that you have all of these stacks in stacks in stacks.

i would take each of these cards out and place them seperately in your dashboard.

so the horizontal stack with 2 cards seperately. and the other cards on top of that seperately in your dashboard. not all in a vertical stack card like you have right now. your device might just not be able to load it in time.

      - type: custom:mushroom-media-player-card
        entity: media_player.music
        icon: mdi:play
        use_media_info: true
        use_media_artwork: false
        show_volume_level: false
        media_controls:
          - play_pause_stop
          - previous
          - next
          - shuffle
        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 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;
            }
            ha-card:before {
              transform: translate3d(0,0,0);
              -webkit-transform: translate3d(0,0,0);
              content: "";

              background: url('/local/idle_art.png') center no-repeat;
              {% if is_state(config.entity, 'playing') %}
                background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
              {% endif %}

              background-size: contain;
              margin: 4px 4px 16px;
              filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
              border-radius: var(--control-border-radius);

              {% set media_type = state_attr(config.entity, 'media_content_type') %}
              {% if media_type == 'tvshow' %}
                aspect-ratio: 16 / 9;
              {% elif media_type == 'movie' %}
                aspect-ratio: 2 / 3;
              {% else %}
                aspect-ratio: 1 / 1;
              {% endif %}
            }
      - type: conditional
        conditions:
          - entity: media_player.music
            state: playing
        card:
          entity: media_player.music
          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: |
        ha-card:before {
          transform: translate3d(0,0,0);
          -webkit-transform: translate3d(0,0,0);
          content: "";
          position: absolute;
          height: 100%;
          width: 100%;

          background: url('/local/idle_art.png') center no-repeat;
          {% if is_state('media_player.music', 'playing') %}
            background: url( '{{ state_attr('media_player.music', "entity_picture") }}' ) center no-repeat;
          {% endif %}

          filter: blur(150px) saturate(200%);
          background-size: 100% 100%;
        }
        ha-card {
          transform: translate3d(0,0,0);
          -webkit-transform: translate3d(0,0,0);
        }

hallo @dimitri.landerloos
I have a question; maybe you can help me with this. I would like the badge color to be the same as the card, so red for 0, orange for 1, and yellow for 2, just like the icon itself. Thanks in advance!

type: custom:stack-in-card
mode: vertical
keep:
  background: false
  box_shadow: false
  margin: false
  outer_padding: true
  border_radius: false
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: >-
          Volgende: {{ state_attr
          ('sensor.limburg_net_eerst_volgende','Upcoming_day') }}
        secondary: >-
          {{ state_attr
          ('sensor.limburg_net_eerst_volgende','Upcoming_waste_types') }}
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod: null
        style: |
          ha-card {
            --card-primary-font-weight: 400;
            --card-secondary-font-weight: 400;!important;
            #margin-top: -5px;
            #margin-bottom: -5px;
          }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            content: null
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: phu:garbage-plastic
            badge_icon: |
              {% if state_attr('sensor.limburg_net_pmd', 'Days_until') == 1 %} 
            badge_color: orange
            icon_color: |-
              {% if state_attr('sensor.limburg_net_pmd', 'Days_until') == 2 %}
                yellow
              {% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 1 %}
                orange
              {% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 0 %}
                red
              {% endif %}
            card_mod: null
            style: |
              ha-card:after {
                content: "{{ state_attr('sensor.limburg_net_pmd', 'Days_until') }}";
                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: template
            content: null
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: phu:garbage-residual
            icon_color: >-
              {% if state_attr('sensor.limburg_net_restafval', 'Days_until') ==
              2 %}
                yellow
              {% elif state_attr('sensor.limburg_net_restafval', 'Days_until')
              == 1 %}
                orange
              {% elif state_attr('sensor.limburg_net_restafval', 'Days_until')
              == 0 %}
                red
              {% endif %}
            card_mod: null
            style: |
              ha-card:after {
                content: "{{ state_attr('sensor.limburg_net_restafval', 'Days_until') }}";
                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: template
            content: null
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: phu:garbage-organic
            icon_color: |-
              {% if state_attr('sensor.limburg_net_gft', 'Days_until') == 2 %}
                yellow
              {% elif state_attr('sensor.limburg_net_gft', 'Days_until') == 1 %}
                orange
              {% elif state_attr('sensor.limburg_net_gft', 'Days_until') == 0 %}
                red
              {% endif %}
            card_mod: null
            style: |
              ha-card:after {
                content: "{{ state_attr('sensor.limburg_net_gft', 'Days_until') }}";
                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: template
            content: null
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: phu:garbage-cardboard
            icon_color: >-
              {% if state_attr('sensor.limburg_net_papier', 'Days_until') == 2
              %}
                yellow
              {% elif state_attr('sensor.limburg_net_papier', 'Days_until') == 1
              %}
                orange
              {% elif state_attr('sensor.limburg_net_papier', 'Days_until') == 0
              %}
                red
              {% endif %}
            card_mod: null
            style: |
              ha-card:after {
                content: "{{ state_attr('sensor.limburg_net_papier', 'Days_until') }}";
                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: template
            content: null
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            picture: local/afvalbeheer/textiel-afval.png
            icon_color: >-
              {% if state_attr('sensor.limburg_net_textiel', 'Days_until') == 2
              %}
                yellow
              {% elif state_attr('sensor.limburg_net_textiel', 'Days_until') ==
              1 %}
                orange
              {% elif state_attr('sensor.limburg_net_textiel', 'Days_until') ==
              0 %}
                red
              {% endif %}
            card_mod: null
            style: |
              ha-card:after {
                content: "{{ state_attr('sensor.limburg_net_textiel', 'Days_until') }}";
                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; 
              }
        alignment: end
        card_mod:
          style: |
            ha-card {
              top: 10px;
              right: 60px;
            }

Hi, is there a way to make the buttons (100, 70, 30) change color or flash for a few seconds to indicate that that scenario has been activated?


type: custom:stack-in-card
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:layout-card
        layout_type: masonry
        cards:
          - square: false
            columns: 2
            type: grid
            cards:
              - type: custom:mushroom-cover-card
                entity: cover.aqara_estore_grande_entrada
                show_position_control: true
                show_tilt_position_control: false
                show_buttons_control: true
                icon: mdi:blinds
                name: Estore Grande Entrada
                card_mod:
                  style: |
                    :host {
                       grid-column: 1 / span 2; 
                    }                
          - square: false
            columns: 3
            type: grid
            cards:
              - type: custom:mushroom-template-card
                primary: 100%
                secondary: ''
                layout: vertical
                entity: scene.estore_100
                icon: mdi:blinds-open
              - type: custom:mushroom-template-card
                primary: 70%
                secondary: ''
                layout: vertical
                entity: scene.estore_70
                icon: mdi:roller-shade
              - type: custom:mushroom-template-card
                primary: 30%
                secondary: ''
                layout: vertical
                entity: scene.estore_30
                icon: mdi:roller-shade-closed

This should work:

          - type: template
            content: null
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: phu:garbage-plastic
            badge_icon: |
              {% if state_attr('sensor.limburg_net_pmd', 'Days_until') == 1 %} 
            icon_color: |-
              {% if state_attr('sensor.limburg_net_pmd', 'Days_until') == 2 %}
                yellow
              {% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 1 %}
                orange
              {% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 0 %}
                red
              {% endif %}
            card_mod: null
            style: |
              ha-card:after {
                content: "{{ state_attr('sensor.limburg_net_pmd', 'Days_until') }}";
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                {% if state_attr('sensor.limburg_net_pmd', 'Days_until') == 2 %}
                  background: rgb(var(--rgb-yellow));
                {% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 1 %}
                  background: rgb(var(--rgb-orange));
                {% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 0 %}
                  background: rgb(var(--rgb-red));
                {% endif %}
                color: var(--card-background-color);
                font-weight: bolder;
                border-radius: 50%;
                top: -5px;
                right: -5px;
                width: 16px;
                height: 16px;
                font-size: 11px; 
              }
1 Like