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

[Thekholm]

Well… That’s because I diden’t think abaout that

Thanks,

Thekholm

[RASBR (Rami)]

Hi Rhysb,
How can I combine the animation of the ALERT with this icon to be active under the {% else %} condition?

        --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;;
        }
        @keyframes ping {
          0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
          100% { box-shadow: 0 0 5px 15px transparent; }
        }
        @keyframes blink {
          100% {opacity: 0;}
        }

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;
        {% endif %}
        background-size: contain;
        --shape-color: none;
      }

[RonM (Ron Meijsen)]

Hi,

I am using the template card because I want to use the light card with the slider in a different color, I managed to change the icon, but not the rest,
How an I change the slider?
This is my code:

type: custom:mushroom-light-card
entity: light.licht_bank
card_mod: null
style: |
mushroom-shape-icon{
–icon-color: rgb(var(–rgb-teal)) !important;
–shape-color: rgba(var(–rgb-teal), 0.2) !important;
}
name: Bank
show_brightness_control: true
tap_action:
action: toggle
primary_info: name
secondary_info: none

Ron

[alnavasa (A)]

I can’t get the + - thermostat card to change, how could that one be, I have tried multiple CSS elements, but with no luck.

[RonM (Ron Meijsen)]

Hi, i did not look up high enough already found the code thanks

[StefanHabel]

Is there a overview of all these good ideas you come up with Luke the custom cards for Minimalist?

[rhysb (Rhys)]

Yes, you can add a Mushroom Card Divider like this:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Mushroom
    icon: mdi:mushroom
    icon_color: red
    card_mod:
      style: |
        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
    icon: mdi:mushroom
    icon_color: red

[rhysb (Rhys)]

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; }
      }

[rhysb (Rhys)]

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') }}
    }

[berkans (Berkan Sezer)]

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.

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.

[rhysb (Rhys)]

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

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));
    }

[rhysb (Rhys)]

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

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%;
      }

[rhysb (Rhys)]

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:

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;
    }

[KaherdinTristan (Andrew)]

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.

[KaherdinTristan (Andrew)]

Sidenote for all readers in this sub forum;
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.

Custom Component Section For Forum

More of a site request than a HA request. Any chance we can get a “Custom Component” section added to the forum? I find myself stumbling across new ones now and then that really value add to my setup (and others I’m sure). If we could have them all in one section it would be a whole lot easier to discover the great work being done by fellow users.

[rhysb (Rhys)]

What are you trying to change?

[Thekholm]

Wow,

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

Thekholm

[Thekholm]

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));
    }

[rhysb (Rhys)]

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

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

If you want to match the Mushroom colors, add these variables to your theme: mush-rgb-red: 244, 67, 54 mush-rgb-pink: 233, 30, 99 mush-rgb-purple: 156, 39, 176 mush-rgb-deep-purple: 103, 58, 183 mush-rgb-indigo: 63, 81, 181 mush-rgb-blue: 33, 150, 243 mush-rgb-light-blue: 3, 169, 244 mush-rgb-cyan: 0, 188, 212 mush-rgb-teal: 0, 150, 136 mush-rgb-green: 76, 175, 80 mush-rgb-light-green: 139, 195, 74 mush-rgb-lime: 205, 220, 57 mush-rgb-yellow: …

[rhysb (Rhys)]

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;
          }