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

Thank you.

I must be doing something wrong I think. I copied the code, but its still the default color. I have set mushroom (not Mushroom square) as my theme. And I edited the themes/mushroom/mushroom.yaml file and added the lines. Am I missing something?

Try and go to developer and call the service to reload the theme.
Might work.

No luck. Restarted HA. Even rebooted the whole host. Something is incorrect. I tried a different browser and the incognito option as well. It’s still blue. :frowning:

Mushroom:
    # Home Assistant override
    ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
    ha-card-border-radius: 12px

    modes:
        light: {}
        dark: {}

    # Mushroom cover card
    mush-rgb-state-cover-open: var(--mush-rgb-brown)

Got it. :slight_smile: Seems like I reloaded the theme incorrectly and the color variables were missing in my theme. :slight_smile: It’s working now. Thanks to all helpers.

Is it possible to color the background of the chip based on conditions? I.e. if a door sensor is closed, color the chip background green.

I have noticed that my mushroom cards will render, but entity cards with actions such as navigate do not function. This is such a shame, I hope it gets fixed soon.

Mine work perfectly, so must be something wrong in your setup

Hi!

I have a sensor that give me the number of lights turned on. Works great, but the Template Chip, if the return of sensor is 0, doesn’t print anything.
I have been trying several ways to acomplish this, but it’s impossible.

{{ states("sensor.current_lights_on") }}
{% if is_state("sensor.current_lights_on", "0") %}
 0
{%- else -%}
  {{ states("sensor.current_lights_on") }}
{%- endif %}
{{ '0' if is_state('sensor.current_lights_on', '0') else states("sensor.current_lights_on") }}

Doesn’t matter the way i try, in Mushroom Template Chip, doesn’t works :frowning:

Any ideas?

Not sure, but try:

{% if is_state("sensor.current_lights_on") == 0 %}
content: '{{ states(''sensor.current_lights_on'') }}'

Works for me.

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

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

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:
image

1-n lights on:
image

4 Likes

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

Braces around the the zero work.

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

image

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

3 Likes

Works great!

Thank u!

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

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.

1 Like

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 :mushroom: (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.
image

1 Like

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!

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.

2 Likes