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

[stuengland]

Here is my code from using a shelly which triggers a relay and an aqara door/window to do the open/close:

type: custom:mushroom-template-card
primary: |
  {% set state=states('binary_sensor.garagerollerleft') %}
  {% if state=='on' %}
  Open
  {% elif state=='off' %}
  Closed
  {% else %}
  ERROR
  {% endif %}
secondary: Left Garage Door
icon: |-
  {% set state=states('binary_sensor.garagerollerleft') %}
  {% if state=='on' %}
  mdi:garage-open
  {% elif state=='off' %}
  mdi:garage
  {% else %}
  mdi:garage-alert
  {% endif %}
entity: binary_sensor.garagerollerright
icon_color: |-
  {% set state=states('binary_sensor.garagerollerleft') %}
  {% if state=='off' %}
  green
  {% elif state=='on' %}
  red
  {% else %}
  yellow
  {% endif %}
layout: vertical
multiline_secondary: false
tap_action:
  action: call-service
  service: switch.turn_on
  data: {}
  target:
    entity_id: switch.garage_door_left_relay_relay_0

[2jan]

Awesome layout! What did you do to create the left menu part?

[stuengland]

Is it possible to display information from another entity in the primary and secondary information areas? or as a badge? Or even specify additional entities from the same device? for example the battery level on the mushroom card. Or if motion was detected in the room which the light entity card as a badge on the light entity card?

[rhysb (Rhys)]

Use ‘–card-primary-font-size’ like this:

    card_mod:
      style: |
        :host {
          --mush-icon-size: 60px;
          height: 49px;
          margin-left: -20px !important;
          --card-primary-font-size: 20px !important;
        }

[image969 (James Scialdone)]

Can you change what the text says using card mod?
Like instead of changing the color the size of the fonts can you change the actual letters to say something different than the options you’re given?

[rhysb (Rhys)]

You have two options:

Adjust font size:

type: horizontal-stack
cards:
  - type: custom:mushroom-entity-card
    entity: switch.linktap
    secondary_info: none
    name: Water Plants
    icon: mdi:sprout-outline
    icon_color: light-green
    fill_container: true
    layout: vertical
    double_tap_action:
      action: toggle
    tap_action:
      action: none
    primary_info: name
  - type: custom:mushroom-entity-card
    entity: switch.outdoor_plug
    secondary_info: none
    name: Birdbath
    icon: mdi:bird
    icon_color: light-blue
    layout: vertical
    fill_container: true
    double_tap_action:
      action: toggle
    tap_action:
      action: none
  - type: custom:mushroom-entity-card
    entity: input_boolean.disable_backyard_soakers
    secondary_info: none
    fill_container: true
    layout: vertical
	card_mod:
      style: |
        ha-card {
          --card-primary-font-size: 10px;
        }

Enable word-wrap:

type: horizontal-stack
cards:
  - type: custom:mushroom-entity-card
    entity: switch.linktap
    secondary_info: none
    name: Water Plants
    icon: mdi:sprout-outline
    icon_color: light-green
    fill_container: true
    layout: vertical
    double_tap_action:
      action: toggle
    tap_action:
      action: none
    primary_info: name
  - type: custom:mushroom-entity-card
    entity: switch.outdoor_plug
    secondary_info: none
    name: Birdbath
    icon: mdi:bird
    icon_color: light-blue
    layout: vertical
    fill_container: true
    double_tap_action:
      action: toggle
    tap_action:
      action: none
  - type: custom:mushroom-entity-card
    entity: input_boolean.disable_backyard_soakers
    secondary_info: none
    fill_container: true
    layout: vertical
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            white-space: normal;
          }
        .: |
          mushroom-state-item {
            margin-bottom: 0px;
          }

[nappyjim (Jim)]

@rhysb word wrap looks better IMO. Thank you

[nappyjim (Jim)]

I’m loving this mod. I can now set up pages with very simply navigation that I dont have to hide certain ones from my wife.

Heres main page (cell phone) I’ve been working on. Click on the people entities up top brings you to each of our “favorites” pages.

And heres how my lightstrip control used to look, versus how it looks now. I added the star badge to denote which color is selected. And for effects, icon changes to green when that icon is selected. (i cant use a regular light entity for reasons that are too much to explain here). Its more pages, but I think much nicer looking and wife friendly.

[nappyjim (Jim)]

Sorry for barrage of posts…

Is there a certain directory I need to upload pictures to? How do I link them? If I have picture located in config/www/5.png

how do input that into the template card picture section?

[mihailescu2m (Marian)]

@stuengland yes, I will give you an example with my card here, which shows secondary information from a fan or a thermostat, based on the fan preset_mode, and has one chip for thermostat temperature and 2 more chips, one for fan, one for thermostat - clicking on each chip takes you to each entity (more-info).
Icon, icon-color and fan/thermostat chip colors are also dynamic (based on thermostat hvac_action).

