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

[adijk74 (Alle D.)]

Not sure, but try:

{% if is_state("sensor.current_lights_on") == 0 %}

[RodgerDodger]

content: '{{ states(''sensor.current_lights_on'') }}'

Works for me.

Maybe post your whole code for the chip. Have you maybe disabled showing by icon?

[piKolin]

The problem is the returned value (0 in that case), because if i concat a char to the zero, it works.

[RodgerDodger]

Please don’t post screenshots, use code and as stated above post the whole code for the chip card please.

As an example here’s mine:

      - type: custom:mushroom-chips-card
        chips:
          - type: template
            double_tap_action:
              action: none
            icon_color: |-
              {% if is_state('sensor.count_lights_on', '0') %}
                disabled
              {% else %}
                amber
              {% endif %}
            icon: mdi:lightbulb-alert
            entity: sensor.count_lights_on
            tap_action:
              action: more-info
            hold_action:
              action: call-service
              service: light.turn_off
              service_data: {}
              target:
                entity_id: light.ganze_haus
            content: '{{ states(''sensor.count_lights_on'') }}'
            card_mod: null
            style: |
              ha-card {
                box-shadow: 0px 0px;
              }
        alignment: end

0 lights on:

1-n lights on:

[piKolin]

This is my behaviour, but i want to show “0” when all lights turned off.

My code is similar that yours:

type: custom:mushroom-chips-card
chips:
  - type: template
    double_tap_action:
      action: none
    icon_color: '{{ ''disabled'' if is_state("sensor.current_lights_on", "0") else ''amber'' }}'
    icon: '{{ ''mdi:lightbulb-off'' if is_state("sensor.current_lights_on", "0") else ''mdi:lightbulb-on'' }}'
    content: |-
      {% if is_state("sensor.current_lights_on", "0") %}
       0
      {%- else -%}
        {{ states("sensor.current_lights_on") }}
      {%- endif %}
    tap_action:
      action: none
    hold_action:
      action: none
alignment: justify

[RodgerDodger]

Braces around the the zero work.

    content: |-
      {% if is_state("sensor.count_lights_on", "0") %}
       {0}
      {%- else -%}
        {{ states("sensor.count_lights_on") }}
      {%- endif %}

To put the 0 in the same grey you’ll have to deal with cardmod.

[piKolin]

Works great!

Thank u!

[berkans (Berkan Sezer)]

is it possible to share your code? Nice work by the way.

[dvanderb]

I am sure this is in this thread somewhere… but I’ll ask anyway. I want to make the title card lower profile in a vertical-stack… it leaves a lot of negative space which looks a bit odd. How can I do that? Extra bonus if I can get the title into a mushroom entity style title bar…
Attaching a picture of the dashboard to illustrate.

[benchr]

After I asked the same questions earlier up the thread, and got advice from others, thank you by the way, there are a few options if I understood the question.

• put the title text into subtitle of your card, and leave the title blank. that gives a smaller font.
• or change the theme sizing variables.

To half the white space, put these into your mushroom.yaml file under themes/mushroom

mush-title-padding: 12px 12px 6px
mush-title-spacing: 6px

The original was

mush-title-padding: 24px 12px 16px
mush-title-spacing: 12px

All theme variables you can mess with are here:
piitaya/lovelace-mushroom-themes: Additional themes for Lovelace Mushroom Cards (github.com)

or do both. have smaller text, as subtitle, and squeeze up the gaps but reducing the spacing. Mine looks like this with the top title using both title, and subtitle, and the secondary titles using just subtitle.

[pbohannon (PB)]

Hi there - adding my sincere thanks for what was obviously a lot of hard work. These cards definitely lower the barrier to entry and take away some of the ‘writer’s block’ when it comes to making dashboards! Would someone mind to comment on whether shortcuts are available on the media card? The card itself is sharp, but I’m looking to use one of the various strategies to include buttons to call different playlists, etc. Or would the best design be to just use chips in the same grid space below the media player or something? Does anyone have a media player design with the mushroom cards they’d mind to share?

