Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

Just like this:

type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: Pool
icon: none
layout: vertical
entity: sensor.pool_tank_level_percent
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
icon_color: ''
badge_color: ''
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {% set water_level = states(config.entity) | int %}
        {% if water_level > 80 %} 
          background: url("/local/my-icons/water 5.png") no-repeat center;
        {% elif water_level > 60 %}
          background: url("/local/my-icons/water 4.png") no-repeat center;
        {% elif water_level > 40 %}
          background: url("/local/my-icons/water 3.png") no-repeat center;
        {% elif water_level > 20 %}
          background: url("/local/my-icons/water 2.png") no-repeat center;
        {% else %}
          background: url("/local/my-icons/water 1.png") no-repeat center;
          --shape-animation: ping 1.5s infinite, pulse 1.5s ease-in-out infinite;
        {% endif %}
        background-size: contain;
        --shape-color: none;
      }
      @keyframes ping {
        0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      }
2 Likes

You can maximize the size of the Mushroom Volume control like this:

type: custom:mushroom-media-player-card
entity: media_player.currently_playing
layout: horizontal
volume_controls:
  - volume_set
  - volume_mute
card_mod:
  style: |
    mushroom-state-item {
      {{ 'max-width: fit-content;' if not is_state(config.entity, 'off') }}
    }
7 Likes

I am about to finish a ā€œwhat to wear pageā€ again created with mushroom and css.

This page is dynamic. It advises you with picture samples about what you can wear at home according to the temperature inside the house .The working principle is as follows. First of all, it takes the average of the temperature sensors in all rooms in the house. Then, according to this average, it recommends you the clothes you can wear at home with photos.

The page can also be displayed with variable icons on the main page of the mobile interface. Chip icons turn the clothes you can wear into icons on the homepage, depending on the temperature at home.

Ekran gƶrĆ¼ntĆ¼sĆ¼ 2022-10-17 043809

As you can see in the photo, a sweater is recommended to me at the current home temperature.

I will post a very simplified wiki on my github page when coding is done.

2 Likes

You can modify the entities card to lo be a Mushroom Entities card like this:

Mushroom Entities Card:

Mushroom Entities Card

type: entities
entities:
  - entity: light.lounge_light
    card_mod:
      style:
        hui-generic-entity-row$: |
          state-badge:before {
            content: '';
            position: absolute;
            top: 0; 
            left: 0;
            width: 100%; 
            height: 100%;  
            border-radius: 50%;
            opacity: 0.2; 
            {{ 'background: var(--paper-item-icon-active-color);' if is_state(config.entity, 'on') else 'background: var(--paper-item-icon-color);' }}
          }
          .info {
            font-size: 14px;
            font-weight: bold;
            color: var(--primary-text-color);
          }
  - entity: light.office_light
    card_mod:
      style:
        hui-generic-entity-row$: |
          state-badge:before {
            content: '';
            position: absolute;
            top: 0; 
            left: 0;
            width: 100%; 
            height: 100%;  
            border-radius: 50%;
            opacity: 0.2; 
            {{ 'background: var(--paper-item-icon-active-color);' if is_state(config.entity, 'on') else 'background: var(--paper-item-icon-color);' }}
          }
          .info {
            font-size: 14px;
            font-weight: bold;
            color: var(--primary-text-color);
          }
  - entity: light.kitchen_light
    card_mod:
      style:
        hui-generic-entity-row$: |
          state-badge:before {
            content: '';
            position: absolute;
            top: 0; 
            left: 0;
            width: 100%; 
            height: 100%;  
            border-radius: 50%;
            opacity: 0.2; 
            {{ 'background: var(--paper-item-icon-active-color);' if is_state(config.entity, 'on') else 'background: var(--paper-item-icon-color);' }}
          }
          .info {
            font-size: 14px;
            font-weight: bold;
            color: var(--primary-text-color);
          }
  - entity: sensor.rhys_office_sensor_temperature
    secondary_info: last-changed
    name: Office Temperature
    card_mod:
      style:
        hui-generic-entity-row$: |
          state-badge {
            color: rgb(var(--mush-rgb-blue));
            background: rgba(var(--mush-rgb-blue), 0.2);
          }
          .info {
            font-size: 14px;
            font-weight: bold;
            color: var(--primary-text-color);
          }
          .secondary {
            font-size: 12px;
            font-weight: bolder;
            color: var(--secondary-text-color);
          }
        .: |
          .value {
            font-size: 14px;
            font-weight: bold;
            color: var(--secondary-text-color);
          }
