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

[rhysb (Rhys)]

You can set the height of the Mushroom Select List like this:

type: custom:mushroom-select-card
entity: select.butterfly_preset
layout: horizontal
card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$:
        mwc-menu$:
          mwc-list$: |
            .mdc-deprecated-list {
              --height-multiplier: 1.12;
              --select-visible-items: 5;
              height: calc(var(--select-visible-items) * var(--height-multiplier) * var(--select-height));
            }
          mwc-menu-surface$: |
            .mdc-menu-surface {
              --scrollbar-width: 8px;
            }
            .mdc-menu-surface::-webkit-scrollbar {
              width: var(--scrollbar-width);
            }
            .mdc-menu-surface::-webkit-scrollbar-thumb {
              background: var(--mdc-theme-primary);
              border-radius: calc(var(--scrollbar-width) / 2);
            }

[rhysb (Rhys)]

You can round it like this:

{{ states('sensor.bedroom_thermal_comfort_humidex') | round(1) }}

[MariuszT]

Thank you very much. You are amazing.

[maniac365]

The seekbar only appears when the music is paused, it disappears when music is playing, also seekbar is grey in color, any odea on how to fix it?

[navigatortc (Alone13)]

Hello!
Why do I have pop-ups displayed in the background and not in the foreground?
Even the system ones.

[Mattia2399]

ehi @rhysb, take a look at the footer I created above

[Vandana (Vandana Dass)]

How do I change the height and font size of the encircled part?

Kindly guide

[Faecon (Jo)]

@rhysb

type: custom:mushroom-template-card
icon: mdi:wifi
icon_color: green
primary: Signal
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: clip 2s steps(1) infinite;
      }
      @keyframes clip {
        0% { clip-path: circle(0% at 50% 85%); }
        20% { clip-path: circle(30% at 50% 85%); }
        40% { clip-path: circle(55% at 50% 85%); }
        60% { clip-path: circle(80% at 50% 85%); }
      }
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
        60% { box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      }

I have a button that when pressed, the icon has to blink until a binary sensor is “on”. when it is not pressed it has to be mdi.wifi-off. when binary sensor is on, the blinking has to stop and icon has just to be green…
How can I do this ?

[WW983 (Waldemar)]

Hi

fixing only works if I have enough cards. If there are too few boxes, the bar slides back up. Is there a way to do that too?

EDIT: I’ve solved it for already. Thank you.

[tobiasfrank87]

@WW983 can you tell me how you built the selection-card for the rooms and how you built the “title” cards regarding the used font and colors. In general my setup is a little bit similiar but i want to improve styling and usability…

Thanks

greetings from germany

[madir]

WOW, love the bar card!
Could you please share the bar card? please!!!

[WW983 (Waldemar)]

@tobiasfrank87 @madir

Sure. here’s the code. But look at the code from the @Mattia2399 . It’s much more professional. The code is specifically balanced for my case. If you have any questions, you can write me a message

