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

Sorry, not a mac man :grinning:. Using -webkit-filter: grayscale(100%); should do the trick.

2 Likes

From the amount of troubleshooting that I’ve done, the normal filter: grayscale(100%) should work with Safari 15+. A snippet of code on JSFiddle works perfectly fine in the browser.

It’s like Home Assistant overwrites/overrides the image to undo the grayscale (but only on Safari?).

I’ll leave it as it is for now as I am no CSS expert, if anyone else on Safari (Mac/iOS) has a solution, please do let me know.

hey like you room card any chance if the code please?

Trying to change the font color and show no icon but so far it’s not working out…

Anyone have any suggestions?

- type: custom:mushroom-chips-card
      chips:
        - type: entity
          entity: sensor.12hourtime
          icon: ""
          card_mod:
            style: |
              ha-card {
                width: 50%;
                color: "#999999";
                --chip-font-weight: bold;
                --chip-font-size: 25px;                
              }

All the css is working except font color :slight_smile:
How do I show NO icon?

Thank you all!

Try:

ha-card {
            width: 50%;
            --text-color: #999999;
            --chip-font-weight: bold;
            --chip-font-size: 25px;                
          }
1 Like

Thank you!!! That worked great!

1 Like

Thank you all! I figured out the no icon by simply putting “icon: none”

- type: custom:mushroom-chips-card
      chips:
        - type: entity
          entity: sensor.12hourtime
          icon: none
          card_mod:
            style: |
              ha-card {
                width: 50%;
                --text-color: #000000;
                --chip-font-weight: bold;
                --chip-font-size: 25px;                
              }

Couple questions on the media card - first, any plans to include input selector on the card (w/o going into more info) and second, and plans to modify the power button/service so it can send magic packets to turn on TVs and such that WoL? Thanks! Love the mushroom cards, makes for a very straightforward way to create a nice looking dashboard. :slight_smile:

Really appreciate (and I know everyone else does too) how willing you are to share and support.

Could you give me a nudge as to what style modifiers would bring my avatars more in-line with the example you provided? Ideally I’d like as little rectangular whitespace as possible and the dark background encircling the avatar. I believe the code is pretty much verbatim, so I’m guessing it’s a function of one of the other styles applied e.g. to the stack-in card I’m using or something. Still fiddling around.

I’ve taken a few scans through the thread but it’s getting tougher to find directed topics :slight_smile: [actuallly, maybe an FAQ or compendium would be cool… rainy day project] But anyhow, my apologies if I missed an obvious example.

decluttering_templates:
  person-home:
    card:
      type: custom:mushroom-person-card
      entity: '[[entity]]'
      primary_info: none
      secondary_info: none
      use_entity_picture: true
      card_mod:
        style: |
          
          mushroom-shape-avatar {    
            {{ 'filter: grayscale(100%);' if is_state('[['entity']]', 'not_home') }}
          }
4 Likes

How did you get that roller pic on the card?

For the avatar, try this:

Cant Change secondary text color: I want to ahve green if the constact sensor is on, else, standar color. the code is:

        card_mod:
          style: |
            ha-card {
              --secondary-text-color:  {{ 'green' if is_state('binary_sensor.contact_sensor_ac_estar_contact', 'on') else '' }};;
            }

The complete code is the following:

type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: |
          AC
        secondary: >
          {%if is_state('climate.ac_estar', 'off')%} off {% else %} 

          {%if states('counter.aux_ac_estar')|int == 0 and

          is_state('climate.ac_estar', 'heat')%} Idle {% else %} {%if

          states('counter.aux_ac_estar')|int == 1 %} bajo {% else %} {%if

          states('counter.aux_ac_estar')|int == 2 %} med {% else %} {%if

          states('counter.aux_ac_estar')|int == 3 %} alto {% endif %} {% endif
          %} {%

          endif %} {% endif %} {% endif %}
        icon: mdi:air-conditioner
        icon_color: |-
          {% if is_state('climate.ac_estar', 'heat') %}
          orange
          {% else %}
          grey
          {% endif %}
        entity: climate.ac_estar
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --secondary-text-color:  {{ 'green' if is_state('binary_sensor.contact_sensor_ac_estar_contact', 'on') else '' }};;
            }

  - type: custom:mushroom-climate-card
    entity: climate.ac_estar
    name: AC Estar
    icon: mdi:air-conditioner
    hvac_modes:
      - heat
    show_temperature_control: true
    collapsible_controls: false
    fill_container: false
    icon_type: none
    primary_info: none
    secondary_info: none
1 Like

Hi @strangehadron,

nice work. Can you tell me how you did the menu pane on the left?

I want to build something similar where on the left I have a menu area and depending on the section, it loads a specific dashboard on the right.

If you can share what you used and how you arranged it this way that would be awesome! Thanks

Hi,

same here I would be very interested how you did the sidebar on the left with the menu? What cards and layout options did you use to make it fit?

You were almost there. Should be like this:

--secondary-text-color:  {{ 'green' if is_state('binary_sensor.contact_sensor_ac_estar_contact', 'on') }};

‘mushroom-shape-icon’ is for when ‘icon type’ is ‘icon’ and now changes to ‘mushroom-shape-avatar’ when ‘icon type’ is ‘entity picture’.

I’m happy to share :slight_smile:. It’s been fun seeing what we can do with Paul’s Mushroom cards.

Are you wanting to add the circle shadow (shape) behind your person pics (avatar) or remove it from the one on the left?

To remove the shape, Tempus has your answer.

To add a shape you can do it like this:

Person Card

type: custom:mushroom-person-card
entity: person.rhys
icon: ' '
icon_type: icon
primary_info: none
secondary_info: none
card_mod:
  style: |
    mushroom-card { 
      background: url( {{ state_attr('person.rhys', 'entity_picture') }} ) no-repeat 0px center;
      background-size: 42px 42px;
    }
    ha-card {
      margin-left: auto;
      margin-right: auto;
      width: 66px;
      border-radius: 50%;
    }
5 Likes

Hi,

I did the same way from minimalist to mushroom with exactly the same room card issue.

I use the minimalistic area card right now:

It’s possible to get information about temperature, humidity and open doors/windows and also the option to toggle lights and switches, open audio players, change climate and ac settings and so on.
And everything is on a nice little picture of your choice. Really easy to setup!

Here is an example:

1 Like

Card as an option to use picture instead of icon

              icon_type: entity-picture

So if you define cover’s entity-picture properties as a path/png, card will use it
I failed to use template for entity-picture so i could have image with some kind of %

1 Like

I can‘t get this working on a conditional chip for my lights. Could you post the whole yaml please?