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

[dimitri.landerloos]

Not quite sure what you mean sorry? You dont seem to need overflow at all (at least based on the snippet you provided here).

For your question to display the card when the boolean is on just use a conditional card and place your card inside of it.

[FedeL16 (Federico)]

I have modified z-index and now remain on others cards while im scrolling my dashboard… so I solved without Boolean…
Thank you

[NovaG]

Here is another card for those who have blinds

All you have to do is change all references cover.stair_blinds to your entity name

If you want to use my font go into Settings > Dashboards > … > Resources

Add resource:

https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap

type: tile
entity: cover.stair_blinds
show_entity_picture: true
vertical: true
icon: none
name: Blinds
state_content: state
features:
  - type: cover-open-close
card_mod:
  style:
    ha-tile-icon$: |
      .shape {                
        --tile-icon-color: none  !important; 
        color: var(--contrast-100);
        margin-top: 5px;
      }
    ha-tile-info$: |
      .primary {
        font-family: Montserrat;
        --primary-text-color: var(--contrast-8);        
        font-size: 1.2em !important;                                                                          
        font-weight: 600 !important;
        line-height: 2em !important;          
        text-align: start;         
        z-index:1;    
      } 

      .secondary {                
        font-size: 1.1em !important;
        font-family: Montserrat;        
        text-transform: Uppercase;
        color: var(--contrast10) !important;
        text-align: start;   
      }
    .: |
      ha-card {
        --ha-card-border-width: 0;
        background: #050d0f;
        padding-bottom:5px;
        height: 150px;
        width: 150px;
        box-shadow: none;             
      }
      ha-tile-icon {
        --mdc-icon-size: 35px;
      }
      :host {
        --card-mod-icon: {% if is_state('cover.stair_blinds', 'open') %} mdi:blinds-horizontal {% else %} mdi:blinds-horizontal-closed {% endif %} !important;
      }

[berntsson88]

i installd the Mushroom dashboard strategy… and i LOVE IT… best thing that happens sens HA:)

But i wonder, how can i make changes, i got a few things i need to change, and remove.

[MSSH]

Ok so Mushroom cards is amazing!

But I want to do something like this:

{% if ‘{{user}}’ == ‘Piet Hein’ %}
1
{% else %}
2
{% endif %}

I want to be able to check which user is looking at the page so I can change actions for instance on a template card… But I can’t get it too work.

Does anyone have an idea if this is possible?

[dimitri.landerloos]

What do you mean by actions?

when you say for instance on a template card. No, you can ONLY do this on a template card by default with Mushroom (can be done on others with card mod).

If you just mean changing text or color or something then it is very simple like this:

type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
icon_color: |-
  {% if user == 'Dimitri Landerloos' %}
    green
  {% else %}
    red
  {% endif %}

[MSSH]

Damn…

I really wanted something like this:
tap_action:
action: |-
{% if user == ‘Tim C’ %}
toggle
{% else %}
none
{% endif %}

[dimitri.landerloos]

You cant do it that way. but you could just use a conditional card to display 2 different cards.

so like this:

type: conditional
conditions:
  - condition: user
    users:
      - 4909f44e9b9a4e4c9ec1181ad9447653
card:
  type: custom:mushroom-template-card
  primary: Hello, {{user}}
  secondary: How are you?
  icon: mdi:home
  tap_action:
    action: toggle

then have another under it for the other user:

type: conditional
conditions:
  - condition: user
    users:
      - 36a60d7c11b64dc6bd7eff5324487c79
card:
  type: custom:mushroom-template-card
  primary: Hello, {{user}}
  secondary: How are you?
  icon: mdi:home
  tap_action:
    action: none

Then each user will only have 1 card show up, but it will do different things based on the user.

[Faecon (Jo)]

                    {% if states('binary_sensor.bureau_bewegingsmelder_occupancy') == 'on' %}
                      ha-state-icon::before {
                        icon: mdi:eye-circle-outline;
                        position: absolute;
                        font-family: 'Material Icons';
                        top: -11%;
                        left: -11%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 15px;
                        height: 15px;
                        font-size: 11px;
                        background: rgba(var(--rgb-amber), 0.5);
                        color: rgba(var(--rgb-amber), 1);
                        border-radius: 50%;
                        animation: blink 1s linear infinite;
                      }
                    {% endif %}

