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

[dimitri.landerloos]

Sure!

This section searches for entity IDs that have the words battery and the name of the room in it. as this is how i have my entity ids set up.

{%- for state in states.sensor |
selectattr('entity_id','search','battery') |
selectattr('entity_id','search','spare_bedroom') -%}

this section needs to match that to remove part of the name when it is actually added to the bar.

'name': state.attributes.friendly_name.split(' Battery')[0].split(' battery')[0].split('Spare Bedroom')[1],

you do need to ensure that you update this in the 2 places that it is in the card as it is actually running this check twice, but in the first instance only showing you the lowest battery result, and in the second showing you all but the lowest result.

[burg93 (Adam)]

Does anyone have a good input datetime UI selector? I’ve seen a few for time only but I’d like a nice visual way of selecting a date and time using a helper that’s not the rubbish entity version.

[Puck301 (Keir)]

hi @PskNorz @dimitri.landerloos

Brilliant card! I just tried your code and a few other peoples and no matter what I do the card does not seem to over on top of each other properly. For example I can see your values are overlaid nicely onto the graph yet no matter what I do my values always sit above so the car ends up much larger then most examples…

None of them overlay ont op of each other?

I feel like there is some other HACs pFront End plugin for some custom CSS or something I am missing?

PS. I am brand new to HA and am just trying to read through this thread (Wow I have never seen a thread so large) to figure out things as I go…

[dimitri.landerloos]

First things first you will need card mod from HACS.

you will also need stack in card from HACS.

from looking at it, that looks like its about it

[Puck301 (Keir)]

OK I just found it literally after writing the post… I was missing the “Card Mod” plugin!

Sorry guys

[Puck301 (Keir)]

Thanks so much for replying… I think this thread is brilliant to learn and get ideas. There are so many people on here that know their stuff.

I am finding it quite an uphill battle trying to learn the syntax for YAML and what I can and can’t do with it all but the imagination of people on here and what they have done is crazy!

[dimitri.landerloos]

You can do some really cool stuff with Card Mod so enjoy that journey as it allows you to modify all cards with CSS styling

to help with that for mushroom cards specifically i made this thread here:

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.2.2 and Card Mod Version 3.4.1 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.7). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …

but this is not meant to help with the yaml part, just the CSS part

[Puck301 (Keir)]

that is brilliant… I am getting lost trying to find what guides/documenation to read…

Re: YAML, understood! I have JS coding experience and thought I would be able to use that but YAML seems a bit different…

PS you nailed it with the card mod…

Hoping this means I can try and get my person cards laid out properly taking up much less space now

thanks again!!!

[dimitri.landerloos]

Happy to help! you might like the button card by @RomRider then. you can use JS templates in some parts of that card:

GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant

[Puck301 (Keir)]

@dimitri.landerloos

stack in card

OK this looks brilliant! Thank you again!

[denozord]

Hello! How can I make the gear button be to the right of the mushroom-template-card? Like on the screen below?

Thanks
Current card code:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Увлажнитель
    secondary: >-
      {% if states(entity) == 'off' %} 

      Выключено | Целевая влажность {{ state_attr(entity,
      'humidifier.target_humidity')  }} %

      {% else %}

      Включено | Целевая влажность {{ state_attr(entity,
      'humidifier.target_humidity')  }} %

      {% endif %} 
    icon: mdi:air-humidifier
    icon_color: |-
      {% if states(entity) == 'off' %} 
        
      {% else %}
        green
      {% endif %} 
    entity: humidifier.deerma_jsq2w_c041_humidifier
    tap_action:
      action: toggle
    multiline_secondary: true
    layout: horizontal
    fill_container: true
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:cog
    tap_action:
      action: call-service
      service: browser_mod.popup
      target: {}
      data:
        dismissable: true
        autoclose: false
        title: Настройка увлажнителя
        content:
          type: custom:stack-in-card
          cards:
            - type: grid
              square: false
              columns: 2
              cards:
                - type: custom:mushroom-entity-card
                  entity: light.deerma_jsq2w_c041_indicator_light
                  name: Световой индикатор
                  tap_action:
                    action: toggle
                  double_tap_action:
                    action: none
                  layout: vertical
                - type: custom:mushroom-entity-card
                  entity: switch.deerma_jsq2w_c041_alarm
                  icon: mdi:alarm-light
                  tap_action:
                    action: toggle
                  double_tap_action:
                    action: none
                  layout: vertical
    fill_container: true
    layout: horizontal

[dimitri.landerloos]

