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

Thanks a lot @kbrown01 , looking forward for your code !

How can i edit a card, who shows only the “eco-temp” in this card size.

image

Show the code you currently have. and please describe what it is that you want to change.

Hi thanks for your’e very fast reply. Wow
I have as part of my heating control these cards, for setting my
target temperatures.
I would like to have in the same look a card where I can show only the icon and just the value
of the entity.
Here in this case, the user should not be allowed to change the Eco and Night temperature (they can
(see already), but only the comfort temperature.

image

This is the easy code

square: false
type: grid
cards:
  - type: custom:mushroom-number-card
    entity: input_number.heizung_anne_nacht
    display_mode: buttons
    secondary_info: none
    icon_color: amber
    name: night
  - type: custom:mushroom-number-card
    entity: input_number.heizung_anne_eco
    display_mode: buttons
    fill_container: false
    secondary_info: none
    icon_color: amber
    name: eco
  - type: custom:mushroom-number-card
    entity: input_number.heizung_anne_comfort
    display_mode: buttons
    secondary_info: none
    icon_color: amber
    name: com
columns: 3

i am honestly not entirely sure i follow what it is that you want.

if you just want to get rid of the text then just put this:

  - type: custom:mushroom-number-card
    entity: input_number.heizung_anne_nacht
    display_mode: buttons
    secondary_info: none
    icon_color: amber
    name: ' '

if this is not what you want, can you try and explain a bit more simply (perhaps with some edited screenshots) exactly what you are lookin for?

Thanks @dimitri.landerloos I tried copying your code but this did not work.

I get this error:
Custom element doesn’t exist: stack-in-card.

I duplicated the woonkamer one and replaced the entire code for yours.

Yes you will need stack in card and card mod from hacs

Awesome that was easy! Thank you! Now need to figure out how I create a script with the right commands to set the hvac temp

Hi @dimitri.landerloos and @FedeL16 - using the idea Dimitri has helped me with, create an icon on top of the room card - I just saw your design here. How did you create the horizontal section of the room card with the buttons? I like the design/layout of the room card this way.

See thread here https://community.home-assistant.io/t/integration-of-roborock-s7/628944

Looks similar to my room card too.

It will be a stack in card with template card and a chip card underneath and a little card mod formatting.

Cant post all of my code as its far over the character limit though.

but essentially just this:

type: horizontal-stack
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Woonkamer
        secondary: '{{ state_attr(''climate.woonkamer'', ''current_temperature'') }}°C'
        icon: mdi:sofa-outline
        entity: light.woonkamerlampen
        badge_color: ''
        icon_color: |-
          {% if is_state('light.woonkamerlampen', 'on') %}
            orange
          {% endif %}
        tap_action:
          action: navigate
          navigation_path: /dashboard-mushroom/woonkamer
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon: mdi:thermostat
            icon_color: deep-orange
            tap_action:
              action: call-service
              service: script.yourscriptid
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  background: rgba(var(--rgb-deep-orange), 0.2) !important;
                }
        alignment: end
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Woonkamer
        secondary: '{{ state_attr(''climate.woonkamer'', ''current_temperature'') }}°C'
        icon: mdi:sofa-outline
        entity: light.woonkamerlampen
        badge_color: ''
        icon_color: |-
          {% if is_state('light.woonkamerlampen', 'on') %}
            orange
          {% endif %}
        tap_action:
          action: navigate
          navigation_path: /dashboard-mushroom/woonkamer
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon: mdi:thermostat
            icon_color: deep-orange
            tap_action:
              action: call-service
              service: script.yourscriptid
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  background: rgba(var(--rgb-deep-orange), 0.2) !important;
                }
        alignment: end
5 Likes

It´s very simple to show you.
I just want the value to be able to be displayed but not changed. (see links)
Like a entity_view_card

And today I have another question, because I find more and more like the Mushroom Cards
Is it possible to display this frame in dependence of the presence in “Green” or for absent, then just “Red”?

type: custom:mushroom-person-card
entity: person.tom
primary_info: none
secondary_info: none
icon_type: entity-picture
card_mod:
  style:
    mushroom-shape-avatar$: |
      .picture {
        display: flex;
        border-radius: 50%;
        animation: ping 6s infinite;
      }
      @keyframes ping {
        0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
        100% {box-shadow: 0 0 5px 15px transparent;}
      }
    .: |
      ha-card {
       --icon-size: 72px;
      }

Ah i see. it is pretty easy to make it so the buttons do nothing with card mod like this:

square: false
type: grid
cards:
  - type: custom:mushroom-number-card
    entity: input_number.heizung_anne_nacht
    display_mode: buttons
    secondary_info: none
    icon_color: amber
    name: night
    card_mod:
      style: |
        mushroom-number-value-control {
          pointer-events: none;
        }

and if you want the buttons for modifying gone entirely too, then this will do it:

square: false
type: grid
cards:
  - type: custom:mushroom-number-card
    entity: input_number.heizung_anne_nacht
    display_mode: buttons
    secondary_info: none
    icon_color: amber
    name: night
    card_mod:
      style: 
        mushroom-number-value-control$:
          mushroom-input-number$: |
            .minus {
              display: none !important;
            }
            .plus {
              display: none !important;
            }
        .: |
          mushroom-number-value-control {
            pointer-events: none;
          }
1 Like

Sure!

type: custom:mushroom-person-card
entity: person.tom
primary_info: none
secondary_info: none
icon_type: entity-picture
card_mod:
  style:
    mushroom-shape-avatar$: |
      .picture {
        display: flex;
        border-radius: 50%;
        {% if states(config.entity) == 'home' %}
          animation: pinggreen 6s infinite;
        {% else %}
          animation: pingred 6s infinite;
        {% endif %}
      }
      @keyframes pinggreen {
        0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
        100% {box-shadow: 0 0 5px 15px transparent;}
      }
      @keyframes pingred {
        0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
        100% {box-shadow: 0 0 5px 15px transparent;}
      }
    .: |
      ha-card {
       --icon-size: 72px;
      }
1 Like

Thanks again. I tried copying this but mine looks different ? Is this due to a different theme being active ? Could you copy one example from your code with multiple buttons like you have ? Lights and battery? Or in my case lights and thermostat button?

Edit: see screenshot above. Also with default theme no difference

You are so great … it’s insane what you get out of the great mushroom card.
Because of you, I’m reworking my entire dashboards right now … sometimes I ask myself,
how you can know all this … I would wish that too

image

1 Like

And this one as well… I was so happy about the result… wow
If I still had the name down here now :relaxed:

image

3 Likes

Where i can´t find this nice room-card with temp/hum and button´s

image

And maybe someone can also answer this question for me.
I want to create a kind of popup card as a navigation menu.
It should look like this: I have at the top or wherever
from everywhere most quickly accessible, a button (or similar),
if I press this button, then a popup window opens, where I have
then have my navigation buttons, where I can go to the individual
rooms, views or wherever else, respectively the corresponding dashboard opens.
the corresponding dashboard opens.
How would you implement something like that or what do you have as a better suggestion
for a menu, which is not as boring as my current one.

No problem i have created top stick and the second card at the moment… I have a problem to write the right format for entity person I second card. Anyway I can help you! Let me know