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

Mushroom cards are individual cards you place in your dashboard. You can mix and match to your hearts content.

Hello together,
I’m checking currently if I switch to Home Assistant. There are a few points where I’m struggeling and hope somebody can help me. Many thanks in advance!

I come accross the mushroom cards and they look good but when I have the standard cards together with mushroom cards it is not nice that behind the icon of the mushroom cards is some background. How can I get rid of it?

Additional: I have in the meantime my own theme in place and I would prefer to simply configure it there. I checked also a few of piitaya/lovelace-mushroom-themes: Additional themes for Lovelace Mushroom Cards :mushroom: (github.com) but was not lucky to find the needed one.

@RkcCorian If you have card_mod installed, its a pretty easy fix. Add the following code to the bottom of the mushroom card. If you have any issues, post your card code and we can help you troubleshoot a lot quicker.

card_mod:
   style:
     mushroom-shape-icon$: |
         .shape {
          --shape-color: none;
             }

Additionally if you are not using a Mushroom theme you’ll need to provide a little more information about the theme you are using to understand if the change you want can occure at the Themes level.

1 Like

I am a beginner in Home Assistant.Why is card_mod not taking effect? I noticed that the CSS injected using ha-card in card_mod does not work.

type: custom:mushroom-climate-card
entity: sensor.kong_diao_kai_qi_zhi_shu
hvac_modes:
  - dry
  - auto
show_temperature_control: true
fill_container: false
collapsible_controls: false
name: climate
card_mod:
  style: |
    ha-card {
      background: url('/local/images/icons/touxiang1.jpeg');
      background-repeat: no-repeat;
      background-size: 110%;
    }


Yes i see nothing. Do you actually have card mod installed from HACS? And if you did, did you clear the browser cache fully after install?

Just an FYI, might want to use
background: none !important; instead.
--shape-color: none !important; is only applied when an entity is ON. So when OFF the
--shape-color: none !important; wont work. There will still be a background (the --rgb-disabled, color).

So like this:

card_mod:
  style:
   mushroom-shape-icon$: |
     .shape {
       background: none !important;
     }

It is something i still need to update in my guide as well…

2 Likes

Great point! I have my disabled background color adjusted in the theme yaml and didn’t think of that. Only my icon colors relay the state and thats not the norm.

I have tried everything, but using ha-card still doesn’t work. However, the following code is effective.

type: custom:mushroom-person-card
entity: person.qsq
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: orange !important;
      }

So have you tried your initial code with a !important at the end like this:

card_mod:
  style: |
    ha-card {
      background: url('/local/images/icons/touxiang1.jpeg') !important;
      background-repeat: no-repeat;
      background-size: 110%;
    }

Any suggestions on how to troubleshoot this example?

Updated the area but the card just says “lights”, so it doesn’t find anything to target i assume.

@Iowone673 Many thanks! This is working but would be very bad in maintenance. So if you can share also a theme based solution this would be really nice, esp. before I would create the target dashboard.

One example about what I’m speaking about: I have to add your mentioned code the number of times that I have e.g. a blind…

type: vertical-stack
title: Rollläden
cards:
  - type: custom:mushroom-cover-card
    entity: cover.hausrollladen
    show_position_control: true
    show_tilt_position_control: false
    show_buttons_control: true
    fill_container: false
    tap_action:
      action: more-info
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
           --shape-color: none;
              }
  - type: custom:mushroom-cover-card
    entity: cover.schlafzimmerrollladen
    show_position_control: true
    show_buttons_control: true
    show_tilt_position_control: false
    tap_action:
      action: more-info
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
           --shape-color: none;
              }
  - type: custom:mushroom-cover-card
    entity: cover.balkonrollladen_links
    show_position_control: true
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
           --shape-color: none;
              }

I started to create my own theme and therefore I do not have much yet, but can share here anyhow…

my_theme:
  # Dashboard Background
  background-image: center / cover no-repeat fixed url(/local/pictures/moon_in_space_4k.jpg)
  lovelace-background: var(--background-image)

  # Cards
  ha-card-background: "rgba(0, 0, 0, 0.5)"
  ha-card-border-radius: "10px"
  ha-card-border-width: "0px"
  ha-card-box-shadow: none

Many thanks!! I was already on the way to mentioned that the initial solution works only for one state, but with your it is working in any state :smiley:

I have a problem reading the sensor update time. It shows me a reading every few hours and the actual reading occurs on average every few minutes.

