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

Frosty · April 24, 2024, 2:54pm

I am not 100% sure.
but until someone corrects me with the right answer I would look at these two in your themes yaml file.

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

iona · April 24, 2024, 3:31pm

This doesn’t affect Mushroom cards unfortunately.

Edit: Here’s the fix, if anyone is interested.

 card-mod-card: |
     mushroom-shape-icon {
        --shape-color: none !important; 
        --shape-color-disabled: none;
      }

Frosty · April 24, 2024, 4:36pm

sorry I completely missed the little black line. I thought you were pointing to the card border.

jemtlands · April 24, 2024, 7:38pm

This was exactly what i was looking for. Thank you!

Frosty · April 24, 2024, 7:53pm

no problem if you wanted them closer together you can add some margin. like this.

type: custom:stack-in-card
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-entity-card
        card_mod:
          style: |
            ha-card {
              border: 0px;
              box-shadow: none;
              }
        entity: light.diner
        name: Sprinkler
        icon: mdi:sprinkler
      - type: custom:mushroom-number-card
        card_mod:
          style: |
            ha-card {
              border: 0px;
              box-shadow: none;
              margin-top: -20px
              } 
        entity: input_number.daily_energy_cost
        display_mode: buttons
        primary_info: none
        secondary_info: none
        icon_type: none

SoulAssassin · April 25, 2024, 9:48am

Hi there!

Guys, in chip’s ha-card:after is possible to set color of border line?

        - type: template
          entity: sensor.electricity_input_wh_to_kwh_bimonthly
          content: "{{ states('sensor.electricity_input_wh_to_kwh_bimonthly') }} kWh"
          icon: mdi:calendar-weekend
          icon_color: "#44739e"
          tap_action:
            action: more-info
          double_tap_action:
            action: none
          hold_action:
            action: more-info
          card_mod:
            style: |
              ha-card:after {
                content: "{{ states('sensor.money_total_bimonthly') }} грн";
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgb(var(--rgb-white));
                color: black;
                font-weight: bolder;
                border-radius: 15px 15px 15px 15px;
                top: -5px;
                right: -5px;
                width: 50px;
                height: 11px;
                font-size: 10px;
              }

LiQuid_cOOled · April 26, 2024, 12:59am

Yes add border: 2px solid red;

type: custom:mushroom-chips-card
chips:
        - type: template
          entity: sensor.electricity_input_wh_to_kwh_bimonthly
          content: "{{ states('sensor.electricity_input_wh_to_kwh_bimonthly') }} kWh"
          icon: mdi:calendar-weekend
          icon_color: "#44739e"
          tap_action:
            action: more-info
          double_tap_action:
            action: none
          hold_action:
            action: more-info
          card_mod:
            style: |
              ha-card:after {
                content: "{{ states('sensor.money_total_bimonthly') }} грн";
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgb(var(--rgb-white));
                color: black;
                font-weight: bolder;
                border-radius: 15px 15px 15px 15px;
                border: 2px solid red;
                top: -5px;
                right: -5px;
                width: 50px;
                height: 11px;
                font-size: 10px;
              }

Stevengerrard08 · April 26, 2024, 11:26am

I want to implement this across my entire dashboard using my theme, instead of having to add it to each card individually.

Can someone help me figure out how to solve this?

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

sooty · April 26, 2024, 1:23pm

You can put it in your configuration.yaml file. Here is an extract from mine, where I wanted the same effect replicated across all cards…

frontend:
  themes:
    Mushroom Custom:
      card-mod-theme: "Mushroom Custom"
      card-mod-card: |
        ha-card:active {
          background: rgba(var(--rgb-disabled), 0.1);
          transition: 0s;
        }

Stevengerrard08 · April 27, 2024, 12:06pm

I’m unable to insert that. I’m using this theme, can it be inserted into that file?

####################### LIGHT MODE ####################
MiniHass_Light:

contrast

contrast-0: “#ffffff”
contrast-10: “#F2F2F2”
contrast-20: “#e5e5e5”
contrast-33: “#888888”
contrast-66: “#444444”
contrast-100: “#000000”

main interface colors

color-green: “#39bb4f”
color-yellow: rgb(253 204 18)
color-blue: rgba(159,204,250,1)
…

Frosty · April 27, 2024, 1:36pm

according to @sooty post it has to be in the configuration.yaml file. should be at the top of that file

you will more than likely already have this.

#Load frontend themes from the themes folder
frontend:
  themes: !include_dir_merge_named themes

WeisserWolf611 · April 27, 2024, 1:38pm