state_color: false
show_header_toggle: false
card_mod:
  style: |
    ha-card {
      --mush-rgb-amber: 255, 193, 7;
      --mush-rgb-blue: 33, 150, 243;
      --paper-item-icon-color: rgb(var(--mush-rgb-disabled));
      --paper-item-icon-active-color: rgb(var(--mush-rgb-amber));
    }
4 Likes

You can place the Primary & Secondary info on a single line like this:

Mushroom Sigle Line

type: custom:mushroom-template-card
primary: Mushrooms
secondary: 42 grown
icon: mdi:mushroom
icon_color: red
card_mod:
  style:
    mushroom-state-info$: |
      .container {
        display: table !important;
      }
      .secondary {
        display: table-cell;
        text-align: right;
        width: 100%;
      }
6 Likes

It would be difficult to rotate the existing slider. A better way would be to use the My-Cards slider.

Mushroom Light Card with Vertical Slider:

Mushroom Vertical Slider Light Card

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-light-card
    entity: light.office_light
    layout: vertical
    card_mod:
      style: |
        mushroom-state-info {
          text-align: start;
          width: fit-content;
        }
        ha-card {
          width: 66px;
        }
  - type: custom:my-slider-v2
    entity: light.office_light
    vertical: true
    styles:
      card:
        - height: 147px
        - width: 42px
      container:
        - border-radius: 12px
      track:
        - background: >
            [[[ if (entity.state == "off") return
            "rgba(var(--mush-rgb-disabled), 0.2)";
             else return "rgba(var(--mush-rgb-amber), 0.2)";
            ]]]
      progress:
        - background: >
            [[[ if (entity.state == "off") return
            "rgb(var(--mush-rgb-disabled))";
             else return "rgb(var(--mush-rgb-amber))";
            ]]]
      thumb:
        - width: 0px
    card_mod:
      style: |
        ha-card {
          padding: 12px 12px 12px;
          margin-left: auto;
        }
card_mod:
  style: |
    ha-card {
      height: 171px;
    }
13 Likes

Thank you @rhysb !!

  • You are the definition of a contributor.

Sometimes on forums I notice people like you.
The way you understand the question, and share what you know how to achieve.
I for one greatly appreciate it.

:smiley:

9 Likes

Sidenote for all readers in this sub forum;
:thought_balloon: Please give 10 seconds, and read the following

The cards that have been shown in this sub-forum, the cards that donā€™t yet exist inside Mushroom could be made even more accessible to newcomers and users without coding knowledge.

There is a suggestion to create a sub for working custom cards like this.
Sounds ā€œokā€, or a little interesting?
Clink the link, and then ā€œVOTEā€ button on the top right.

1 Like

What are you trying to change?

Wow,

Many thanks! Can it also show the state in the same line and font?

Thekholm

1 Like

Thanks again!

It doesā€™nt work, I donā€™t get the icons.
Did I miss something in the code?