Thanks!

[benchr]

another way to do it maybe is to put in a mushroom entity card, hide the icon, switch secondary info to none, and then you have a title with a shadow border, and a lot less space. just pick any entity, as it doesnt matter, overwrite the title, and turn off the tap, double tap, and presshold actions. a little like this.

[Turbo4door (Justin)]

You can use a stack-in card to build what you want. Here’s a quick mock-up using mushroom media card, mushroom template cards, stack-in card, and card mod to remove the borders between the cards. You could use chips in place of the template cards if you wanted to slim it down some. Disregard the playlist icons, i copied some code from my welcome card

I do this a lot in my mobile dashboard. I’ve built a custom welcome card, custom person cards, and some others that all keep the look/feel of the original mushroom cards but combine them to make them into one card. I think it works well.

[SmartWorkx]

Made my own based on the actual containers

[JesseWebDotCom]

What are you all using to reuse code like this over and over again? I want to use the chip below for each room and don’t want to copy and paste this large block of code. Are you using decluttering card or something like it?

- type: custom:mushroom-chips-card
  chips:
    - type: template
      double_tap_action:
        action: none
      icon_color: >-
        {{ 'disabled' if
        is_state("sensor.master_bedroom_lights_on", "0") else
        'amber' }}
      icon: >-
        {{ 'mdi:lightbulb-off' if
        is_state("sensor.master_bedroom_lights_on", "0") else
        'mdi:lightbulb-on' }}
      content: |-
        {% if is_state("sensor.master_bedroom_lights_on", "0") %}
          {0}
        {%- else -%}
          {{ states("sensor.master_bedroom_lights_on") }}
        {%- endif %}
      tap_action:
        action: none
      hold_action:
        action: none
  alignment: justify

[zeltak]

wow a new Home assistant user and blown away by this! thx @piitaya !

so I have a few silly newer question

I have used chips to look at state of door locks and door open. im trying to get the door unlock and door open state to color the entity in red when unlocked and open. problem is they both seem to act the opposite way

ie for the locks I have this

type: entity
entity: lock.patio_door
icon_color: green
name: Patio
use_entity_picture: false

now I can’t figure out how to make the lock green when locked but red when unlocked?

on the flip side for the contact sensor, its colorless when closed and would be great to also have it in green when closed.

finally is there a way to keep the state of the device (ie shutter open) yet also name the actual entity so I can tell the difference between my many devices (ie shutters, locks etc)

thx so much

Z

[JesseWebDotCom]

How can I remove the background and padding of a individual chip? ex. Like in the post above, how can I remove the grey oval card background?

[RodgerDodger]

Card-mod and this code at the end:

      card_mod: null
      style: |
        ha-card {
          background: none;
          box-shadow: none;
        }

[Derekgeemano (DEREKG)]

Question- Does a browse media button exist for the Media Card? Just wondering if I have somehow missed it in the configuration for the card. Thanks for all these wonderful Mushroom Cards!

[RodgerDodger]

For state based coloring or naming you have to use the template chip as stated several times in this thread.

The code for your lock should be something like this:

{% if is_state('lock.patio_door', 'locked') %}
  green
{% elif is_state('lock.patio_door', 'unlocked') %}
  red
{% endif %}

AFAIK chip cards do not have a secondary info and in the template chip you only have content to fill and I don’t think you could put a line break in other cards than markdown.
But when you accomplished the coloring you could just put the name of the lock in the content field of the card.

Something like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    double_tap_action:
      action: none
    icon: mdi:door
    icon_color: |-
      {% if is_state('lock.patio_door', 'locked') %}
        green
      {% elif is_state('lock.patio_door', 'unlocked') %}
        red
      {% endif %}
    tap_action:
      action: none
    hold_action:
      action: none
    entity: lock.patio.door
    content: Patio