Is there a option to show the time for last-changed in a mushroom card like in this sample:

I need this to see, how long a state is actually on

This my code, it works but in english. Can I change it?

{{ relative_time(states.switch.Pool_0.last_updated) }}

I need hours and minutes whe the device is on for more than 60minutes not only hours.

sooty · April 27, 2024, 3:49pm

Hi @Stevengerrard08, I tend to bumble my way through this stuff largely by making lots of mistakes. However, to get this working I referenced these two documents around Card-Mod Themes which you may also find helpful…

github.com

thomasloven/lovelace-card-mod/blob/f59abc785eabb689ac42a9076197254421f96c60/README-themes.md

## Themes

More to come. In the mean time, see [the Wiki](https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes).

### card-mod-theme

This is very important!

The theme MUST define a variable `card-mod-theme` which MUST have the same value as the name of the theme.

Eg:

```yaml
my-awesome-theme:
  card-mod-theme: my-awesome-theme

  ... other theme variables go here ...
```

### Theme variables

This file has been truncated. show original

ciddi89 · April 27, 2024, 8:58pm

You can have a look for the hacs integration easy time. There you have many options. Also to translate

Here is one example: {{ easy_relative_time(states.sensor.my_energy_meter.last_updated, language= 'de') }}

Grüße

arnocl · April 28, 2024, 6:52pm

I really like the style of these cards and it’s nice to see other projects adopting the same principles (eg. Timer Card), gives the whole experience a uniform feel.

What i was missing was a card with the information a gauge card can give, an indication of the position of a value in a range and it’s severity. The original gauge card feels a bit bulky, especially compared with the mushroom guidelines. The same info can be given with the Bar Card, but its style also doesn’t match with what i want.

I tried to tweak the styling with css, I shared the code for those interested in this post.

reypm · April 29, 2024, 10:19pm

Is it possible to animate a chip card icon? If so, how? I could not find anything helpful in this post or this other one, this is how my card config looks like:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: person.person_1
    hold_action:
      action: none
    double_tap_action:
      action: none
    use_entity_picture: true
    content_info: name
    icon_color: primary
  - type: conditional
    conditions:
      - condition: state
        entity: group.all_lights
        state: "on"
    chip:
      type: template
      icon: mdi:lightbulb
      icon_color: amber
      content: >-
        {{ expand(states.group.all_lights) | selectattr( 'state', 'eq', 'on') |
        list | count }}
      tap_action:
        action: none
      hold_action:
        action: none
      double_tap_action:
        action: none
  - type: conditional
    conditions:
      - condition: state
        entity: fan.all_fans
        state: "on"
    chip:
      type: template
      tap_action:
        action: none
      hold_action:
        action: none
      double_tap_action:
        action: none
      icon: mdi:fan
      icon_color: blue
      content: >-
        {{ expand(states.fan.all_fans) | selectattr( 'state', 'eq', 'on') | list | count }}
      card_mod:
        style: |
          ha-state-icon {
            {% if is_state(config.entity, 'on') %}
                animation: rotate .5s infinite linear}
                @keyframes rotate {
                    0% {
                        transform: rotate(0deg);
                    }
                    100% {
                        transform: rotate(-359deg);
                    }
                }
           {% endif %}
           }
  - type: conditional
    conditions:
      - condition: state
        entity: group.door_windows_sensors
        state: "on"
    chip:
      type: template
      tap_action:
        action: none
      hold_action:
        action: none
      double_tap_action:
        action: none
      icon: mdi:door-sliding-open
      icon_color: red
      content: >-
        {{ expand(states.group.door_windows_sensors) | selectattr( 'state', 'eq', 'on') | list | count }}
  - type: conditional
    conditions:
      - condition: numeric_state
        entity: sensor.batteries_status
        below: 20
    chip:
      type: template
      tap_action:
        action: none
      hold_action:
        action: none
      double_tap_action:
        action: none
      icon: mdi:battery-20
      icon_color: red
      content: >-
        {{ expand(states.sensor.batteries_status) | selectattr( 'state', 'eq', '20.0') | list | count }}

LiQuid_cOOled · April 29, 2024, 10:30pm