type: custom:stack-in-card
mode: horizontal
card_mod:
  style: |
    ha-card { border-radius: 50px;
              background: rgb(45, 45, 45);}
    :host {
      position: sticky;
      bottom: 5px;
cards:
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 60% 40%
      grid-template-rows: auto
      grid-template-areas: |
        "eins1 zwei2"
    cards:
      - type: custom:stack-in-card
        mode: horizontal
        view_layout:
          grid-area: eins1
        card_mod:
          style: |
            ha-card { border-radius: 50px;
            background: rgb(208, 208, 208);
            box-shadow: none;
                      
        cards:
          - type: custom:layout-card
            layout_type: grid
            layout:
              grid-template-columns: 90% 10%
              grid-template-rows: auto
              grid-template-areas: |
                "eins zwei"
            card_mod:
              style: |
                ha-card {
                  background: rgb(208, 208, 208);
                  box-shadow: none;
            cards:
              - type: custom:mushroom-template-card
                view_layout:
                  grid-area: eins
                icon_color: black
                icon: mdi:home
                primary: Home
                entity: input_boolean.menu
                tap_action:
                  action: more-info
                hold_action:
                  action: more-info
                card_mod:
                  style: |
                    ha-card {
                      background: rgb(208, 208, 208);
                      box-shadow: none;
                      --spacing: 8px;
                      --icon-size: 35px;
                      --primary-text-color: rgb(var(--rgb-black));
                    }
                    mushroom-shape-icon {
                        --shape-color: none !important; 
                    }
              - type: custom:mushroom-chips-card
                view_layout:
                  grid-area: zwei
                chips:
                  - type: template
                    card_mod:
                      style: |
                        ha-card {
                          position: absolute;
                          right: 0px;
                          top: 10px;
                          background: green;
                          box-shadow: none;
                        }
                    entity: input_boolean.menu
                    double_tap_action:
                      action: none
                    icon_color: white
                    icon: mdi:chevron-up
                    tap_action:
                      action: more-info
                    hold_action:
                      action: more-info
      - type: custom:stack-in-card
        mode: horizontal
        view_layout:
          grid-area: zwei2
        card_mod:
          style: |
            ha-card { border-radius: 50px;
                      background: rgb(45, 45, 45);
                      box-shadow: none;}
        cards:
          - type: custom:mushroom-entity-card
            tap_action:
              action: navigate
              navigation_path: home
            entity: person.waldemar
            layout: horizontal
            primary_info: none
            secondary_info: none
            icon_color: blue
            icon: mdi:home
          - type: custom:mushroom-entity-card
            entity: alarm_control_panel.alarm
            layout: horizontal
            primary_info: none
            secondary_info: none
            icon_color: green
            icon: mdi:shield-home
          - type: custom:mushroom-entity-card
            tap_action:
              action: navigate
              navigation_path: kameras
            entity: input_button.kameras
            layout: horizontal
            primary_info: none
            secondary_info: none
            icon_color: blue
            icon: mdi:video

[tonivss]

Hi everyone,

I am trying to make an icon that shows “dancing bars” to show that there is music playing.
I found a tutorial for scripting it in CSS but I can’t figure out how to implement that to an icon in Home Assistant. Can someone help?

The tutorial:

Animated music bars with CSS | Samuel Kraft

[yuval221183 (yuval)]

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:washing-machine
    icon_color: orange
    primary: 'Washing Machine #2'
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: shake 400ms ease-in-out infinite;
            transform-origin: 50% 58%;
            clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
          }
          @keyframes shake {
            0%, 100% { transform: translate(0, 0) rotate(0); }
            20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
            40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
            60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
            80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
          }
  - type: custom:mushroom-template-card
    icon: mdi:washing-machine
    icon_color: orange
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: spin 1s linear infinite;
            transform-origin: 50% 58%;
            clip-path: circle(21.7% at 50% 58%);
          }
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

I work with my 1 PM
How do I enter this value into the system here?
sensor.washing_machine_power

Thank you

[yuval221183 (yuval)]

Can you share all the code please :):

[royle (roy)]

hi,
Does anyone have the option of sharing their entire room view?
I have finished my main page, and now I want to move on to room views

[jar87 (Jarosław Drewnicki)]

Hello.

I`m having a question about badges.

Is there any possibility to place badge on top of main icon instead how it is right now on current photo?

[danwooller]

You can move the badge around like this:

                card_mod:
                  style: |
                    mushroom-badge-icon {
                      left: 15px;
                      top: 15px;
                    }

[jar87 (Jarosław Drewnicki)]

Thank You very much!

[bleugh (Dean)]

It may be useful for some of you - here’s my Custom Chips card for my Solar import / export
it changes icon, colour and text and value depending on values coming from my IotaWatt
two sensors used are
‘importing’ which is just measuring the current drawn from the grid
and ‘exporting’ which an integrator on the IotaWatt that pretty much just removes the negative from the number and reports as a positive Export

Here’s how it looks…

and

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: sensor.exporting
    icon: |-
      {% set state=states('sensor.exporting') %}
      {% if state | is_number and state | float > 0 %}
        mdi:transmission-tower-export
      {% elif state | is_number and state | float < 0 %}
        mdi:transmission-tower-off
      {% else %}
        mdi:transmission-tower-import
      {% endif %}
    icon_color: |-
      {% set state=states('sensor.exporting') %}
      {% if state | is_number and state | float > 0 %}
        green
      {% elif state | is_number and state | float < 0 %}
        blue
      {% else %}
        red
      {% endif %}
    content: >-
      {% set state=states('sensor.exporting') %} {% if state | is_number and
      state | float > 0 %}
        Exporting {{ states('sensor.exporting') }} {{ state_attr('sensor.exporting', 'unit_of_measurement') }}
      {% elif state | is_number and state | float < 0 %}
        Error
      {% else %}
        Importing {{ states('sensor.importing') }} {{ state_attr('sensor.importing', 'unit_of_measurement') }}
      {% endif %} 
  - type: template
    entity: sensor.solar_production
    icon: mdi:solar-panel
    icon_color: |-
      {% set state=states('sensor.solar_production') %}
      {% if state | is_number and state | float > 0 %}
        green
      {% elif state | is_number and state | float < 0 %}
        blue
      {% else %}
        red
      {% endif %}
    content: >-
      {{ states('sensor.solar_production') }} {{
      state_attr('sensor.solar_production', 'unit_of_measurement') }}
  - type: entity
    entity: sensor.total_pv_in_kw
    icon: mdi:solar-power-variant-outline
    name: Production