cant I use the “icon: mdi:eye-circle-outline;” ? because it is not working. If I use ```
content: ‘directions_walk’;

[dimitri.landerloos]

You need to install the Material Icons font for this to work.

Mushroom Cards - Build a beautiful dashboard easily

Yes, why not? Mushroom Multi-Badges [Mushroom Multi-Badge] type: custom:mushroom-template-card primary: Mushrooms icon: mdi:mushroom icon_color: red badge_icon: mdi:bug badge_color: green card_mod: style: | mushroom-badge-icon:after { content: "bug_report"; font-size: 0.9em; font-family: 'Material Icons'; position: absolute; display: flex; justify-content: center; align-items: center; top: 32px; color: va…

then you can search for an icon and use the name from the android section:

Material Symbols and Icons - Google Fonts

you also need to declare it as content: 'mystery'; you cant just declare icon: mdi:something; icon is not CSS so it will have no idea what this is.

you also dont have access to all icons like you do with mdi. but the selection is still quite large.

[weemaba999 (Bart Weemaels)]

Hi all,

Please have a look at my stack-in-card:

The problem is that my shutter card (blue one) is not fitting in my card

Is there a way to:

• Make the graph smaller so that all icons fit in the card
• or get my icons closer to each other so that they fit in the card
• or is it the badge of my temp (right upper corner) that makes my icon of lamp start further ?

Anyone can help to make this a little bit more beautifull ?

Thanks a lot !

Kr,

Bart

[dimitri.landerloos]

Maybe ask this question in the strategy thread

Auto generating mushroom dashboard using strategies

[auto] [views] [customizable] GitHub Link Howdy! I wanted to share this custom strategy I made that automagically creates a dashboard from the areas and devices you have configured in Home Assistant. It has a home view that shows all the people and cards for each room. Each room has its own subview that shows all the devices and entities in that room. I also created some pre-built views in the strategy that shows domain-specific entities and devices like lights, switches and mor…

or i am sure this question has already been asked there too

[dimitri.landerloos]

Please post your code. i think i can solve this one pretty easily, but i need to see the code

[Faecon (Jo)]

like this ?

resources:
[
{ url: https://fonts.googleapis.com/icon?family=Material+Icons, type: css },
]
in my config.yaml ?

[dimitri.landerloos]

No. have a read of the first link i sent you. he explains where to add the link. doesnt have to be done in code can be done from the UI.

but to make it steps for you.

go to your settings, then dashboards, the 3 dot menu in the top right, click resources, then click the add resource button, and paste in the link provided in the post. remember to select stylesheet, before then clicking create.

[Faecon (Jo)]

@dimitri.landerloos

go to your settings, then dashboards, the 3 dot menu in the top right, click resources, then click the add resource button, and paste in the link provided in the post. remember to select stylesheet, before then clicking create.

I use it in yaml mode, so I only can add it in my config yaml

[dimitri.landerloos]

No… you can add resouces for all dasboards to use without going into yaml at all. follow the directions i gave you.

1. go to your settings.
   
2. click dasboards.
   
   
3. click on the 3 dot menu. click on resources.
   
4. click the add resource button.
   
5. fill in the details and click create.
   
   

[Faecon (Jo)]

i did it like this

Material Symbols for Home Assistant

[Screenshot 2023-08-04 202906] Material Symbols for Home Assistant Hey All! I wanted to share something with the community that I have been working on for a little while. I have wanted to bring the UI design, Material Design 3 by Google, into Home Assistant, and to that end, I have been working on a number of projects to do this. I’m by no means a developer, but I do love to dabble where I can! Without further ado, may I introduce you to Material Symbols for Home Assistant. It is a col…

but thanks for helping me out.

[Faecon (Jo)]

[dimitri.landerloos]

Ok, ive read up on yaml only mode. honestly didnt even know that was a thing, but fair enough.

suggest that you maybe note something like that and explain your setup in the initial question going forward though