type: entities
entities:
  - entity: light.matrum
    card_mod:
      style:
        hui-generic-entity-row$: |
          state-badge:before {
            content: '';
            position: absolute;
            top: 0; 
            left: 0;
            width: 100%; 
            height: 100%;  
            border-radius: 50%;
            opacity: 0.2; 
            {{ 'background: var(--paper-item-icon-active-color);' if is_state(config.entity, 'on') else 'background: var(--paper-item-icon-color);' }}
          }
          .info {
            font-size: 14px;
            font-weight: bold;
            color: var(--primary-text-color);
          }
  - entity: light.matrum
    card_mod:
      style:
        hui-generic-entity-row$: |
          state-badge:before {
            content: '';
            position: absolute;
            top: 0; 
            left: 0;
            width: 100%; 
            height: 100%;  
            border-radius: 50%;
            opacity: 0.2; 
            {{ 'background: var(--paper-item-icon-active-color);' if is_state(config.entity, 'on') else 'background: var(--paper-item-icon-color);' }}
          }
          .info {
            font-size: 14px;
            font-weight: bold;
            color: var(--primary-text-color);
          }
  - entity: light.matrum
    card_mod:
      style:
        hui-generic-entity-row$: |
          state-badge:before {
            content: '';
            position: absolute;
            top: 0; 
            left: 0;
            width: 100%; 
            height: 100%;  
            border-radius: 50%;
            opacity: 0.2; 
            {{ 'background: var(--paper-item-icon-active-color);' if is_state(config.entity, 'on') else 'background: var(--paper-item-icon-color);' }}
          }
          .info {
            font-size: 14px;
            font-weight: bold;
            color: var(--primary-text-color);
          }
  - entity: sensor.lumi_lumi_sensor_magnet_aq2_cddaf006_device_temperature
    secondary_info: last-changed
    name: Office Temperature
    card_mod:
      style:
        hui-generic-entity-row$: |
          state-badge {
            color: rgb(var(--mush-rgb-blue));
            background: rgba(var(--mush-rgb-blue), 0.2);
          }
          .info {
            font-size: 14px;
            font-weight: bold;
            color: var(--primary-text-color);
          }
          .secondary {
            font-size: 12px;
            font-weight: bolder;
            color: var(--secondary-text-color);
          }
        .: |
          .value {
            font-size: 14px;
            font-weight: bold;
            color: var(--secondary-text-color);
          }
state_color: false
show_header_toggle: false
card_mod:
  style: |
    ha-card {
      --paper-item-icon-color: rgb(var(--mush-rgb-disabled));
      --paper-item-icon-active-color: rgb(var(--mush-rgb-amber));
    }

If you havenā€™t already, you will need to define the Mushroom colors in your theme:

Yes, like this:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Mushroom
    secondary: 42 grown
    icon: mdi:mushroom
    icon_color: red
    card_mod:
      style: 
        mushroom-state-info$: |
          .container {
            display: table !important;
          }
          .secondary {
            display: table-cell;
            text-align: right;
            width: 100%;
            font-size: 14px !important;
            font-weight: bold !important;
            color: var(--primary-text-color) !important;
          }
        .: |
          ha-card:after {
            content: '';
            border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
            margin: 12px 0px -12px;
          }
  - type: custom:mushroom-template-card
    primary: Mushroom
    secondary: 42 grown
    icon: mdi:mushroom
    icon_color: red
    card_mod:
      style: 
        mushroom-state-info$: |
          .container {
            display: table !important;
          }
          .secondary {
            display: table-cell;
            text-align: right;
            width: 100%;
            font-size: 14px !important;
            font-weight: bold !important;
            color: var(--primary-text-color) !important;
          }

Super thanks,