Same card code on different rooms:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: fan.damper_living
    hold_action: None
    primary: Living
    secondary: |
      {% if state_attr("fan.damper_living", "preset_mode") == "ITC" %}
        {% set state = state_attr("climate.itc_living", "hvac_action") | capitalize %}
        {% set target = state_attr("climate.itc_living", "temperature") | round %}
        {% set text = "to " + target | lower + "°C" if state != "Idle" and state != "Off" %} 
      {% else %}
        {% set state = states("fan.damper_living") | capitalize %}
        {% set target = state_attr("fan.damper_living", "percentage") %}
        {% set text = "at " + target | lower + "%" if state != "Off" %}
      {% endif %}
      {{ state }} {{ text }}
    icon: >
      {%- set icons = {
        "heating": "mdi:fire",
        "cooling": "mdi:snowflake",
        "drying": "mdi:water-percent",
        "idle": "mdi:air-conditioner",
        "off": "mdi:power"} -%}
      {{ icons[state_attr("climate.itc_living", "hvac_action")|lower] |
      default("mdi:autorenew") }}
    icon_color: >
      {%- set colors = {
        "heating": "#ff8100",
        "cooling": "#2b9af9",
        "drying": "#efbd07",
        "idle": "#8a8a8a",
        "off": "disabled"} -%}
      {{ colors[state_attr("climate.itc_living", "hvac_action")|lower] |
      default("#8a8a8a") }}
    card_mod:
      style: |
        :host {
          height: 84px;
        }
  - type: custom:mushroom-chips-card
    alignment: center
    chips:
      - type: template
        entity: climate.itc_living
        content: '{{ state_attr("climate.itc_living", "current_temperature") }}°C'
        tap_action: None
        hold_action: None
        card_mod:
          style: |-
            ha-card {
              top: -16px;
            }
      - type: template
        entity: fan.damper_living
        icon: mdi:air-filter
        icon_color: >
          {%- set colors = {
            "heating": "#ff8100",
            "cooling": "#2b9af9",
            "drying": "#efbd07",
            "idle": "#8a8a8a",
            "off": "disabled"} -%}
          {{ colors[state_attr("climate.itc_living", "hvac_action")|lower] |
          default("#8a8a8a") if state_attr("fan.damper_living", "preset_mode")
          != "ITC" }}
        tap_action:
          action: more-info
        hold_action:
          action: call-service
          service: fan.set_preset_mode
          data:
            entity_id: fan.damper_living
            preset_mode: Damper
        card_mod:
          style: >
            {%- set colors = {
              "heating": "255, 129, 0",
              "cooling": "43, 154, 249",
              "drying": "239, 189, 7",
              "idle": "138, 138, 138",
              "off": "138, 138, 138"} -%}
            {% set color = colors[state_attr("climate.itc_living",
            "hvac_action")|lower] | default("138, 138, 138") if
            state_attr("fan.damper_living", "preset_mode") != "ITC" else
            "var(--rgb-state-disabled)" %}

            ha-card {
              top: -16px;
              --chip-background: rgba({{color}}, 0.2);
              --text-color: rgb({{color}});
            }
      - type: template
        entity: climate.itc_living
        icon: mdi:thermometer
        icon_color: >
          {%- set colors = {
            "heating": "#ff8100",
            "cooling": "#2b9af9",
            "drying": "#efbd07",
            "idle": "#8a8a8a",
            "off": "disabled"} -%}
          {{ colors[state_attr("climate.itc_living", "hvac_action")|lower] |
          default("#8a8a8a") if state_attr("fan.damper_living", "preset_mode")
          == "ITC" }}
        tap_action:
          action: more-info
        hold_action:
          action: call-service
          service: fan.set_preset_mode
          data:
            entity_id: fan.damper_living
            preset_mode: ITC
        card_mod:
          style: >
            {%- set colors = {
              "heating": "255, 129, 0",
              "cooling": "43, 154, 249",
              "drying": "239, 189, 7",
              "idle": "138, 138, 138",
              "off": "138, 138, 138"} -%}
            {% set color = colors[state_attr("climate.itc_living",
            "hvac_action")|lower] | default("138, 138, 138") if
            state_attr("fan.damper_living", "preset_mode") == "ITC" else
            "var(--rgb-state-disabled)" %}

            ha-card {
              top: -16px;
              --chip-background: rgba({{color}}, 0.2);
              --text-color: rgb({{color}});
            }

[KTibow (Kendell R)]

Couldn’t you use a template llight?

[KTibow (Kendell R)]

You could also make the name shorter.

[KTibow (Kendell R)]

You could try using ::before and stuff, it’s complex.

[nappyjim (Jim)]

@KTibow

Couldn’t you use a template llight?

long story short, I have Inovelli z wave lightstrips that are being commanded via ZWaveJS2MQTT. The light entity was never able to duplicate the colors correctly and i was not able to select effects.

[nappyjim (Jim)]

@rhysb

Enable word-wrap:

I copied and paste your code and got error seen in picture below. I installed card mod from HACS and added entry into my configuration.yaml to point to where HACS installed the .js file.

[SpookyAwol]

[rhysb (Rhys)]

Card-Mod installed via HACS is here for me:

  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

[Step]

Right now testing to see if this works:

card_mod:
  style: |
    ha-card {
      height: 102px;
      {% if (now().date() + timedelta(days=1)) | string == 
                             states('sensor.non_recyclable_waste_pickup') %}
       background: rgba(255, 152, 0, 0.1);
      {% elif now().date() | string == 
                             states('sensor.non_recyclable_waste_pickup') %}
       background: rgba(255, 152, 0, 0.1);
      {% endif %}
    }

Can’t test it immediately as I do not know how to replace the sensor of waste_pickup for a good timestamp.

[SeRiusRod (Sergio)]

Hi! I’m in love with this set of cards. Thank you very much @piitaya for it!

Anyone knows how I can make chips show a sensor attribute?

[markus78]

I used this sidebar card for the left menu.