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

Active Animations section :slight_smile:

@Roflcopterer: Very nice, I found it! Sorry, I’m very new on HA, so I’m trying to find my way in the forrest of possibilities!🫣 Can you please tell me’ what kind of Card you’ve used for this? (please check red circles in image)

It’s the title card or a template card. Browse the available cards, you will find most of what you need.

Hi All,

Hopefully looking for some help with the below, I’ve been looking over the past day at Rhys’ excellent code examples and I’m trying to build my own room card. I have the basics pretty much there but there are a few things I’d like to potentially change if anybody can advise how?

I’d like if possible to make the hallway text larger and maybe bold, I’d also like to change the colour of the temp and humidity text if possible? I have tried adding font-size under the .primary but it doesn’t seem to have any effect on the size.

Thanks

image

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Hallway
    secondary: >-
      {{ states('sensor.sonoff_a44001d0c1_temperature') | round (0) }} °C | {{
      states('sensor.sonoff_a44001d0c1_humidity') | round (0) }} %
    icon: mdi:tree
    entity: light.hallway_lamp
    tap_action:
      action: toggle
    hold_action:
      action: navigation
      navigation_path: hallway
    icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            text-shadow: 4px 4px 3px rgba(var(--rgb-disabled), 0.8);
          }  
        .: |
          :host {
            background: url('/local/images/hallway.PNG') center;
            background-size: cover;
            background-blend-mode: overlay;
            background-color: rgba(var(--rgb-card-background-color), 0.4);
            --mush-icon-size: 0px;
            height: 220px;
            margin-left: -15px !important;
            margin-top: -70px !important;
          }
          mushroom-shape-icon {
            --shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.hallway_lamp', 'on') else 'disabled' }}), 0.4) !important;
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: binary_sensor.front_door
            state: 'on'
        chip:
          type: template
          icon_color: grey
          icon: mdi:door-open
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: lock.front_door
            state: unlocked
        chip:
          type: template
          icon_color: grey
          icon: mdi:lock-open-variant
          tap_action:
            action: none
          hold_action:
            action: none
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: -10px;
        } 
card_mod:
  style: |
    ha-card {
      height: 180px;
      width: 180px;
      {% if is_state('light.hallway_lamp', 'on') %}
          box-shadow: 0 0 10px rgba(245, 173, 66, 0.6);
          #background: rgba(245, 173, 66, 0.1);      {% endif %}
    }

I have been trying to stylize the input select ( I’m using the custom:mushroom-select-card) without any luck, I want to make it look a bit better by rounding the corners, setting a different color for the arrow and maybe removing the gray background.

Can anyone help me out with this? You can see on the left one of my attempts to figure out the CSS selectors, but nothing works.

I dont like posting this over and over because it feels like i am advertising, but perfect example of something that is covered with my guide here:

It might not cover everything you mentioned, but it will certainly put you in the right direction :slight_smile:

@GTunney also applies to your question :slight_smile:

1 Like

Thanks I have tried to apply different styling options but it ignores anything I try to do with the font size or colour.

Not true. Look at my examples .

Thank you very much for that, but i cant seems to find what I need to change, I’m able to figure out the border around the input select, but I cant change the input select itself. i have dotted the border for you to understand what I mean, check the picture

The input select stays over the border. i want the input select to be rounded and it’s background to be white. Do you know how to achieve this?

Select Card Guide and Selection Value Section:

So:

card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$: |
        .mdc-select__anchor{
          background: white !important
          border-radius: 20px !important;
        }

Just careful with setting it to white because on dark theme the text then wont be visible :slight_smile:

And if you also wanted to change the color of the dropdown icon:

card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$: |
        .mdc-select__anchor{
          background: white !important;
          border-radius: 12px !important;
        }
        .mdc-select__dropdown-icon {
          fill: red !important
        }

That worked!! Thank you so much!!! Much appreciated.

Btw: do you know what that black line at the bottom of the selectors is? I want to get rid of that

        .mdc-line-ripple::before {
          border-bottom-width: 0px !important;
        }
card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$: |
        .mdc-select__anchor{
          background: white !important;
          border-radius: 12px !important;
        }
        .mdc-select__dropdown-icon {
          fill: red !important
        }
        .mdc-line-ripple::before {
          border-bottom-width: 0px !important;
        }

You’re amazing! Thank you very much!

Apologies I had some formatting wrong, I’ve changed it over and it’s now working.

Thanks very much for your help.

image

thats an really awesome guide! thanks a lot. :clap:

to bad its very confusing to find information like that since its all over the thread. it should be pinned somewhere. :slightly_smiling_face:

i still have the problem that the card is aligned to the left:
image

i’d like to create a stack-in-card and use the mushroom icons as buttons. i’d like to archive that it looks like the default buttons of the cover card, but they are all not centered:

[TOP]: default cover card with buttons / [BOTTOM] Grid card with mushroom icons

