Mushroom Cards Card Mod Styling/Config Guide

Entity Card

Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.
image

card_mod:
  style: |
    ha-state-icon {
      --card-mod-icon: mdi:mushroom;
    }

Change the icon color.
image

card_mod:
  style: |
    ha-state-icon {
      color: orange;
    }

Change icon size.
image

card_mod:
  style: |
    ha-state-icon {
      --icon-symbol-size: 40px;
    }

Rotate Icon.
image

card_mod:
  style: |
    ha-state-icon {
      rotate: 30deg;
    }

Offset/Pad Icon.
image
This one there is a couple different ones you can use, and also some different value types. i would just play around with it until you find what you like.

card_mod:
  style: |
    ha-state-icon {
      padding-right: 30px;
      padding-left: 10px;
      padding-bottom: -20px;
      height: 20px;
      width: 50px;
    }

Animate the Icon.
Untitled video - Made with Clipchamp (29)
If you are using an animation you need to put your keyframes outside of the ha-state-icon, like the below.

card_mod:
  style: |
    ha-state-icon {
      animation: wobbling 0.7s linear infinite alternate;
    }
    @keyframes wobbling {
      0% {transform: rotate(-80deg);}
      100% {transform: rotate(40deg);}
    }

End Icon Styling Section

Main Icon Background/Shape Styling

You can style the main icon background/shape like this:

Shape Color.
image

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: orange !important;
      }

Shape Size.
image
You should set the icon size to 21px as this is the standard size for mushroom cards. you are then free to change the size of the shape without affecting the icon.

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --icon-symbol-size: 21px;
        --icon-size: 100px;
      }

Shape Shadow.
imageimage
Left with shadow, right standard without shadow. !important seems to be required.

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
      }

Shape “Shape”?
image
Note that it doesnt seem like you can use negative values here.

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        padding-right: 40px;
        padding-left: 10px;
        padding-bottom: 10px;
      }

Shape Outline/Border.
image
the different border types can be found here.

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        border: 2.5px outset green
      }

Shape Animation.
Untitled video - Made with Clipchamp (30)
If you are using an animation you need to put your keyframes outside of the .shape, like the below.

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
          0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
          70% {box-shadow: 0 0 0 10px transparent;}
          100% {box-shadow: 0 0 0 0 transparent;}
      }

End Shape/Icon Background Styling Section

Card Styling

The card body itself can be styled like this:

Background Color.
image

card_mod:
  style: |
    ha-card {
      background-color: #002f7a;
    }

Background outline/border.
image
Note that setting a border size does seem to change the actual card size slightly. border types can be found here.

card_mod:
  style: |
    ha-card {
      border: 2.5px outset blue
    }

Card shadow.
imageimage
You can use this to both add a shadow and remove one if your theme has a shadow by default like mine does (minimalist).
Add Shadow.

card_mod:
  style: |
    ha-card {
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.66);
    }

Remove Shadow.

card_mod:
  style: |
    ha-card {
        box-shadow: none;
    }

Card size.
image
This changes the outside size of the card. not any of the interior contents. you have to use !important it seems for height to actually change.

card_mod:
  style: |
    ha-card {
      height: 200px !important;
      width: 200px;
    }

Card padding.
image
This adds interior padding to the card and therefore squishes the internals into the dimensions of the card more. the interior items will get smaller. you have to use !important it seems for padding to take effect.

card_mod:
  style: |
    ha-card {
      padding-right: 150px !important;
      padding-left: 150px !important;
      padding-bottom: 30px !important;
      padding-top: 30px !important;
    }

Card margins.
image
Card margin adds blank space to the outside of the card squeezing the entire card (interiror and exterior) into a smaller space, making the whole card smaller.

card_mod:
  style: |
    ha-card {
      margin-top: 30px;
      margin-bottom: 30px;
      margin-left: 30px;
      margin-right: 30px;
    }

Card Border/Corner Radius.
image
Changes the radius of the corners. this is set to 0. so sharp corners.

card_mod:
  style: |
    ha-card {
        border-radius: 0px;
    }

Card Shape Animation
Untitled video - Made with Clipchamp (31)

card_mod:
  style: |
    ha-card {
      animation: ping 2s infinite;
    }
    @keyframes ping {
        0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
        70% {box-shadow: 0 0 0 10px transparent;}
        100% {box-shadow: 0 0 0 0 transparent;}
    }

End of Card Styling Section

Text Styling

Primary (or first line) text can be styled like this:

Change Font.
image
maybe dont use Wingdings :wink:

card_mod:
  style: |
    ha-card {
      font-family: "Wingdings 2";
    }

Change Font Style.
image
Font styles can be found here.

card_mod:
  style: |
    ha-card {
      font-style: italic;
    }

Change Font Variant.
image
Font variants can be found here.

card_mod:
  style: |
    ha-card {
      font-variant: small-caps;
    }

Change Font Size.
image
I have not found a way to change font size for text accross the board. you have to do them individually it seems.

card_mod:
  style:
    mushroom-state-info$: |
      .container {
       --card-secondary-font-size: 20px;
       --card-primary-font-size: 20px;
      }

Change Font Color.
image
I have not found a way to change color for text accross the board. you have to do them individually it seems.

card_mod:
  style:
    mushroom-state-info$: |
      .container {
        --card-primary-color: blue;
        --card-secondary-color: orange;
      }

Change Alligment
image
Different allignment options can be found here.

card_mod:
  style:
    mushroom-state-info$: |
      .container {
        align-items: end;
      }

Change Rows.
image
Gap will need to be adjusted depending on your primary text length. you can find the different types of flex direction here. yaml courtesy of @zanixmechanix

card_mod:
  style:
    mushroom-state-info$: |
      .container {
        flex-direction: row !important;
        align-items: baseline;
        gap: 10px;
      }

End of Text Styling Section

Selection Value Styling

N/A Entity Card does not have a selection value.

End of Selection Value Styling Section

Badge Icon Styling

N/A Entity Card does not have badge icons.

End of Badge Icon Styling Section

Badge Icon Background/Shape Styling

N/A Entity Card does not have badge icons.

End of Badge Icon Shape Styling Section

Slider Styling

N/A Entity Card does not have a slider.

End of Slider Styling Section

Buttons Styling

N/A Entity Card does not have control buttons.

End of Button Styling Section

End of Entity Card Section

15 Likes