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

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?

actually probably better to just use Chips instead. then you can set the chip container to justify content and they will work on different screen sizes :slight_smile:

image

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:home
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:arrow-up
        card_mod:
          style: |
            ha-card {
              width: 118px !important;
              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;
            }
      - type: template
        icon: mdi:square
        card_mod:
          style: |
            ha-card {
              width: 118px !important;
              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;
            }
      - type: template
        icon: mdi:arrow-down
        card_mod:
          style: |
            ha-card {
              width: 118px !important;
              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;
            }
    alignment: justify
    card_mod:
      style:
        mushroom-template-chip:nth-child(1)$:
          mushroom-chip$: |
            ha-card {
              display: grid !important;
              justify-items: center !important;
            }
        mushroom-template-chip:nth-child(2)$:
          mushroom-chip$: |
            ha-card {
              display: grid !important;
              justify-items: center !important;
            }
        mushroom-template-chip:nth-child(3)$:
          mushroom-chip$: |
            ha-card {
              display: grid !important;
              justify-items: center !important;
            }
        .: |
          ha-card {
            padding: 0px 10px 10px 10px
          }

thanks, but somehow it looks different at my side and spacing is very strange.

will this even work on different screen sizes if the ha-card with and height is defined as pixels? :thinking:

You are right. i was just saying that using the chip card as a base will ensure it works on all screen sizes. but you still need to figure out how to size the width chips themselves dynamically. the height being set shouldnt matter at all.

i found that this code works courtesy of @eMeF
image

Code
type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:home
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:arrow-up
        card_mod:
          style: |
            ha-card {
              justify-content: center;
              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;
            }
      - type: template
        icon: mdi:square
        card_mod:
          style: |
            ha-card {
              justify-content: center;
              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;
            }
      - type: template
        icon: mdi:arrow-down
        card_mod:
          style: |
            ha-card {
              justify-content: center;
              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;
            }
    alignment: justify
    card_mod:
      style: |
        mushroom-template-chip {
          width: 100%; 
        }
        div.chip-container {
          justify-content: space-evenly;
          flex-wrap: nowrap;
        }
        ha-card {
          margin: 0px 12px 12px;
          --chip-spacing: 12px !important;
        }

Hello!

I have just updated to the latest version. But now my navigation bar is up top instead of at the bottom.
Can someone help me with what I should write in the theme file to move it back down again?

first thing i would do is see if there is a card-mod update for you to install as well. install it, then clear your browser/apps cache and see if that helps :slight_smile:

1 Like

The first card you got there looks really nice with that black information bar. Can you share your code? :slight_smile:

1 Like