type: custom:stack-in-card
cards:
  - type: custom:button-card
    entity: sensor.temperature_16
    tap_action:
      action: more-info
    hold_action:
      action: more-info
    show_icon: false
    secondary_info: last-changed
    name: Salon
    styles:
      card:
        - border-style: solid 2px
        - border: 1px solid green
        - border-radius: 1px
        - box-shadow: 0px 0px 10px -9px green
      custom_fields:
        temp:
          - filter: opacity(100%)
          - justify-self: start
          - margin-left: 10px
          - margin-top: 26px
          - padding-bottom: 10%
          - font-size: 65%
          - font-color: green
        bat:
          - filter: opacity(100%)
          - justify-self: start
          - margin-left: 10px
          - margin-top: 20px
          - padding-bottom: 10%
          - font-size: 65%
          - font-color: green
        info:
          - filter: opacity(80%)
          - justify-self: start
          - margin-left: 10px
          - margin-top: 18px
          - padding-bottom: 10%
          - font-size: 65%
          - font-color: green
        graph:
          - padding-top: 0%
          - width: 100%
          - height: 100%
          - margin-bottom: '-3%'
      icon:
        - width: 15px
        - color: auto
      name:
        - font-size: 87%
        - font-weight: var(--mcg-title-font-weight, 500)
        - justify-self: start
        - margin-top: 0px
        - margin-left: 12px
        - opacity: 2.65
      type: custom:layout-card
      layout_type: grid
      grid:
        - grid-template-areas: |
            "n n"
            "temp temp" 
            "bat bat"
            "graph graph" "info info"
        - grid-template-columns: 0fr 1fr 1fr 1fr 1fr min-content
        - grid-template-rows: auto
    custom_fields:
      temp: |
        [[[
          return `<ha-icon
            icon="mdi:thermometer"
            style="width:18px; height: 18px; color:#ff8c00;">
            </ha-icon><span style="font-size:125%; font-weight: 450;"> 
            ${states['sensor.temperature_16'].state}°C </span> 
            <ha-icon
            icon="mdi:water-percent"
            style="width: 18px; height: 18px; color: #3399ff;">
            </ha-icon><span style="font-size:125%; font-weight: 450; text-align: center;">
            ${states['sensor.humidity_17'].state}%</span>`
        ]]]
      bat: |
        [[[
          return `<ha-icon
            icon="mdi:gauge"
            style="width:18px; height: 18px; color:green;">
            </ha-icon><span style="font-size:120%; font-weight: 500;"> 
            ${states['sensor.pressure_20'].state} hPa </span>`
        ]]]
      info: |
        [[[
          return `<ha-icon
            icon="mdi:timelapse"
            style="width:18px; height: 18px; color:purple;">
            </ha-icon><span style="font-size:120%; font-weight: 400;"> 
            ${states['sensor.temperature_16'].last_changed}</span>`
        ]]]
    view_layout:
      grid-area: bat
    card_mod:
      style: |
        ha-card {
          z-index: 1;
          height: 132px !important;
        }
      primary_info: more-info
      secondary_info: more-info
      tap_action:
        action: more-info
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.temperature_16
        name: Temperature
        color: '#ff8c00'
      - entity: sensor.humidity_17
        name: Humidity
        color: '#3399ff'
        y_axis: secondary
    height: 50
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
    card_mod:
      style: |
        ha-card {
          position: absolute !important;
          height: 100%;
          width: 100%;
          top: 0px;
          --ha-card-border-width: 0;
        }
        ha-card:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: light
        entity: sensor.salon_rower_battery
        hold_action:
          action: more-info
        card_mod:
          style: |
            ha-card {
              border: none;
              box-shadow: none !important;
              background: none !important;
            }
    alignment: end
    card_mod:
      style: |
        ha-card {
          position: absolute !important;
          height: 100%;
          width: 100%;
          top: 0px;
          z-index: 1;
        }
view_layout:
  column: 3

hi, this dropdown looks super sick. do you mind sharing how you do this? i really would love to do the same thing!
thanks

I added it, but it still doesn’t work.

I updated card_mod , and it seems to be working now.

1 Like

which bit do you actually have a problem with. only 1 bit of this is mushroom related which is your 1 chip that for some reason is a light chip, but is using a sensor entity?

if its not related to that chip i would take this to the correct topic. Button card or Mini Graph card.

1 Like

how you make this dashboard can you share this pleas ?

Thanks @dimitri.landerloos,

Eventually I went with this as I already had a template (helper) in place:

card_mod:
  style:
    mushroom-template-chip:nth-child(2)$: |
      span:after {
        content: '{{ states('sensor.lights_on') }} aan';
         display: flex;
         padding-top: 0.3em;
         color:var(--secondary-text-color);
      }

Looks pretty nice now:

2 Likes

Unfortunately, without rewriting the Mushroom JavaScript you won’t be able to remove the background color while keeping the icon color. The code is written in a way that uses a derivative of the icon color for the background color. As far as I know, adding card_mod to each card/entity is currently the simplest solution.

I am a huge fan of Mushroom with Card_Mod because the combo allows so much custimization. I am going to tackle a small personalized js rewrite, because like you I do not prefer the shape background to have color. If/when i’m done, I will reach out.

One of my cards…

2 Likes