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

[FaBRiK]

@Haningback

icon_color: >-
  {{ 'amber' if expand(area_entities(area_id(entity))) |
  selectattr('domain','eq','light') | selectattr('state','eq','on') | list |
  count > 0 else 'disabled' }}

Perfect solution! Works like a charm. Thanks a lot!

[codedmind]

Can you help me here?
I want use a lot of fold cards and it will be insane create all the boleans to use that system… i have this code that works… only issue… the chevron is ugly and i can’t add the animation you added
This is with your mushroom style and with transition

This is with fold code without boolean and without transition

type: custom:stack-in-card
cards:
  - type: custom:fold-entity-row
    head:
      label: padding
      type: custom:mushroom-entity-card
      entity: sensor.passadeira_power
      name: Passadeira
      primary_info: name
      secondary_info: state
      layout: horizontal
      icon: mdi:dumbbell
      icon_color: light-green
      multiline_secondary: true
      card_mod:
        style: |
          ha-card {
            margin-left: 0px;
            border: none;
            --ha-card-box-shadow: 0px;
          }
    padding: 0
    entities:
      - type: custom:stack-in-card
        cards:
          - type: custom:mini-graph-card
            entities:
              - entity: sensor.passadeira_power
                line_color: deep-orange
            hours_to_show: 24
            points_per_hour: 4
            line_width: 1
            font_size: 50
            animate: true
            show:
              name: false
              icon: false
              state: false
              legend: true
              fill: fade
            card_mod:
              style: |
                ha-card {
                  background: none;
                  --ha-card-box-shadow: 0px;
                  border: none;
                 }
        card_mod:
          style: |
            ha-card {
              background: none;
              --ha-card-box-shadow: 0px;
              border: none;
             }

[Stuartie (Stuart)]

Is there a way to allow the text to fill right across, it should ready “Good Afternoon, Stuart!”

type: custom:stack-in-card
cards:
  - square: false
    columns: 2
    type: grid
    cards:
      - type: custom:mushroom-template-card
        primary: |-
          {% set time = now().hour %}
          {% if (time >= 18) %}
            Good Evening, {{user}}!
          {% elif (time >= 12) %}
            Good Afternoon, {{user}}!
          {% elif (time >= 5) %}
            Good Morning, {{user}}!
          {% else %}
            Hello, {{user}}!
          {% endif %}
        secondary: ''
        fill_container: true
        tap_action:
          action: toggle
        entity: input_boolean.mushroom_menu_down
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon: |-
              {% if is_state("input_boolean.mushroom_menu_down", 'off') %}
                mdi:chevron-down 
              {% elif is_state("input_boolean.mushroom_menu_down", 'on') %}   
                mdi:chevron-up    
              {% endif %}
            tap_action:
              action: toggle
            entity: input_boolean.mushroom_menu_down
        alignment: end
        style: |
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            padding: 10px 10px;
          }

[rak (Ralf Klüber)]

Tried markdown card?

[Macke]

Most likely not the most clean solution. Using margin-top, see below

          - type: custom:mushroom-chips-card
            style: |
              ha-card {
                --chip-box-shadow: none;
                --chip-background: none;
                --chip-height: 50px;   
                --chip-border-width: 0;
                --chip-padding: 4 1.5em;
                margin-top: -65px;
              }
            chips:
              - type: template
                entity: sensor.processor_temperature

[tpbillund]

@Haningback

type: picture
image: local/radio/p1.jpg
hold_action:
  action: none
tap_action:
  action: call-service
  service: input_select.select_option
  service_data:
    option: P1
  target:
    entity_id: input_select.radiokanal

@Haningback
Thx. alot… looks nice and it’s working so the active radio station is in color, so it’s easy to see the channel playing.

[atomicpapa (Glenn Morrison)]

