Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

Iā€™m making good progress with my dashboard using the mushroom-template-card:

Iā€™d appreciate help in how to adjust the card height

cards:
  - type: custom:mushroom-template-card
    primary: Zone 1
    secondary: '{{ relative_time(states.switch.sonoff_irrigation21.last_changed) }} ago'
    icon: mdi:sprinkler
    entity: switch.sonoff_irrigation21
    icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''disabled'' }}'
    multiline_secondary: false
    fill_container: false
    badge_icon: none
    badge_color: |-
      {% set state = states('sensor.irrigation21_on_today_min') %} 
      {% if state | is_number and state | float > 1 %} 
        green
      {% elif state | is_number and state | float > 15 %} 
        yellow
      {% elif state | is_number and state | float > 25 %} 
        red
      {% endif %}
    picture: ''
    layout: vertical
    card_mod:
      style: |
        ha-card {
          --card-primary-font-size: 10px;
          --card-secondary-font-size: 8px;
          #background: transparent;
          --icon-size: 30px;
          #width: 66px;
          #margin-left: auto;
          #margin-right: auto;
          #margin-bottom: 2px;
        }
        mushroom-badge-icon:after {
          content: "{{states("sensor.irrigation21_on_today_min")}}";
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          #background: rgb(var(--rgb-green));
          color: var(--card-background-color);
          font-weight: bolder;
          #border-radius: 50%;
          top: 0;
          width: 100%;
          height: 100%;
          font-size: 0.8em; 
        }
  - type: custom:mushroom-template-card
    primary: Zone 2
    secondary: '{{ relative_time(states.switch.sonoff_irrigation22.last_changed) }} ago'
    icon: mdi:sprinkler
    entity: switch.sonoff_irrigation22
    icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''disabled'' }}'
    multiline_secondary: false
    fill_container: false
    badge_icon: none
    badge_color: |-
      {% set state = states('sensor.irrigation22_on_today_min') %} 
      {% if state | is_number and state | float > 1 %} 
        green
      {% elif state | is_number and state | float > 15 %} 
        yellow
      {% elif state | is_number and state | float > 25 %} 
        red
      {% endif %}
    picture: ''
    layout: vertical
    card_mod:
      style: |
        ha-card {
          --card-primary-font-size: 10px;
          --card-secondary-font-size: 8px;
          #background: transparent;
          --icon-size: 30px;
          #width: 66px;
          #margin-left: auto;
          #margin-right: auto;
          #margin-bottom: 2px;
        }
        mushroom-badge-icon:after {
          content: "{{states("sensor.irrigation22_on_today_min")}}";
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          #background: rgb(var(--rgb-green));
          color: var(--card-background-color);
          font-weight: bolder;
          #border-radius: 50%;
          top: 0;
          width: 100%;
          height: 100%;
          font-size: 0.8em; 
        }
  - type: custom:mushroom-template-card
    primary: Zone 3
    secondary: '{{ relative_time(states.switch.sonoff_irrigation24.last_changed) }} ago'
    icon: mdi:sprinkler
    entity: switch.sonoff_irrigation24
    icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''disabled'' }}'
    picture: ''
    multiline_secondary: false
    fill_container: false
    badge_icon: none
    layout: vertical
    badge_color: |-
      {% set state = states('sensor.irrigation24_on_today_min') %} 
        {% if state | is_number and state | float > 1 %} 
          green
        {% elif state | is_number and state | float > 31 %} 
          yellow
        {% elif state | is_number and state | float > 40 %} 
          red
        {% endif %}
    card_mod:
      style: |
        ha-card {
          --card-primary-font-size: 10px;
          --card-secondary-font-size: 8px;
          #background: transparent;
          --icon-size: 30px;
          #width: 66px;
          #margin-left: auto;
          #margin-right: auto;
          #margin-bottom: 2px;
        }
        mushroom-badge-icon:after {
          content: "{{states("sensor.irrigation24_on_today_min")}}";
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          #background: rgb(var(--rgb-green));
          color: var(--card-background-color);
          font-weight: bolder;
          #border-radius: 50%;
          top: 0;
          width: 100%;
          height: 100%;
          font-size: 0.8em; 
        }
  - entity: sensor.fertilizer_level
    scale: 27px
    severity:
      amber: 15
      green: 40
      red: 0
    title: Fertilizer tank
    type: custom:gauge-card