This should work for you…

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: person.person_1
    hold_action:
      action: none
    double_tap_action:
      action: none
    use_entity_picture: true
    content_info: name
    icon_color: primary
  - type: conditional
    conditions:
      - condition: state
        entity: group.all_lights
        state: 'on'
    chip:
      type: template
      icon: mdi:lightbulb
      icon_color: amber
      content: >-
        {{ expand(states.group.all_lights) | selectattr( 'state', 'eq', 'on') |
        list | count }}
      tap_action:
        action: none
      hold_action:
        action: none
      double_tap_action:
        action: none
  - type: conditional
    conditions:
      - condition: state
        entity: fan.all_fans
        state: 'on'
    chip:
      type: template
      tap_action:
        action: none
      hold_action:
        action: none
      double_tap_action:
        action: none
      icon: mdi:fan
      icon_color: blue
      content: >-
        {{ expand(states.fan.all_fans) | selectattr( 'state', 'eq', 'on') | list
        | count }}
  - type: conditional
    conditions:
      - condition: state
        entity: group.door_windows_sensors
        state: 'on'
    chip:
      type: template
      tap_action:
        action: none
      hold_action:
        action: none
      double_tap_action:
        action: none
      icon: mdi:door-sliding-open
      icon_color: red
      content: >-
        {{ expand(states.group.door_windows_sensors) | selectattr( 'state',
        'eq', 'on') | list | count }}
  - type: conditional
    conditions:
      - condition: numeric_state
        entity: sensor.batteries_status
        below: 20
    chip:
      type: template
      tap_action:
        action: none
      hold_action:
        action: none
      double_tap_action:
        action: none
      icon: mdi:battery-20
      icon_color: red
      content: >-
        {{ expand(states.sensor.batteries_status) | selectattr( 'state', 'eq',
        '20.0') | list | count }}
card_mod:
  style:
    mushroom-conditional-chip:nth-child(3):
      mushroom-template-chip$: |
       ha-state-icon {
         {% if is_state('fan.all_fans', 'on') %}
          animation: rotate .5s infinite linear; }
         @keyframes rotate {
          0% {  transform: rotate(0deg); }
          100% {transform: rotate(-359deg); }
                }
          {% endif %}
           }

chrome-capture-2024-4-29

dimitri.landerloos · April 29, 2024, 10:37pm

it is in the guide:

Mushroom Cards Card Mod Styling/Config Guide

Animate the Icon.

Untitled video - Made with Clipchamp (9)

If you are using an animation you need to put your keyframes outside of the ha-state-icon, like the below.
The weather chip icon cannot be modified as it is not a normal HA icon.
Note that when you have a conditional chip (like the first chip in this config is) with another chip inside of it you need to go 1 layer deeper.

card_mod:
  style:
    mushroom-conditional-chip:nth-child(1):
      mushroom-template-chip$: |
        ha-state-icon {
          animation: wobbling 0.7s linear infinite alternate;
        }
        @keyframes wobbling {
          0% {transform: rotate(-80deg);}
          100% {transform: rotate(40deg);}
        }
    mushroom-entity-chip:nth-child(2)$: |
      ha-state-icon {
        animation: wobbling 0.7s linear infinite alternate;
      }
      @keyframes wobbling {
        0% {transform: rotate(-80deg);}
        100% {transform: rotate(40deg);}
      }
    mushroom-action-chip:nth-child(3)$: |
      ha-state-icon {
        animation: wobbling 0.7s linear infinite alternate;
      }
      @keyframes wobbling {
        0% {transform: rotate(-80deg);}
        100% {transform: rotate(40deg);}
      }
    mushroom-light-chip:nth-child(4)$: |
      ha-state-icon {
        animation: wobbling 0.7s linear infinite alternate;
      }
      @keyframes wobbling {
        0% {transform: rotate(-80deg);}
        100% {transform: rotate(40deg);}
      }
    mushroom-weather-chip:nth-child(5)$: |
      ha-state-icon {
        # Cant be changed as it is not a normal HA icon.
      }
    mushroom-template-chip:nth-child(6)$: |
      ha-state-icon {
        animation: wobbling 0.7s linear infinite alternate;
      }
      @keyframes wobbling {
        0% {transform: rotate(-80deg);}
        100% {transform: rotate(40deg);}
      }
    mushroom-alarm-control-panel-chip:nth-child(7)$: |
      ha-state-icon {
        animation: wobbling 0.7s linear infinite alternate;
      }
      @keyframes wobbling {
        0% {transform: rotate(-80deg);}
        100% {transform: rotate(40deg);}
      }
    mushroom-back-chip:nth-child(8)$: |
      ha-state-icon {
        animation: wobbling 0.7s linear infinite alternate;
      }
      @keyframes wobbling {
        0% {transform: rotate(-80deg);}
        100% {transform: rotate(40deg);}
      }
    mushroom-menu-chip:nth-child(9)$: |
      ha-state-icon {
        animation: wobbling 0.7s linear infinite alternate;
      }
      @keyframes wobbling {
        0% {transform: rotate(-80deg);}
        100% {transform: rotate(40deg);}
      }