@Macke

            style: |
              ha-card {
                --chip-box-shadow: none;
                --chip-background: none;
                --chip-height: 50px;   
                --chip-border-width: 0;
                --chip-padding: 4 1.5em;
                margin-top: -65px;

So much nicer and makes the card so much slimmer. Thank you!!!

[rhysb (Rhys)]

Use layout-card instead of Grid, like this:

  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 33px
      margin: '-4px -4px -8px -4px;'
    cards:

[StefanHabel]

How can i use the chip card (light group) with browser mod 2 to show the devices that are on? (–> Pop-Up)

[rhysb (Rhys)]

Have a look here:

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

Yes, of course. Here are my Mushroom Popups for lights, windows and external doors. [Mushroom Lights Popup]

Lights On Popup Yaml

type: custom:mushroom-chips-card chips: - type: conditional conditions: - entity: group.all_lights state: 'on' chip: type: template icon: mdi:lightbulb content: >- {{ expand(states.group.all_lights) | selectattr( 'state', 'eq', 'on') | list | count }} entity: group.all_…

[chicknlil25]

Hey @rhysb … you seem to be the resident expert for getting things coded perfectly … could you tell me where I’ve messed this up? I started with someone elses code, and I think the template is set up right but…

      type: custom:mushroom-chips-card
        chips:      
          - type: template
            content: >-
              {{ state_attr('back_basement_2','message')}} in 
              {{ ((state_attr('calendar.back_basement_2', 'end_time') | as_datetime | as_local - now()).total_seconds() / 60) | int }} minutes.
            style: |
              ha-card {
                --ha-card-border-width: 0;
                --chip-background: none;
                --chip-height: 75px;
                --chip-padding:12px;
                --chip-box-shadow:none;
                --chip-border-width:0;
                border-width: 0;
             }

The intent is to display a “chip” card that displays the next event in a calender and how many minutes it is from occuring.

It’ll be the last (far right) element on the bottom line of this display:

Thanks for any thoughts you (or anyone else) might be able to offer!

[rhysb (Rhys)]

You can style the fold-entity-row like this:

type: custom:stack-in-card
cards:
  - type: custom:fold-entity-row
    head:
      type: custom:mushroom-entity-card
      entity: sensor.passadeira_power
      name: Passadeira
      primary_info: name
      secondary_info: state
      layout: horizontal
      icon: mdi:dumbbell
      icon_color: light-green
      multiline_secondary: true
      card_mod:
        style: |
          ha-card {
            --ha-card-border-width: 0;
            --ha-card-box-shadow: 0;
          }
    padding: 0
    entities:
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.passadeira_power
            line_color: deep-orange
        hours_to_show: 24
        points_per_hour: 4
        line_width: 1
        font_size: 50
        animate: true
        show:
          name: false
          icon: false
          state: false
          legend: true
          fill: fade
        card_mod:
          style: |
            ha-card {
              --ha-card-border-width: 0;
              --ha-card-box-shadow: 0;
            }
card_mod:
  style:
    hui-vertical-stack-card$:
      fold-entity-row$: |
        ha-icon {
          background: none !important;
          margin-right: 24px !important;
          --toggle-icon-width: 21px !important;
          color: rgb(var(--rgb-disabled-color));
        }

Just be aware of Thomas’ warning that it is intended to be used with an Entities Card “Any usage outside an entities card is entirely unsupported”.

[rhysb (Rhys)]

You can animate the fan on/off like this.

Mushroom Fan On/Off Animation:

type: custom:mushroom-fan-card
entity: fan.garage_fan
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {{ '--icon-animation: spin 1.5s ease-in, spin 1s linear 1.5s infinite;' if is_state(config.entity, 'on') }}
      }
    .: |
      mushroom-shape-icon {
        display: flex;
        {{ 'animation: spin 1.5s ease-out;' if is_state(config.entity, 'off') }}        
      }

[jono]

Brilliant, thanks a lot!

[rhysb (Rhys)]

Looks like you are missing calendar. in you first state_attr and some bad indentation.

type: custom:mushroom-chips-card
chips:
  - type: template
    content: >-
      {{ state_attr('calendar.back_basement_2','message')}} in  {{
      ((state_attr('calendar.back_basement_2', 'end_time') | as_datetime |
      as_local - now()).total_seconds() / 60) | int }} minutes.
    card_mod:
      style: |
        ha-card {
          --ha-card-border-width: 0;
          --chip-background: none;
          --chip-height: 75px;
          --chip-padding:12px;
          --chip-box-shadow:none;
          --chip-border-width:0;
          border-width: 0;
        }

[weppa]

Thanks @rhysb as always, but won’t this cause the animation to ease-out on page loads?

[rhysb (Rhys)]

Yep, will think about a better solution…

[chicknlil25]

The calendar was a good catch, but it (and the rest of the fixes you mentioned) didn’t seem to solve it.

Here’s an image of it as part of the bigger pile of code:

I think our code is basically identical, unless I’m missing something?

          - type: template
            content: >-
              {{ state_attr('calendar.back_basement_2','message')}} in {{ ((state_attr('calendar.back_basement_2','end_time') | as_datetime | as_local - now()).total_seconds() / 60) | int }} minutes.
            style: |
              ha-card {
                --ha-card-border-width: 0;
                --chip-background: none;
                --chip-height: 75px;
                --chip-padding:12px;
                --chip-box-shadow:none;
                --chip-border-width:0;
                border-width: 0;
             }

Is the format of my template otherwise incorrect? That SHOULD be showing Laundry in 6564 minutes.

Kinda feeling like the village idiot at the moment.

[rhysb (Rhys)]

Works as expected

[chicknlil25]

Okay, so it just doesn’t like me then?

Is the bit after content: correct? the >-?

Otherwise, any other ideas what might be causing this to go into the neverending clock and not let me save it?