type: horizontal-stack

1 Like

Thanks I got it sorted in the end :slight_smile:

Dan,

That got it! Thank you!!!

Hi team,

How can I remove the border on this?

This has just been an issue on the latest versions and I canā€™t figure it out:

type: custom:mod-card
card:
  type: custom:mushroom-title-card
  title: '{{ now().strftime(''%I'') }}:{{ now().strftime(''%M %p'') | lower }}'
  subtitle: >-
    {{ now().strftime('%A') }}, {{ now().strftime('%B') }} {{
    now().strftime('%d') }}
card_mod:
  style:
    mushroom-title-card$: |
      .header {
        --title-padding: 12px 12px 3px;
      }
      .title {
        font-size: 34px!important;
        spacing: 100px;
      }
      .subtitle {
        font-size: 25px!important;
      }
      ha-card {
        height: 98px !important;
      }
      ha-card-border: 0px
      }
      ha-card-box-shadow: none;
      }
      ha-card-box-shadow: 0px
      }

Thanks in advance :slight_smile:

Dude, could you share the code?
Need to create some extra sensors?
Could you explain?

hi, did you finally get that bar to work? I really like the design of it but I canā€™t get it to work completely. thanks :))

Hi, I read last year that more-info does not work with chips. Is that still the case? I got some sensors i want to see some history of thats in a chip card.

Dude I am not using them anymore.

Google it. Search for home assistant history stats and history stats conversions.

Sorry I couldnā€™t help

afbeelding

title: "verlichting"
  path: "verlichting"
  cards:
    - type: 'custom:button-card'
      template: card_title
      name: ""
    - type: custom:swipe-card
      cards:
        - square: false
          columns: 1
          type: grid
          cards:  
#### Boven                  
            - type: custom:mod-card
              style:
                hui-horizontal-stack-card$: |
                  #root {
                    justify-content: center;
                  }
              card:
                type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    template: card_title
                    name: Boven
            - type: "custom:stack-in-card"
              cards:
                - type: horizontal-stack
                  cards:      
                    - type: custom:mushroom-template-card
                      primary: Slaapkamers
                      fill_container: true
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      layout: horizontal
                      multiline_secondary: false
                      card_mod:
                        style: |
                          :host([dark-mode]) {
                            background: rgba(var(--rgb-primary-background-color), 0.2);
                            height: 49px;
                          }
                          :host {
                            background: rgba(var(--rgb-primary-text-color), 0.025);
                            height: 49px;
                          }

is it possible to have a button on the very right of ā€œslaapkamersā€ ? And on the very right of ā€œBovenā€

i want there 2 buttons to kill all the lights ā€œupstairsā€ or in the submenuā€™sā€¦

Nope, more-info works fine with chips. I think it always has (at least Iā€™ve had it working for a while).

Can height be modulated on custom:mushroom-template-card?
help appreciated

really? nothing happens for me. Can you tell what Iā€™m missing here?

>  - type: custom:mushroom-chips-card
        fill_container: true
        chips:
          - type: template
            content: '{{ states(''sensor.inomhustemp'') }} ĀŗC'
            icon: mdi:thermometer
            tap_action:
              action: more-info
            entity: sensor.inomhustemp
            icon_color: >-
              {% set state=states('sensor.inomhustemp')|float(0) %} {% if
              state<19 %} blue {% elif state<22 %} green {% elif state<26 %}
              amber {% else %} red {% endif %}
          - type: template
            content: '{{ states(''sensor.luftfuktighet'') }} %'
            icon: mdi:thermometer
            icon_color: >-
              {% set state=states('sensor.luftfuktighet')|float(0) %} {% if
              state<38 %} blue {% elif state<68 %} green {% elif state<60 %}
              amber {% else %} red {% endif %}

Sorry, no idea ā€¦ I just tested with a simple template and it works fine for me:

type: custom:mushroom-chips-card
chips:
  - type: template
    tap_action:
      action: more-info
    entity: sensor.sun_next_dusk
    icon: mdi:sun-angle
    icon_color: blue

