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

[dimitri.landerloos]

No problem! just thought i would mention the searching topic as a lot of people dont realise

again, let me know if you need any help when you get a bit more into the thick of it!

[Chaoscontrol]

I’ll take your word right now. Do you know if there’s a way to use different/extra icons? Like Font Awesome library, or the full MDI? The icon library is a bit limited (looking for an open door atm).

Also, do you know if it’s possible to mix css with templating to add conditionals? For example, to adjust the color based on sensor value?

I use this with the standard badge. Would like to add the same to the ones generated with css.

badge_color: >-
  {{ iif(is_state('binary_sensor.presence_sensor_living_room_presence', 'on'),
  'blue', '') }}

Not sure about the syntax to merge them in here:

card_mod:
  style: |
    mushroom-badge-icon:before {
        color: var(--icon-color);
        background: var(--main-color);

Also not sure about your timezone, but happy new year!

Edit: forget the 2nd question, just noticed an example of this 2 replies before mine.

[dimitri.landerloos]

1st question. not entirely sure. The 2 ways i know of are with a stylesheet like described in the original post. Second would be uploading a png of an icon you want and trying to set it as a background of an element. If you decide to try and go this route i might be able to help with that.

2nd question. similar, like this:

card_mod:
  style: |
    mushroom-badge-icon:before {
      {% if is_state('binary_sensor.presence_sensor_living_room_presence','on') %}
        color: var(--icon-color);
        background: var(--main-color);
      {% else %}
        
      {% endif %}
    }

Or if you wanted the badge to entirely dissapear with no motion then like this:

card_mod:
  style: |
    {% if is_state('binary_sensor.presence_sensor_living_room_presence','on') %}
      mushroom-badge-icon:before {
        color: var(--icon-color);
        background: var(--main-color);
      }
    {% endif %}

Happy new year to you as well. Just watched the london fireworks on the tv since i am GMT

[raub21]

Happy new year to everyone! Does anyone know if there is a mushroom card for HA shopping list card? I have the simple one from HA with the following code:

type: shopping-list
title: Grocery List
icon: mdi:cart-outline

[LiQuid_cOOled]

@tvds I’m sure there may be other ways to acomplish this, but I always lean towards sensors to simplify things.

It’s my understanding that Home Assistant doesn’t natively provide a sensor that keeps count of the active lights. Therefore, you need to create a template sensor first to get the count of the lights currently turned on:

I added a sensor to the config file that returns True or False based on the lights that are ON, but with DNDMode lights excluded.

sensor:
  - platform: template
    sensors:
       lights_on:
        friendly_name: 'Lights ON'
        value_template: |
          {% set area = expand(area_entities('woonkamer'))
          | selectattr("state", "eq", "on")
          | selectattr ( 'domain' , 'eq' , 'light' )
              %}
          {{ area | rejectattr("attributes.device_class", 'eq', 'DNDMode') | list | count > 0 }} 

Then you can simply add the status of that sensor entity to the icon_color: in lovelace

icon_color: |-
          {%- if states('sensor.lights_on', True) %}
           red 
          {% else %} 
           blue
          {% endif %}

My only concern is I haven’t seen device_class: use capital letters so DNDMode as device_class may need adjusted. Let me know…

[dimitri.landerloos]

Cross-posting this for the sake of exposure to people who might have this question. Hopefully this is ok.

TLDR: setting an icon (MDI/SVG) to the background image using card mod:

Card-mod - Add css styles to any lovelace card

You are right. I was looking at the google font library instead. Whoopps. I do in general agree with also trying to remove yourself from google as much as possible, but unfortunately they kinda have a strangle hold on fonts and icons in web development for some reason… Like i said if you have the svg values of the mdi you want it looks like its possible to set as a background image, example: [SmartSelect_20240101_120228_Home Assistant] type: custom:mushroom-template-card icon: mdi:test-tube …

[Halover99 (HAlover)]

Dear Community,

I would like to know if possible use the carriedge return to show all text.

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#canali-camera'
    name: Camera Matrimoniale
    icon: phu:rooms-bedroom
    back_open: false
  - type: grid
    columns: 1
    square: false
    cards:
      - type: custom:bubble-card
        card_type: separator
        name: Canali TV
        icon: mdi:television
        styles: |
          .separator-container div:last-child {
            opaticy: 1|important;
          } 
  - type: custom:mushroom-template-card
    picture: /local/channel/rai1.png
    primary: >-
      {{ state_attr('sensor.rai1','title') }}
    secondary: >-
      {{ state_attr('sensor.rai1', 'description') }}
    card_mod:
      style: |
        ha-card {
          height: 200px !important;
          font: 1px !important;
        :host {
          width: 200px;
          height: 1900px;

[dimitri.landerloos]

You can do it like this:

  - type: custom:mushroom-template-card
    picture: /local/channel/rai1.png
    primary: >-
      {{ state_attr('sensor.rai1','title') }}
    secondary: >-
      {{ state_attr('sensor.rai1', 'description') }}
    card_mod:
      style:
        mushroom-state-info$: |
          .secondary {
            white-space: normal !important;
          }
        .: |
          ha-card {
            height: 200px !important;
            font: 1px !important;
          }
          :host {
            width: 200px;
            height: 1900px;
          }

you may or may not need overflow: visible !important; as well.

  - type: custom:mushroom-template-card
    picture: /local/channel/rai1.png
    primary: >-
      {{ state_attr('sensor.rai1','title') }}
    secondary: >-
      {{ state_attr('sensor.rai1', 'description') }}
    card_mod:
      style:
        mushroom-state-info$: |
          .secondary {
            white-space: normal !important;
            overflow: visible !important;
          }
        .: |
          ha-card {
            height: 200px !important;
            font: 1px !important;
          }
          :host {
            width: 200px;
            height: 1900px;
          }

[cedricdelecole]

Hi there, My current dashboard is awful, I mainly use it for couple of IP cams, Heater system (by room) and one main thing is the Solar / gris energy production like this :

My question is … can I continue to use the same cards, under mushroom, or I am obliged to use the Mushroom cards ?
Because the most useful cards I am using is this one and I love it

Many Thanks !!

[dimitri.landerloos]

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

[RkcCorian]

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 (github.com) but was not lucky to find the needed one.

[LiQuid_cOOled]

@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.

[changeqsq]

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

[dimitri.landerloos]

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?

[dimitri.landerloos]

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…

Mushroom Cards Card Mod Styling/Config Guide

Odd. Seems that you need to use background instead now for this card. Ill look into it because --shape-color still works for the Template card for example. EDIT: --shape-color still works. The light needs to be on for it to take effect. If you want to change the color whether light is off or on use background instead. The remaining syntax is the same. Ill update the guide to make this clear and check whether this also applies to things like the cover card.

[LiQuid_cOOled]

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.

[changeqsq]

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

[dimitri.landerloos]

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

[jeey2k]

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.

[RkcCorian]

@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