Grid Card Code
square: false
type: grid
columns: 3
cards:
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:arrow-up-bold
    fill_container: false
    card_mod:
      style: |
        mushroom-shape-icon {
          --shape-color: none !important;
        }
        ha-card {
          width: fit-content;
          background: none;
          border: 1 !important;
          box-shadow: none !important;
        }
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:pause
    card_mod:
      style: |
        mushroom-shape-icon {
          --shape-color: none !important;
        }
        ha-card {
          width: fit-content;
          background: none;
          border: none !important;
          box-shadow: none !important;
        }
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:arrow-down-bold
    card_mod:
      style: |
        mushroom-shape-icon {
          --shape-color: none !important;
        }
        ha-card {
          width: fit-content;
          background: none;
          border: none !important;
          box-shadow: none !important;
        }
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:blinds-horizontal
    card_mod:
      style: |
        mushroom-shape-icon {
          --shape-color: none !important;
        }
        ha-card {
          width: fit-content;
          background: none;
          border: none !important;
          box-shadow: none !important;
        }
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:sun-thermometer-outline
    card_mod:
      style: |
        mushroom-shape-icon {
          --shape-color: none !important;
        }
        ha-card {
          width: fit-content;
          background: none;
          border: none !important;
          box-shadow: none !important;
        }
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:blinds-horizontal-closed
    card_mod:
      style: |
        mushroom-shape-icon {
          --shape-color: none !important;
        }
        ha-card {
          width: fit-content;
          background: none;
          border: none !important;
          box-shadow: none !important;
        }

i tried “align-items: center;” for ha-card but this doesn’t work. any idea whats the problem?

is there also a way to get the hover effect when putting the mouse arrow over a card like with the default tile cards?

this should center the entire thing no matter what you set the width of the card to.

    mushroom-state-item {
      display: grid;
      justify-items: center !important;
    }

you can add a hover effect, but it certainly wont be as fancy as the tile card. the tile card has a ripple built in, the mushroom card does not.

full example:

card_mod:
  style: |
    mushroom-shape-icon {
      --shape-color: none !important;
    }
    ha-card {
      width: 100px;
      height: 40px !important;
      background: none;
      border: 1 !important;
      box-shadow: none !important;
      transition: 1s;
    }
    ha-card:hover {
      background: red !important;
    }
    mushroom-state-item {
      display: grid;
      justify-items: center !important;
    }

but you are right. i have updated the guide to include an index with links to each post :slight_smile:

1 Like

its still on the left for me:

image

what i am doing wrong? :thinking:

Code
type: custom:mushroom-template-card
entity: ''
primary_info: none
secondary_info: none
icon: mdi:test-tube
card_mod:
  style: |
    mushroom-shape-icon {
      --shape-color: none !important;
    }
    ha-card {
      width: 100px;
      height: 40px !important;
      background: none;
      border: 1 !important;
      box-shadow: none !important;
      transition: 1s;
    }
    ha-card:hover {
      background: red !important;
    }
    mushroom-state-item {
      display: grid;
      justify-items: center !important;
    }

Nothing wrong. but sorry i just assumed you meant you wanted to center the contents of the card not the card itself on the view.

easiest way to center a single card would be to just add margin. but i think what you want is each card centered neatly inside of the grid card. without starting to use something like the mod card its really difficult to try and do, so i would just replicate the buttons like this with sizing them right:

image

type: grid
square: false
cards:
  - type: custom:mushroom-template-card
    primary: null
    secondary: null
    icon: mdi:home
    card_mod:
      style: |
        mushroom-shape-icon {
          --shape-color: none !important;
        }
        ha-card {
          width: 120px;
          height: 40px !important;
          border: 1 !important;
          box-shadow: none !important;
          transition: 1s;
          border-radius: 10px !important;
          background: rgba(var(--rgb-disabled), 0.2) !important;
          left: 8px;
        }
        ha-card:hover {
          background: red !important;
        }
        mushroom-state-item {
          display: grid;
          justify-items: center !important;
        }
  - type: custom:mushroom-template-card
    primary: null
    secondary: null
    icon: mdi:home
    card_mod:
      style: |
        mushroom-shape-icon {
          --shape-color: none !important;
        }
        ha-card {
          width: 120px;
          height: 40px !important;
          border: 1 !important;
          box-shadow: none !important;
          transition: 1s;
          border-radius: 10px !important;
          background: rgba(var(--rgb-disabled), 0.2) !important;
          left: 4px;
        }
        ha-card:hover {
          background: red !important;
        }
        mushroom-state-item {
          display: grid;
          justify-items: center !important;
        }
  - type: custom:mushroom-template-card
    primary: null
    secondary: null
    icon: mdi:home
    card_mod:
      style: |
        mushroom-shape-icon {
          --shape-color: none !important;
        }
        ha-card {
          width: 120px;
          height: 40px !important;
          border: 1 !important;
          box-shadow: none !important;
          transition: 1s;
          border-radius: 10px !important;
          background: rgba(var(--rgb-disabled), 0.2) !important;
        }
        ha-card:hover {
          background: red !important;
        }
        mushroom-state-item {
          display: grid;
          justify-items: center !important;
        }

i tried it and it looked good:
image

but when i viewed it from mobile things got messy (even when i used % instead of px):

wouldnt it be better to style the icon-shape as a button instead of the ha-card?