Could you please copy the exact code and use the proper formatting for it? The indentation in YAML is very important, and we canā€™t see if the error lies in the indentation or if itā€™s something else.

In the code you posted, the indentation of ā€œchips:ā€ is wrong, but that can be just the formatting as I said.

        card_mod:
          style: |
            ha-card {
              height: 162px;
            }

Iā€™ve tried it however it does not change the card height. Is something else overriding it?

Screenshot 2023-06-28 071818

cards:
  - type: custom:mushroom-template-card
    primary: Zone 1
    secondary: '{{ relative_time(states.switch.sonoff_irrigation21.last_changed) }} ago'
    icon: mdi:sprinkler
    entity: switch.sonoff_irrigation21
    icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''disabled'' }}'
    multiline_secondary: false
    fill_container: false
    badge_icon: none
    badge_color: |-
      {% set state = states('sensor.irrigation21_on_today_min') %} 
      {% if state | is_number and state | float > 1 %} 
        green
      {% elif state | is_number and state | float > 15 %} 
        yellow
      {% elif state | is_number and state | float > 25 %} 
        red
      {% endif %}
    picture: ''
    layout: vertical
    card_mod:
      style: |
        ha-card {
          --card-primary-font-size: 10px;
          --card-secondary-font-size: 8px;
          #background: transparent;
          #--icon-size: 30px;
          #width: 66px;
          height: 100px;
          #margin-left: auto;
          #margin-right: auto;
          #margin-bottom: 2px;
        }
        mushroom-badge-icon:after {
          content: "{{states("sensor.irrigation21_on_today_min")}}";
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          #background: rgb(var(--rgb-green));
          color: var(--card-background-color);
          font-weight: bolder;
          #border-radius: 50%;
          top: 0;
          width: 100%;
          height: 100%;
          font-size: 0.8em; 
        }
  - type: custom:mushroom-template-card
    primary: Zone 2
    secondary: '{{ relative_time(states.switch.sonoff_irrigation22.last_changed) }} ago'
    icon: mdi:sprinkler
    entity: switch.sonoff_irrigation22
    icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''disabled'' }}'
    multiline_secondary: false
    fill_container: false
    badge_icon: none
    badge_color: |-
      {% set state = states('sensor.irrigation22_on_today_min') %} 
      {% if state | is_number and state | float > 1 %} 
        green
      {% elif state | is_number and state | float > 15 %} 
        yellow
      {% elif state | is_number and state | float > 25 %} 
        red
      {% endif %}
    picture: ''
    layout: vertical
    card_mod:
      style: |
        ha-card {
          --card-primary-font-size: 10px;
          --card-secondary-font-size: 8px;
          #background: transparent;
          #--icon-size: 30px;
          #width: 66px;
          height: 50px;
          #margin-left: auto;
          #margin-right: auto;
          #margin-bottom: 2px;
        }
        mushroom-badge-icon:after {
          content: "{{states("sensor.irrigation22_on_today_min")}}";
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          #background: rgb(var(--rgb-green));
          color: var(--card-background-color);
          font-weight: bolder;
          #border-radius: 50%;
          top: 0;
          width: 100%;
          height: 100%;
          font-size: 0.8em; 
        }
  - type: custom:mushroom-template-card
    primary: Zone 3
    secondary: '{{ relative_time(states.switch.sonoff_irrigation24.last_changed) }} ago'
    icon: mdi:sprinkler
    entity: switch.sonoff_irrigation24
    icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''disabled'' }}'
    picture: ''
    multiline_secondary: false
    fill_container: false
    badge_icon: none
    layout: vertical
    badge_color: |-
      {% set state = states('sensor.irrigation24_on_today_min') %} 
        {% if state | is_number and state | float > 1 %} 
          green
        {% elif state | is_number and state | float > 31 %} 
          yellow
        {% elif state | is_number and state | float > 40 %} 
          red
        {% endif %}
    card_mod:
      style: |
        ha-card {
          --card-primary-font-size: 10px;
          --card-secondary-font-size: 8px;
          #background: transparent;
          #--icon-size: 30px;
          #width: 66px;
          height: 200px;
          #margin-left: auto;
          #margin-right: auto;
          #margin-bottom: 2px;
        }
        mushroom-badge-icon:after {
          content: "{{states("sensor.irrigation24_on_today_min")}}";
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          #background: rgb(var(--rgb-green));
          color: var(--card-background-color);
          font-weight: bolder;
          #border-radius: 50%;
          top: 0;
          width: 100%;
          height: 100%;
          font-size: 0.8em; 
        }
  - entity: sensor.fertilizer_level
    scale: 27px
    severity:
      amber: 15
      green: 40
      red: 0
    title: Fertilizer tank
    type: custom:gauge-card