Add mode: horizontal to your stack in card.

You may want to add the card mod that i added to each card too, to make the layout look a bit nicer, but up to you

Code

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: Увлажнитель
    secondary: >-
      {% if states(entity) == 'off' %} 
      Выключено | Целевая влажность {{ state_attr(entity,
      'humidifier.target_humidity')  }} %
      {% else %}
      Включено | Целевая влажность {{ state_attr(entity,
      'humidifier.target_humidity')  }} %
      {% endif %} 
    icon: mdi:air-humidifier
    icon_color: |-
      {% if states(entity) == 'off' %} 
      {% else %}
        green
      {% endif %} 
    entity: humidifier.deerma_jsq2w_c041_humidifier
    tap_action:
      action: toggle
    multiline_secondary: true
    layout: horizontal
    fill_container: true
    card_mod:
      style: |
        ha-card {
          width: max-content;
        }
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:cog
    tap_action:
      action: call-service
      service: browser_mod.popup
      target: {}
      data:
        dismissable: true
        autoclose: false
        title: Настройка увлажнителя
        content:
          type: custom:stack-in-card
          cards:
            - type: grid
              square: false
              columns: 2
              cards:
                - type: custom:mushroom-entity-card
                  entity: light.deerma_jsq2w_c041_indicator_light
                  name: Световой индикатор
                  tap_action:
                    action: toggle
                  double_tap_action:
                    action: none
                  layout: vertical
                - type: custom:mushroom-entity-card
                  entity: switch.deerma_jsq2w_c041_alarm
                  icon: mdi:alarm-light
                  tap_action:
                    action: toggle
                  double_tap_action:
                    action: none
                  layout: vertical
    fill_container: true
    layout: horizontal
    card_mod:
      style: |
        ha-card {
          width: fit-content;
          right: -90px;
        }

[avigrinberg]

Hi,

I’m trying to use mushroom card with card_mod and few things not working. what I’m doing wrong here why only few things works and few not works.
font size not working
font color not working
icon change not working

THX

type: custom:mushroom-entity-card
entity: switch.garden_lights_l1
name: only_mushroom-entity-card
layout: vertical
fill_container: false
tap_action:
  action: toggle
hold_action:
  action: none
double_tap_action:
  action: none
icon: mdi:lamp
card_mod:
  style: |
    :host {
    color: white;
    text-align: left;
    font-size: 20px;
      --card-mod-icon-color:
      {% if states(config.entity)=='on' %}
         yellow;
         color: red;
      --card-mod-icon: mdi:car;
      {% else %}
        green;
      --card-mod-icon: mdi:lamp;
      {% endif %}
    }

[dimitri.landerloos]

Hi, check out my guide below to find out how to style each element of the mushroom cards with card mod.

Its important with css that you are specific about which element you want to change. Changing things globally with :host will not always work or will sometimes have unintended behaviour.

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.2.2 and Card Mod Version 3.4.1 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.7). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …

[denozord]

Thanks a lot

[avigrinberg]

I’ve looked at the topic but couldn’t fix my issue.
simple grid with mushroom entity card not working on testing change icon.
why? what i’m doing wrong here?

square: false
type: grid
cards:
  - type: custom:mushroom-entity-card
    entity: switch.guest_bathroom_lights_l1
    layout: vertical
    tap_action:
      action: toggle
    hold_action:
      action: none
    double_tap_action:
      action: none
    icon: mdi:mushroom-off
card_mod:
  style: |
    ha-state-icon {
      --card-mod-icon: mdi:car;
    }
columns: 3

[dimitri.landerloos]

Move the card mod over to the card you are actually styling. Like this:

square: false
type: grid
cards:
  - type: custom:mushroom-entity-card
    entity: switch.guest_bathroom_lights_l1
    layout: vertical
    tap_action:
      action: toggle
    hold_action:
      action: none
    double_tap_action:
      action: none
    icon: mdi:mushroom-off
    card_mod:
      style: |
        ha-state-icon {
          --card-mod-icon: mdi:car;
        }
columns: 3

[avigrinberg]

thanks it’s working.
i can’t believe that i failed because of the tabs and spaces.
is there any good website for learning how to code yaml for beginners?

[dimitri.landerloos]

Well what you are doing with card mod is actually CSS.

The way that i have learned tends to be reading the documentation of the cards i install thoroughly. All of the options tend to be clearly explained

[weado]

Hello,
I’m sorry, but I can’t understand why my cookie, with your example doesn’t rotate when I use it on my HA ?
(I try to animate my chip icon)