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

[rhysb (Rhys)]

Sorry, been busy with work. Will try to get back into it

[rhysb (Rhys)]

Try like this:

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 {
                animation: 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%, 100% 100%, 100% 0, 58% 47%, 62% 54%, 60% 61%, 54% 66%, 47% 65%, 42% 58%, 58% 47%, 100% 0); }
              }

[Faecon (Jo)]

Do you have some code for a sticky card ?

I want two buttons in a horizontal stack centered en 5px from the bottom, on every screen . Same place.

I have something with position: sticky and bottom:x px but indont get it working…

[rhysb (Rhys)]

You can sticky on the bottom like this:

type: custom:mod-card
card:
  type: horizontal-stack
  cards:
    - type: custom:mushroom-template-card
      icon: mdi:chevron-left
      icon_color: blue
      layout: vertical
      card_mod:
        style: |
          ha-card {
            width: fit-content;
            padding: 0px !important;
            margin-left: auto;
            transition: all 0s;
          }
    - type: custom:mushroom-template-card
      icon: mdi:chevron-right
      icon_color: blue
      layout: vertical
      card_mod:
        style: |
          ha-card {
            width: fit-content;
            padding: 0px !important;
            margin-right: auto;
            transition: all 0s;
          }
card_mod:
  style: |
    :host {
      position: sticky;
      bottom: 5px;
    }
    ha-card {
      margin: 0px 0px -12px 0px;
      background: none;
      --ha-card-border-width: 0px;
      --ha-card-box-shadow: none;
    }

[Vandana (Vandana Dass)]

@rhysb can you plz help regarding this…

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

[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

[danwooller]

I should think so, this place has been a shambles

[Faecon (Jo)]

Thanks. And how do I get them centered ?

[kelvinrafaeli (kelvin)]

hey guys

I’m creating a card that I can reuse without having to change many things, I just need to be able to get the entity’s default icon, does anyone know if there’s a way? I’ve tried '{{ states[config.entity].icon }}' , '{{ states[icon.entity]}}' among other ways but it didn’t work

[aoliveir]

This should work
icon: '{{ state_attr(config.entity,''icon'') }}'

[kelvinrafaeli (kelvin)]

@aoliveir

icon: '{{ state_attr(config.entity,''icon'') }}'

It worked
thanks

[rhysb (Rhys)]

They should already be centered. Are they not for you?

[Faecon (Jo)]

its about the 4 icons at the bottom. It looks like nothing is happing, so I think i did something wrong

- type: horizontal-stack
    cards:  
      - type: 'custom:button-card'
        template: chip_navigate
        variables:
          ulm_chip_navigate_path: verbruikgisteren
          ulm_chip_navigate_icon: mdi:flash
          ulm_chip_navigate_icon_color : rgb(30,227,137)
        card_mod:
          style: |
            ha-card {
              width: fit-content;
              padding: 0px !important;
              margin-left: auto;
              transition: all 0s;
            }

      - type: 'custom:button-card'
        template: chip_navigate
        variables:
          ulm_chip_navigate_path: status
          ulm_chip_navigate_icon: mdi:battery-70
          ulm_chip_navigate_icon_color : rgb(212,128,61)
        card_mod:
          style: |
            ha-card {
              width: fit-content;
              padding: 0px !important;
              margin-left: auto;
              transition: all 0s;
            }

      - type: 'custom:button-card'
        template: chip_navigate
        variables:
          ulm_chip_navigate_path: recycle
          ulm_chip_navigate_icon: mdi:recycle
          ulm_chip_navigate_icon_color : rgb(69,124,97)
        card_mod:
          style: |
            ha-card {
              width: fit-content;
              padding: 0px !important;
              margin-left: auto;
              transition: all 0s;
            }

      - type: 'custom:button-card'
        template: chip_navigate
        variables:
          ulm_chip_navigate_path: updates
          ulm_chip_navigate_icon: mdi:update
          ulm_chip_navigate_icon_color : purple    
        card_mod:
          style: |
            ha-card {
              width: fit-content;
              padding: 0px !important;
              margin-left: auto;
              transition: all 0s;
            }
    card_mod:
      style: |
        :host {
          position: sticky;
          bottom: 5px;
        }
        ha-card {
          margin: 0px 0px -12px 0px;
          background: none;
          --ha-card-border-width: 0px;
          --ha-card-box-shadow: none;
        }

[Zarkstar (Edoardo)]

I’m also interested in knowing if we could use a slider instead of the + and - buttons for thermostats. It makes changing temperatures really inconvenient… any way to achieve this?

[Foltifeki]

I would like to ask for a little help, too many decimal places are displayed for the temperature value

chips:
      - type: template
        entity: sensor.bedroom_thermal_comfort_humidex_perception
        content: >-
          {{ states('sensor.bedroom_thermal_comfort_humidex') }} °C {{
          states('sensor.bedroom_thermal_comfort_humidex_perception') }} 

[MariuszT]

I have a question. In mushroom-select-card is it possible to change the length of the drop-down list?

[Alawiii (Alawiii1988)]

can you please share the code.

[Stenbumling]

@rhysb

            style: |
              .content {
                animation: 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%, 100% 100%, 100% 0, 58% 47%, 62% 54%, 60% 61%, 54% 66%, 47% 65%, 42% 58%, 58% 47%, 100% 0); }
              }

Big thanks, works for other chips as well

[Faecon (Jo)]

Hmm they are aligned over the whole width … And they are much bigger dan my chips. Can I make them smaller ? En less space in between ? And the space on the right even big as the space on the left ? Too much questions probably 🫣

[rhysb (Rhys)]

You can do it with Mushroom Cards like this:

type: custom:mod-card
card:
  type: horizontal-stack
  cards:
    - type: custom:mushroom-template-card
      icon: mdi:numeric-1-circle
      icon_color: red
      layout: vertical
      card_mod:
        style: |
          ha-card {
            width: fit-content;
            padding: 0px !important;
            transition: all 0s;
          }
    - type: custom:mushroom-template-card
      icon: mdi:numeric-2-circle
      icon_color: orange
      layout: vertical
      card_mod:
        style: |
          ha-card {
            width: fit-content;
            padding: 0px !important;
            transition: all 0s;
          }
    - type: custom:mushroom-template-card
      icon: mdi:numeric-3-circle
      icon_color: yellow
      layout: vertical
      card_mod:
        style: |
          ha-card {
            width: fit-content;
            padding: 0px !important;
            transition: all 0s;
          }
    - type: custom:mushroom-template-card
      icon: mdi:numeric-4-circle
      icon_color: green
      layout: vertical
      card_mod:
        style: |
          ha-card {
            width: fit-content;
            padding: 0px !important;
            transition: all 0s;
          }
card_mod:
  style: |
    :host {
      position: sticky;
      bottom: 5px;
    }
    ha-card {
      display: flex;
      margin: 0px 0px -12px 0px;
      background: none;
      --ha-card-border-width: 0px;
      --ha-card-box-shadow: none;
      justify-content: center;
      --mush-icon-size: 32px;
    }

[Faecon (Jo)]

ok thanks. I’ll try