You`re crazy good at this :slight_smile:

Best regards
Thekholm

1 Like

Background color of the button, as you helped me with the Media card.

For media:

card_mod:
  style:
    mushroom-media-player-media-control$: |
      mushroom-button {
        --bg-color: rgba(189, 189, 189, 0.2);
      }
    .: |
      mushroom-button {
        --bg-color: rgba(189, 189, 189, 0.2);
      }

For climate:

card_mod:
  style:
    mushroom-media-climate-control$: |
      mushroom-button-group {
        --bg-color: rgba(189, 189, 189, 0.2);
      }
    .: |
      mushroom-button {
        --bg-color: rgba(189, 189, 189, 0.2);
      }

But I Dont get the + - temp buttons to change as in the picture, only the mode button:

Captura de Pantalla 2022-10-16 a las 20.16.01

You can change the Mushroom Climate Card buttons like this:

type: custom:mushroom-climate-card
entity: climate.air_conditioner
show_temperature_control: true
hvac_modes:
  - heat_cool
  - heat
  - cool
  - dry
  - fan_only
card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container {
          background: none;
          padding: 0px;
        }
        #container .button {
          height: 100%;
          width: 30%;
        }
        #container .button:nth-child(1) {
          background: rgba(var(--rgb-blue), 0.2);
        }
        #container .button:nth-child(3) {
          background: rgba(var(--rgb-red), 0.2);
        }
6 Likes

Love this!! Iā€™m having an issue wiith auto-entities card for some reasonā€¦ Iā€™ve also used the one you pasted for batteries but the list will not populate for either oneā€¦ I get a big red ! and thatā€™s itā€¦

I know this is for the mushroom card but for the life of me I cannot figure out why the auto entity will not populateā€¦ any ideas why.

As always Thank you and excellent job!!

1 Like

Share your code and Iā€™ll have a look.

I have all the cards installed and browser refreshedā€¦ the popup happens just as it should but the list does not populateā€¦

      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: group.all_lights
                state: 'on'
            chip:
              type: template
              icon: mdi:lightbulb
              content: >-
                {{ expand(states.group.all_lights) | selectattr( 'state', 'eq', 'on') |
                list | count }}
              entity: group.all_lights
              icon_color: grey
              tap_action:
                action: fire-dom-event
                browser_mod:
                  service: browser_mod.popup
                  data:
                    title: Lights On
                    content:
                      type: custom:auto-entities
                      filter:
                        include:
                          - group: group.all_lights
                            state: 'on'
                            options:
                              type: custom:mushroom-light-card
                              show_brightness_control: true
                              layout: horizontal
                              tap_action:
                                action: toggle
                              use_light_color: true
                              card_mod:
                                style: |
                                  ha-card {
                                    padding: 4px 12px !important;
                                  }
                          - entity_id: group.all_lights
                            state: 'on'
                            options:
                              type: custom:mushroom-light-card
                              layout: horizontal
                              secondary_info: none
                              tap_action:
                                action: toggle
                              card_mod:
                                style: |
                                  ha-card {
                                    background: rgba(var(--rgb-state-light), 0.1);
                                  }
                        exclude: []
                      card:
                        type: custom:layout-card
                        cards: []
                        layout_type: masonry
                      sort:
                        method: friendly_name

Iā€™am almost there!

How to get the state on the right side and donā€™t get the shadow of the card? I can get one or the other.
This is what I have know.

type: custom:stack-in-card
cards:
  - type: picture-entity
    image: >-
      https://img.freepik.com/free-photo/modern-stylish-scandinavian-kitchen-interior-with-kitchen-accessories-bright-white-kitchen-with-household-items_169016-4791.jpg?w=1800&t=st=1665996359~exp=1665996959~hmac=cc45d77acabe81fa736605220e5492e14c627ee692fbf5b26416a2316d753cb1
    entity: light.matrum
    show_state: false
    show_name: false
    camera_view: auto
    aspect_ratio: '3'
    tap_action:
      action: toggle
    theme: Mushroom
  - type: custom:gap-card
    height: 2
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 33px
      margin: '-4px -4px -8px -4px;'
    cards:
      - type: custom:mushroom-template-card
        primary: Mushroom
        secondary: Name
        icon: mdi:mushroom
        entity: light.matrum
        icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''red'' }}'
        fill_container: false
        multiline_secondary: false
        card_mod:
          style: |
            ha-card {
              background: none;
              --ha-card-box-shadow: 0px;
            }
      - type: custom:mushroom-template-card
        entity: input_boolean.mushroom_matrum_card
        primary: ''
        secondary: ''
        icon: >-
          {{ 'mdi:chevron-up' if is_state(entity, 'on') else 'mdi:chevron-down'
          }}
        icon_color: black
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card {
              align-items: flex-end;
              background: none;
              --ha-card-box-shadow: 0px;
            }
            mushroom-shape-icon {
              --shape-color: none !important;
            }  
  - type: conditional
    conditions:
      - entity: input_boolean.mushroom_matrum_card
        state: 'on'
    card:
      type: entities
      entities:
        - type: custom:mushroom-template-card
          primary: Mushroom
          secondary: Name
          icon: mdi:mushroom
          icon_color: orange
          card_mod:
            style: |
              ha-card {
                box-shadow: none !important;
              }
              ha-card:after {
              content: '';
              border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
              margin: 12px 0px -12px;
              }
        - type: custom:mushroom-template-card
          primary: Mushroom
          secondary: Name
          icon: mdi:mushroom
          icon_color: orange
          card_mod:
            style: |
              ha-card {
                box-shadow: none !important;
              }
              ha-card:after {
              content: '';
              border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
              margin: 12px 0px -12px;
              }
        - type: custom:mushroom-template-card
          primary: Mushroom
          secondary: Name
          icon: mdi:mushroom
          icon_color: orange
          card_mod:
            style: |
              ha-card {
                box-shadow: none !important;
              }