joq3 · April 30, 2024, 11:34am

I tried making a template for the action confirmation, but that does not seem to work on the mushroom-template-card.
Is there any way around this, or any other good way to have a nice looking confirmation for opening the garage door for example?

bild

    tap_action:
      action: call-service
      service: script.gardiner_oppna_stang
      confirmation:
        text: 'Vill du {{''öppna'' if is_state(entity, ''closed'') else ''stänga''}} gardinerna?'

Here’s the complete code:

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    layout: vertical
    icon_color: light-blue
    tap_action:
      action: call-service
      service: script.gardiner_oppna_stang
      confirmation:
        text: 'Vill du {{''öppna'' if is_state(entity, ''closed'') else ''stänga''}} gardinerna?'
    hold_action:
      action: none
    double_tap_action:
      action: none
    icon: 'mdi:roller-shade{{''-closed'' if is_state(entity, ''closed'')}} '
    entity: cover.gardiner
    card_mod:
      style: |
        ha-card { 
        background: var(—card-background-color); 
        width: 70px; 
        border-radius: 40px; 
        margin-left: auto; 
        margin-right: auto; 
        margin-bottom: 2px;
        border-width: 2px;
        {% if states('cover.gardiner') == 'open' %}
          border-color: none;
        {% else %}
          border-color: rgba(62, 160, 255, 0.5);
        {% endif %}
  - type: custom:mushroom-template-card
    layout: vertical
    icon_color: red
    tap_action:
      action: call-service
      service: script.garageport_oppna_stang
      confirmation:
        text: Vill du öppna/stänga garageport?
    hold_action:
      action: none
    double_tap_action:
      action: none
    icon: 'mdi:garage{{''-open'' if is_state(entity, ''open'')}} '
    entity: cover.garageport
    card_mod:
      style: |
        ha-card { 
        background: var(—card-background-color); 
        width: 70px; 
        border-radius: 40px; 
        margin-left: auto; 
        margin-right: auto; 
        margin-bottom: 2px;
        border-width: 2px;
        {% if states('cover.garageport') == 'closed' %}
          border-color: none;
        {% else %}
          border-color: rgba(255, 62, 62, 0.5);
        {% endif %}
        }
  - type: custom:mushroom-template-card
    entity: lawn_mower.robotgrasklippare
    layout: vertical
    icon_color: orange
    tap_action:
      action: call-service
      service: script.robotgrasklippare_starta_pausa
      confirmation:
        text: Vill du starta/pausa robotgräsklippare?
    hold_action:
      action: call-service
      service: script.robotgrasklippare_docka
      confirmation:
        text: Vill du docka robotgräsklippare?
    double_tap_action:
      action: none
    icon: 'mdi:mower{{''-on'' if is_state(entity, ''error'' )}} '
    card_mod:
      style: |
        ha-card { 
          background: var(—card-background-color); 
          width: 70px; 
          border-radius: 40px; 
          margin-left: auto; 
          margin-right: auto; 
          margin-bottom: 2px;
          border-width: 2px;
          {% if states('lawn_mower.robotgrasklippare') == 'docked' %}
            border-color: none;
          {% else %}
            border-color: rgba(255, 160, 62, 0.5);
          {% endif %}
        }
  - type: custom:mushroom-template-card
    entity: vacuum.robotdammsugare
    layout: vertical
    icon_color: green
    tap_action:
      action: call-service
      service: script.robotdammsugare_starta_pausa
      confirmation:
        text: Vill du starta/pausa robotdammsugare?
    hold_action:
      action: call-service
      service: script.robotdammsugare_docka
      confirmation:
        text: Vill du docka robotdammsugare?
    double_tap_action:
      action: none
    icon: 'mdi:robot-vacuum-variant{{''-alert'' if is_state(entity, ''error'')}} '
    badge_color: ''
    card_mod:
      mushroom-state-info$: |
        .container {
         --card-secondary-font-size: 5px!important;
        }
      style: |
        ha-card { 
         background: var(—card-background-color); 
         width: 70px; 
         border-radius: 40px; 
         margin-left: auto; 
         margin-right: auto; 
         margin-bottom: 2px;
         border-width: 2px;
         {% if states('vacuum.robotdammsugare') == 'docked' %}
           border-color: none;
         {% else %}
           border-color: rgba(202, 246, 180, 0.5);
         {% endif %}
        }

SteffenDE · April 30, 2024, 12:58pm

As I know, confirmation text could not be a template, text only.

I would also like template support.