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

Lockie · May 25, 2023, 11:52am

Hey does anyone know if there is a way to display MaterialDesign icons (MDI) within variables like primary?

I’ve the following code:

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Home
    secondary: '{{states(''sensor.load_power'') }}W'
    icon: mdi:flash
    icon_color: blue
  - type: custom:mushroom-template-card
    primary: Battery
    secondary: >-
      {{states('sensor.battery_power') }}W
      ({{states('sensor.battery') }}%)
    icon: mdi:battery-charging
    icon_color: green
  - type: custom:mushroom-template-card
    primary: Grid
    secondary: '{{states(''sensor.grid_power'') }}W'
    icon: mdi:transmission-tower
    icon_color: purple

Within:

      ({{states('sensor.battery') }}%)

I’d like to add mdi:battery-charging

Vandana · May 25, 2023, 12:19pm

              card_mod:
                style:
                  mushroom-shape-icon$: |
                    :ha-card {
                        padding: 5px 0px 0px 0px !important;
                    }    
                    :host {
                    --icon-size: 35px !important; 
                    --card-primary-font-size: 9px !important;
                    --card-secondary-font-size: 9px!important;
                    }                    
                    ha-icon {
                      --icon-animation: fountain 1.5s ease infinite;
                    }
                    @keyframes fountain {
                      0%, 100 { clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); }
                      50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
                      60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
                      70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
                      80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
                    }

Why is the padding and icon size not working???

Kindly help

dyego.hass · May 25, 2023, 1:42pm

Could you share your code with us?

dyego.hass · May 25, 2023, 1:50pm

Could you share your code with us?

dyego.hass · May 25, 2023, 1:57pm

Could you share your code with us?

buche11 · May 25, 2023, 2:03pm

Icon width in Mushroom Template Card
Hi, i try to change the width of the Icon in a template card and want widen the grey circle around the lock icon… I know how to change the size with ha-card and “–icon-size: 50px;” but this changes also the height. I just want to make the icon wider. Tried “–icon-width: 100px” but this has no effect.

Someone an idea for this solution?

My code ist:

      type: custom:mushroom-template-card
      entity: lock.nuki_hwr_lock
      layout: vertical
      icon: mdi:lock
      icon_color: black
      tap_action:
        action: call-service
        service: lock.lock
        service_data: {}
        target:
          entity_id: lock.nuki_hwr_lock
      fill_container: false
      card_mod:
        style: |
          ha-card {
            --icon-border-radius: 12px;
            #--icon-size: 50px;`
            }

Unbenannt

danwooller · May 25, 2023, 4:04pm

Vandana:

                    :ha-card {
                        padding: 5px 0px 0px 0px !important;
                    }    
                    :host {
                    --icon-size: 35px !important; 
                    --card-primary-font-size: 9px !important;
                    --card-secondary-font-size: 9px!important;
                    }                    
                    ha-icon {
                      --icon-animation: fountain 1.5s ease infinite;
                    }
                    @keyframes fountain {
                      0%, 100 { clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); }
                      50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
                      60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
                      70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
                      80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
                    }

Something like this?

    card_mod:
        style:
          mushroom-shape-icon$: |
            ha-icon {
              --icon-animation: fountain 1.5s ease infinite;
            }
            @keyframes fountain {
              0%, 100 { clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); }
              50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
              60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
              70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
              80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
            }  
          .: |
            ha-card {
                padding: 5px 0px 0px 0px !important;
            }    
            :host {
            --icon-size: 35px !important; 
            --card-primary-font-size: 9px !important;
            --card-secondary-font-size: 9px!important;
            }

danwooller · May 25, 2023, 4:10pm

Try…

        mushroom-shape-icon$: |
          .shape {
            transform: scale(1.5,1);
          }

Vandana · May 25, 2023, 5:15pm

Yes… this is what I was looking for…

Thank you for this.

danwooller · May 25, 2023, 6:08pm

You can, you can also change the icon when it’s off as well, there’s loads of examples of people doing that in this thread.

brpeterso · May 25, 2023, 7:23pm

Try using the grid card and add in more columns than you need…so in this case try between 6 to 8 columns, but only have cards for the few that you need in the grid.

wgumaa · May 26, 2023, 6:21am

@Lockie

2 entities for primary? I think the best is to use stack in card and position it to where you want.

Lockie · May 26, 2023, 6:55am

Not sure what you mean. I’m not using two entities for primary or want to. I’m talking about my secondary entry:

    secondary: >-
      {{states('sensor.battery_power') }}W
      ({{states('sensor.battery') }}%)

And wanting to add a MDI to the wording of it’s display. Hope that clears up what I meant.

wgumaa · May 26, 2023, 7:01am

@Lockie

The idea behind using stack in card is that you can have 2 cards each with their own mdi and you can control the position of the cards.

Have a look here:
https://github.com/custom-cards/stack-in-card

or here:
https://github.com/ofekashery/vertical-stack-in-card

buche11 · May 26, 2023, 9:13am

Hi Danwooler, thnak you but this do not change anything:

type: custom:mushroom-template-card
entity: lock.nuki_hwr_lock
layout: vertical
icon: mdi:lock
icon_color: black
tap_action:
  action: call-service
  service: lock.lock
  service_data: {}
  target:
    entity_id: lock.nuki_hwr_lock
fill_container: false
card_mod:
  style: |
    mushroom-shape-icon$: |
      .shape {
        transform: scale(1.5,1);
    }   
    ha-card {
     # margin-top: -12px;
      --icon-border-radius: 12px;
      #--icon-size: 50px;
      #margin-top: -12px;
      #margin-left: -52px;
    }

Any other idea?

Thank you

Stenbumling · May 26, 2023, 10:34am

@rhysb Could you assis me here, animation not working, been tryign for a while

  - type: vertical-stack
    view_layout:
      grid-area: chips
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: sensor.dryer_operation_state
                state: "Run"
            chip:
              type: template
              icon: mdi:washing-machine
              icon_color: |
                {% if is_state('sensor.dryer_operation_state', 'Run') %}
                  blue
                {% else %}
                  disabled
                {% endif %}
              tap_action:
                action: fire-dom-event
                browser_mod:
                  service: browser_mod.popup
                  data:
                    title: Dryer
                    content:
                      type: custom:vertical-stack-in-card
                      cards:
                        - type: entities
                          entities:
                            - entity: sensor.dryer_runtime
                              secondary_info: last-updated
                          show_header_toggle: false
                          state_color: false
                        - type: custom:mini-graph-card
                          entities:
                            - sensor.dryer_power
              card_mod:
                style: |
                  .content {
                    shake 400ms ease-in-out infinite, drum 1s infinite;
                  }
                  @keyframes shake {
                    0%, 100% { transform: rotate(4deg); }
                    50%  { transform: rotate(-4deg); }
                  }
                  @keyframes drum {
                    50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
                  }

Stenbumling · May 26, 2023, 11:23am

@rhysb missed the actual animation part in content haha

but i guess i need to edit something more since its a bit messed up.

danwooller · May 26, 2023, 2:33pm

Yeah, you’re curly bracket closing .shape isn’t indented properly.

danwooller · May 26, 2023, 2:39pm

Some animations don’t show on chips due to the size.

I think @rhysb is taking a break, not seem him here helping everyone for a few days

Vandana · May 27, 2023, 6:25am

Screenshot_20230527_103508_Home Assistant
@rhysb plz guide how can I use mushroom chips to show two values eg “temperature” and “processor use” one after other after a gap of few seconds.

I.e. it should display “temperature value” for few seconds and then “processor used” for few seconds.

Kindly guide