type: horizontal-stack

1 Like

best i can see is itā€™s something in that gauge card not playing fair ?
works with a standard card
test

@friendodevil try adding !important ie

    card_mod:
      style: |
        ha-card {
          --card-primary-font-size: 10px;
          --card-secondary-font-size: 8px;
          #background: transparent;
          #--icon-size: 30px;
          #width: 66px;
          height: 200px !important;
          #margin-left: auto;
          #margin-right: auto;
          #margin-bottom: 2px;
        }
1 Like

Yeah sure, this is just some code i copied from someone else, it displays right so I think the format is correct, but not 100% sure

layout_type: custom:grid-layout
layout:
 grid-template-columns: auto
 grid-template-rows: auto
 column-gap: 0px
 row-gap: 0px
 grid-template-areas: |
   "1"
   "2"
   "3"
   "4"
   "5"
   "6"
   "7"
   "8"
   "9"
   "10"
   "11"
   "12"
cards:
 - type: custom:mushroom-light-card
   entity: light.kok
   fill_container: true
   show_brightness_control: true
   use_light_color: true
   icon: mdi:fridge
   name: Kƶk
   secondary_info: none
   layout: horizontal
   view_layout:
     grid_areas: 1
   card_mod:
     style: |
       :host([dark-mode]) {
         --ha-card-background: #2D3033;
         --mush-icon-size: 24px;
       }
       ha-card {
         border-radius: 10px 10px 0px 0px;
         --icon-size: 24px;
         --control-height: 20px;
         --control-top: 16px;
         --control-border-radius: 5px;
         --control-border-spacing: 2px;
         --card-primary-font-size: 14px;
       }
 - type: custom:stack-in-card
   cards:
     - type: custom:mushroom-chips-card
       fill_container: true
       chips:
         - type: template
           content: '{{ states(''sensor.inomhustemp'') }} ĀŗC'
           icon: mdi:thermometer
           tap_action:
             action: more-info
           entity: sensor.inomhustemp
           icon_color: >-
             {% set state=states('sensor.inomhustemp')|float(0) %} {% if
             state<19 %} blue {% elif state<22 %} green {% elif state<26 %}
             amber {% else %} red {% endif %}
         - type: template
           content: '{{ states(''sensor.luftfuktighet'') }} %'
           icon: mdi:thermometer
           icon_color: >-
             {% set state=states('sensor.luftfuktighet')|float(0) %} {% if
             state<38 %} blue {% elif state<68 %} green {% elif state<60 %}
             amber {% else %} red {% endif %}
       alignment: start
       card_mod:
         style: |
           ha-card {
             --chip-box-shadow: none;
             --chip-background: none;
             --chip-spacing: 0;  
           }
   view_layout:
     grid-column: 1
     grid-row: 2
   card_mod:
     style: |
       ha-card {
         border-radius: 0px 0px 10px 10px;
         height: 35px;
         margin-top: -14px;
         outline-color: red;
         --chip-spacing: 0px;
         --ha-card-background: #352E1F;

       }

is this better?

Hmmmā€¦ Thatā€™s not what I was hoping forā€¦ :frowning:

I honestly have no idea, why itā€™s not working for you. I tried numerous attempts, including putting this code into my dashboard, and it works as it shouldā€¦ Happens not very often, but I really have no idea how to further approach this, as I canā€™t see any errors or faults.

My only way would be, to start step by step, beginning with an empty view and adding the chips card to see how that goes. And if it works, adding back one by one.

Sorry, couldnā€™t be of more help here. :frowning: If you have other ideas, let me know, Iā€™m willing to test and examine further, Iā€™m just out of good ideasā€¦ :slight_smile: