Mushroom Cards Card Mod Styling/Config Guide

[dimitri.landerloos]

Number Card

Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.

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

Change the icon color.

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

Change icon size.

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

Rotate Icon.

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

Offset/Pad Icon.

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.

If you are using an animation you need to put your keyframes outside of the ha-state-icon, like the below.
for this card you can also just turn on spin animation for when the fan is on via the visual editor.

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.

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

Shape Size.

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.

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”?

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.

the different border types can be found here.

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

Shape Animation.

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.

Note that any buttons and sliders also seem to change color according to this color. you can style the slider seperately which you will see later in the guide.

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

Background outline/border.

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.

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.

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.

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.

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.

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

card_mod:
  style: |
    ha-card {
      border-radius: 20px !important;
      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.

maybe dont use Wingdings

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

Change Font Style.

Font styles can be found here.

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

Change Font Variant.

Font variants can be found here.

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

Change Font Size.

I have not found a way to change font size for text across 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.

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

Different allignment options can be found here.

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

Change Rows.

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 Number Card has no Selection Value.

End of Selection Value Styling Section

Badge Icon Styling

N/A Number Card has no Badge Icon.

End of Badge Icon Styling Section

Badge Icon Background/Shape Styling

N/A Number Card has no Badge Icon.

End of Badge Icon Shape Styling Section

Slider Styling

If you have sliders they can be controlled like this:

Change color.

card_mod:
  style:
    mushroom-number-value-control$: |
      mushroom-slider {
        --main-color: teal !important;
        --bg-color: #d1eced !important;
      }

Change Size

There isnt enough space to make the slider any bigger so if that is your aim i would recommend making the box that they live in bigger as well. like the below. of course this doesnt apply if you are making the buttons smaller. !important is required.

card_mod:
  style:
    mushroom-number-value-control$:
      mushroom-slider$: |
        .slider {
          width: 200px !important;
          height: 200px !important;
        }
    .: |
      mushroom-number-value-control {
        height: 200px;
      }

Rotate slider

I would not recommend using this. the control doesnt follow the direction of the slider. it is just a bad idea.

card_mod:
  style:
    mushroom-number-value-control$:
      mushroom-slider$: |
        .slider {
          rotate: 90deg;
        }
    .: |
      mushroom-number-value-control {
        height: 200px;
      }

Offset/Pad Slider

You have to use margin instead of padding. padding only seems to make the slider itself bigger.

card_mod:
  style:
    mushroom-number-value-control$:
      mushroom-slider$: |
        .slider {
          margin-right: 100px;
          margin-top: 30px !important;
        }
    .: |
      mushroom-number-value-control {
        height: 74px;
      }

Animate Slider Shape.

i would recommend adding some padding so that the animation has the space to show. you need to put your keyframes outside of the .slider, like the below.

card_mod:
  style:
    mushroom-number-value-control$:
      mushroom-slider$: |
        .slider {
          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;}
        }
    .: |
      mushroom-number-value-control {
        padding: 10px;
        height: 40px;
      }

Slider Border.

Maybe add some padding the the box the slider lives in.

card_mod:
  style:
    mushroom-fan-percentage-control$:
      mushroom-slider$: |
        .slider {
          border: dashed blue !important;
        }

End of Slider Styling Section

Buttons Styling

Refer to climate card button styling. but change references to mushroom-climate-temperature-control$: to mushroom-number-value-control$:

This section didnt exist initially when the guide was created, and there is now no space in the post for this addition. i may make a seperate post again for the number card to fix this issue eventually.

End of Buttons Styling Section

End of Number Card Section

Lock Card

Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.

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

Change the icon color.

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

Change icon size.

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

Rotate Icon.

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

Offset/Pad Icon.

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.

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.

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

Shape Size.

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.

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”?

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.

the different border types can be found here.

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

Shape Animation.

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.

Note that any buttons also seem to change color according to this color. you can style the buttons seperately which you will see later in the guide.

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

Background outline/border.

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.

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.

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.

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.

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.

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

you will need to put your keyframes outside the ha-card like the below.

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.

maybe dont use Wingdings

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

Change Font Style.

Font styles can be found here.

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

Change Font Variant.

Font variants can be found here.

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

Change Font Size.

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.

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

Different allignment options can be found here.

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

Change Rows.

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 Lock Card does not a selection value.

End of Selection Value Styling Section

Badge Icon Styling

N/A Lock Card does not have badge icons.

End of Badge Icon Styling Section

Badge Icon Background/Shape Styling

N/A Lock Card does not have badge icons.

End of Badge Icon Shape Styling Section

Slider Styling

N/A Lock Card does not have a slider.

End of Slider Styling Section

Buttons Styling

If you have control buttons they can be styled like this:

Change the icon type/mdi.

There is unfortunately a limitation that i have not been able to get around for any button that when clicked cycles to a different button. any change of icon for this button is lost and does not come back until a refresh of the page… @piitaya this could technically be solved by giving each button a name that is separate like you have done in other cards

card_mod:
  style:
    mushroom-lock-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          --card-mod-icon: mdi:mushroom;
        }

Change the icon color.

card_mod:
  style:
    mushroom-lock-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          --card-mod-icon-color: orange;
        }

Change icon size.

card_mod:
  style:
    mushroom-lock-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          --control-icon-size: 30px;
        }

Rotate Icon.

card_mod:
  style:
    mushroom-lock-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          rotate: 40deg;
        }

Offset/Pad Icon.

card_mod:
  style:
    mushroom-lock-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          padding-right: 30px;
          padding-left: 10px;
          padding-bottom: -20px;
          height: 40px;
          width: 50px;
        }

Animate the Icon.

you will need to put your keyframes outside of the ha-icon as per the below.

card_mod:
  style:
    mushroom-lock-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          animation: wobbling 0.7s linear infinite alternate;
        }
        @keyframes wobbling {
          0% {transform: rotate(-80deg);}
          100% {transform: rotate(40deg);}
        }

Button Background.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.

card_mod:
  style:
    mushroom-lock-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          --bg-color: #780000;
        }

Button Size.

i have added some padding to the button so that you can see the size difference. !important is required.

card_mod:
  style:
    mushroom-lock-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          height: 50px !important;
          width: 50px !important;
        }
      .: |
        mushroom-button {
          padding: 10px;
        }

Button Rotation.

card_mod:
  style:
    mushroom-lock-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          rotate: 30deg;
        }

Button Location.

Only margin top and left work, but negative values are allowed so you can move them anywhere you please.

card_mod:
  style:
    mushroom-lock-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          margin-top: -10px !important;
          margin-left: 30px !important;
        }

Button Border/Outline.

border types can be found here.

card_mod:
  style:
    mushroom-lock-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button {
           border: dashed blue !important;
        }

Button Reverse Order.
N/A only 1 button on the lock card.

Animate buttons shape.

i have added some extra padding to the button so there is room for the animation. you will need to put your keyframes outside of the .button, like the below.

card_mod:
  style:
    mushroom-lock-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          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;}
        }
      .: |
        mushroom-button {
          padding: 7px;
        }

End of Button Styling Section

End of Alarm Control Panel Card Section

[dimitri.landerloos]

Light Card
Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.

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

Change the icon color.

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

Change icon size.

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

Rotate Icon.

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

Offset/Pad Icon.

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.

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.

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

Shape Size.

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.

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”?

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;
        border-radius: 0px !important;
      }

Shape Outline/Border.

the different border types can be found here.

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

Shape Animation.

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.

Note that any buttons and also seem to change color according to this color. you can style the buttons and slider seperately which you will see later in the guide.

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

Background outline/border.

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.

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.

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.

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.

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.

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

you need to put your keyframes outside of the ha-card like the below.

card_mod:
  style: |
    ha-card {
      border-radius: 20px !important;
      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.

maybe dont use Wingdings

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

Change Font Style.

Font styles can be found here.

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

Change Font Variant.

Font variants can be found here.

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

Change Font Size.

I have not found a way to change font size for text across 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.

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

Different allignment options can be found here.

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

Change Rows.

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 Light Card has no Selection Value.

End of Selection Value Styling Section

Badge Icon Styling

N/A Light Card has no Badge Icon.

End of Badge Icon Styling Section

Badge Icon Background/Shape Styling

N/A Light Card has no Badge Icon.

End of Badge Icon Shape Styling Section

Slider Styling

If you have sliders they can be controlled like this:

Change color.



This will override any color already there (like for example if you have use light color turned on).

card_mod:
  style:
    mushroom-light-brightness-control$: |
      mushroom-slider {
        --main-color: teal !important;
        --bg-color: #d1eced !important;
      }
    mushroom-light-color-control$: |
      mushroom-slider {
        --gradient: -webkit-linear-gradient(right, red 0%, orange 10%, yellow 20%, lightgreen 30%, green 40%, lightblue 50%, blue 60%, purple 70%, fuchsia 80%, red 100%) !important;
      }
    mushroom-light-color-temp-control$: |
      mushroom-slider {
        --gradient: -webkit-linear-gradient(right, teal 0%, white 100%) !important;
      }

Change Size

There isnt enough space to make the slider any bigger so if that is your aim i would recommend making the box that they live in bigger as well. like the below. of course this doesnt apply if you are making the buttons smaller. !important is required.

card_mod:
  style:
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .slider {
          width: 200px !important;
          height: 200px !important;
        }
    mushroom-light-color-control$:
      mushroom-slider$: |
        .slider {
          width: 200px !important;
          height: 200px !important;
        }
    mushroom-light-color-temp-control$:
      mushroom-slider$: |
        .slider {
          width: 200px !important;
          height: 200px !important;
        }
    .: |
      mushroom-light-brightness-control {
        height: 200px;
      }
      mushroom-light-color-control {
        height: 200px;
      }
      mushroom-light-color-temp-control {
        height: 200px;
      }

Rotate slider

I would not recommend using this. the control doesnt follow the direction of the slider. it is just a bad idea.

card_mod:
  style:
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .slider {
          rotate: 90deg;
        }
    mushroom-light-color-control$:
      mushroom-slider$: |
        .slider {
          rotate: 90deg;
        }
    mushroom-light-color-temp-control$:
      mushroom-slider$: |
        .slider {
          rotate: 90deg;
        }
    .: |
      mushroom-light-brightness-control {
        height: 200px;
      }
      mushroom-light-color-control {
        height: 200px;
      }
      mushroom-light-color-temp-control {
        height: 200px;
      }

Offset/Pad Slider

You have to use margin instead of padding. padding only seems to make the slider itself bigger.

card_mod:
  style:
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .slider {
          margin-right: 100px;
          margin-top: 30px !important;
        }
    mushroom-light-color-control$:
      mushroom-slider$: |
        .slider {
          margin-right: 100px;
          margin-top: 30px !important;
        }
    mushroom-light-color-temp-control$:
      mushroom-slider$: |
        .slider {
          margin-right: 100px;
          margin-top: 30px !important;
        }
    .: |
      mushroom-light-brightness-control {
        height: 74px;
      }
      mushroom-light-color-control {
        height: 74px;
      }
      mushroom-light-color-temp-control {
        height: 74px;
      }

Animate Slider Shape.

i would recommend adding some padding so that the animation has the space to show. you need to put your keyframes outside of the .slider, like the below.

card_mod:
  style:
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .slider {
          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;}
        }
    mushroom-light-color-control$:
      mushroom-slider$: |
        .slider {
          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;}
        }
    mushroom-light-color-temp-control$:
      mushroom-slider$: |
        .slider {
          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;}
        }
    .: |
      mushroom-light-brightness-control {
        padding: 10px;
        height: 40px;
      }
      mushroom-light-color-control {
        padding: 10px;
        height: 40px;
      }
      mushroom-light-color-temp-control {
        padding: 10px;
        height: 40px;
      }

Slider Border.

Maybe add some padding the the box the slider lives in.

card_mod:
  style:
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .slider {
          border: dashed blue !important;
        }
    mushroom-light-color-control$:
      mushroom-slider$: |
        .slider {
          border: dashed blue !important;
        }
    mushroom-light-color-temp-control$:
      mushroom-slider$: |
        .slider {
          border: dashed blue !important;
        }

End of Slider Styling Section

Buttons Styling

If you have control buttons they can be styled like this:
for the light card it seems that nth-child starts at 2 for some reason?

Change the icon type/mdi.

add + 1 to the nth-child for each button in your card. light card starts at 2 for some reason.

card_mod:
  style:
    mushroom-button:nth-child(2)$: |
      .button ::slotted(*) {
        --card-mod-icon: mdi:mushroom;
      }

Change the icon color.

add + 1 to the nth-child for each button in your card. light card starts at 2 for some reason.

card_mod:
  style:
    mushroom-button:nth-child(2)$: |
      .button ::slotted(*) {
        --card-mod-icon-color: orange;
      }

Change icon size.

add + 1 to the nth-child for each button in your card. light card starts at 2 for some reason.

card_mod:
  style:
    mushroom-button:nth-child(2)$: |
      .button ::slotted(*) {
        --control-icon-size: 50px;
      }

Rotate Icon.

add + 1 to the nth-child for each button in your card. light card starts at 2 for some reason.

card_mod:
  style:
    mushroom-button:nth-child(2)$: |
      .button ::slotted(*) {
        rotate: 40deg;
      }

Offset/Pad Icon.

add + 1 to the nth-child for each button in your card. light card starts at 2 for some reason.

card_mod:
  style:
    mushroom-button:nth-child(2)$: |
      .button ::slotted(*) {
        padding-right: 100px;
        padding-left: 10px;
        padding-bottom: 20px;
        width: 150px;
      }

Animate the Icon.

add + 1 to the nth-child for each button in your card. light card starts at 2 for some reason.
you will need to put your keyframes outside of the ha-icon as per the below.

card_mod:
  style:
    mushroom-button:nth-child(2)$: |
      .button ::slotted(*) {
        animation: wobbling 0.7s linear infinite alternate;
      }
      @keyframes wobbling {
        0% {transform: rotate(-80deg);}
        100% {transform: rotate(40deg);}
      }

Button Background.

add + 1 to the nth-child for each button in your card. light card starts at 2 for some reason.
!important seems to be required.

card_mod:
  style:
    mushroom-button:nth-child(2)$: |
      .button {
        background: #780000 !important;
      }

Button Size.

add + 1 to the nth-child for each button in your card. light card starts at 2 for some reason.

card_mod:
  style: |
    mushroom-button:nth-child(2) {
      height: 100px !important;
      width: 100px !important;
    }

Button Location.

add + 1 to the nth-child for each button in your card. light card starts at 2 for some reason.
Only margin top and left work, but negative values are allowed so you can move them anywhere you please.

card_mod:
  style: |
    mushroom-button:nth-child(2) {
      margin-top: 20px !important;
      margin-left: 37px !important;
    }

Button Border/Outline.

add + 1 to the nth-child for each button in your card. light card starts at 2 for some reason.
border types can be found here.

card_mod:
  style:
    mushroom-button:nth-child(2) $: |
      .button {
        border: dashed blue !important;
      }

Button Reverse Order.

this doesnt work very well unless you also move the slider. i have done that in this example.

card_mod:
  style:
    mushroom-light-color-control$: |
      mushroom-slider {
        transform: scalex(-1)
      }
    mushroom-light-color-temp-control$: |
      mushroom-slider {
        transform: scalex(-1)
      }
    mushroom-light-brightness-control$: |
      mushroom-slider {
        transform: scalex(-1)
      }
    .: |
      .actions {
        transform: scalex(-1)
      }

Animate buttons shape.

i would recommend adding some padding to the boxes that the buttons live in just so that there is space for the animation. you will need to put your keyframes outside of the .button, like the below.

card_mod:
  style:
    mushroom-button:nth-child(1)$: |
      .button {
        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;}
      }
    mushroom-button:nth-child(2)$: |
      .button {
        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;}
      }
    .: |
      mushroom-button {
        padding: 10px;
        height: 40px;
      }

End of Buttons Styling Section

End of Light Card Section

[dimitri.landerloos]

Media Card
Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.

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

Change the icon color.

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

Change icon size.

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

Rotate Icon.

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

Offset/Pad Icon.

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.

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.

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

Shape Size.

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.

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”?

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;
        border-radius: 0px !important;
      }

Shape Outline/Border.

the different border types can be found here.

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

Shape Animation.

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.

Note that any buttons and also seem to change color according to this color. you can style the buttons and slider seperately which you will see later in the guide.

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

Background outline/border.

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.

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.

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.

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.

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.

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

you need to put your keyframes outside of the ha-card like the below.

card_mod:
  style: |
    ha-card {
      border-radius: 20px !important;
      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.

maybe dont use Wingdings

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

Change Font Style.

Font styles can be found here.

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

Change Font Variant.

Font variants can be found here.

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

Change Font Size.

I have not found a way to change font size for text across 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.

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

Different allignment options can be found here.

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

Change Rows.

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 Media Card has no Selection Value.

End of Selection Value Styling Section

Badge Icon Styling

N/A Media Card has no Badge Icon.

End of Badge Icon Styling Section

Badge Icon Background/Shape Styling

N/A Media Card has no Badge Icon.

End of Badge Icon Shape Styling Section

Slider Styling

If you have sliders they can be controlled like this:

Change color.

This will override any color already there.

card_mod:
  style:
    mushroom-media-player-volume-control$: |
      mushroom-slider {
        --main-color: teal !important;
        --bg-color: #d1eced !important;
      }

Change Size

There isnt enough space to make the slider any bigger so if that is your aim i would recommend making the box that they live in bigger as well. like the below. of course this doesnt apply if you are making the buttons smaller. !important is required.

card_mod:
  style:
    mushroom-media-player-volume-control$:
      mushroom-slider$: |
        .slider {
          width: 200px !important;
          height: 200px !important;
        }
    .: |
      mushroom-media-player-volume-control {
        height: 200px;
      }

Rotate slider

I would not recommend using this. the control doesnt follow the direction of the slider. it is just a bad idea.

card_mod:
  style:
    mushroom-media-player-volume-control$:
      mushroom-slider$: |
        .slider {
          rotate: 90deg;
        }
    .: |
      mushroom-media-player-volume-control {
        height: 200px;
      }

Offset/Pad Slider

You have to use margin instead of padding. padding only seems to make the slider itself bigger.

card_mod:
  style:
    mushroom-media-player-volume-control$:
      mushroom-slider$: |
        .slider {
          margin-right: 100px;
          margin-top: 30px !important;
        }
    .: |
      mushroom-media-player-volume-control {
        height: 74px;
      }

Animate Slider Shape.

i would recommend adding some padding so that the animation has the space to show. you need to put your keyframes outside of the .slider, like the below.

card_mod:
  style:
    mushroom-media-player-volume-control$:
      mushroom-slider$: |
        .slider {
          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;}
        }
    .: |
      mushroom-media-player-volume-control {
        padding: 10px;
        height: 40px;
      }

Slider Border.

Maybe add some padding the the box the slider lives in.

card_mod:
  style:
    mushroom-media-player-volume-control$:
      mushroom-slider$: |
        .slider {
          border: dashed blue !important;
        }

End of Slider Styling Section

Buttons Styling

If you have control buttons they can be styled like this:
for the light card it seems that nth-child starts at 2 for some reason?

Change the icon type/mdi.


add + 1 to the nth-child for each button in your card. if you have the volume controls enabled that button needs to be styled seperately. the first button on the volume control page is nth-child(2).

card_mod:
  style:
    mushroom-media-player-media-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          --card-mod-icon: mdi:mushroom;
        }
    mushroom-media-player-volume-control$:
      mushroom-button:nth-child(2)$: |
        .button ::slotted(*) {
          --card-mod-icon: mdi:mushroom;
        }
    mushroom-button$: |
      .button  ::slotted(*) {
        --card-mod-icon: mdi:mushroom;
      }

Change the icon color.


add + 1 to the nth-child for each button in your card. the first button on the volume control page is nth-child(2).

card_mod:
  style:
    mushroom-media-player-media-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          --card-mod-icon-color: orange;
        }
    mushroom-media-player-volume-control$:
      mushroom-button:nth-child(2)$: |
        .button ::slotted(*) {
          --card-mod-icon-color: orange;
        }
    mushroom-button$: |
      .button  ::slotted(*) {
        --card-mod-icon-color: orange;
      }

Change icon size.


add + 1 to the nth-child for each button in your card. the first button on the volume control page is nth-child(2).

card_mod:
  style:
    mushroom-media-player-media-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          --control-icon-size: 50px;
        }
    mushroom-media-player-volume-control$:
      mushroom-button:nth-child(2)$: |
        .button ::slotted(*) {
          --control-icon-size: 50px;
        }
    mushroom-button$: |
      .button  ::slotted(*) {
        --control-icon-size: 50px;
      }

Rotate Icon.


add + 1 to the nth-child for each button in your card. the first button on the volume control page is nth-child(2).

card_mod:
  style:
    mushroom-media-player-media-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          rotate: 40deg;
        }
    mushroom-media-player-volume-control$:
      mushroom-button:nth-child(2)$: |
        .button ::slotted(*) {
          rotate: 40deg;
        }
    mushroom-button$: |
      .button  ::slotted(*) {
        rotate: 40deg;
      }

Offset/Pad Icon.


add + 1 to the nth-child for each button in your card. the first button on the volume control page is nth-child(2).

card_mod:
  style:
    mushroom-media-player-media-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          padding-right: 100px;
          padding-left: 10px;
          padding-bottom: 20px;
          width: 150px;
        }
    mushroom-media-player-volume-control$:
      mushroom-button:nth-child(2)$: |
        .button ::slotted(*) {
          padding-right: 100px;
          padding-left: 10px;
          padding-bottom: 20px;
          width: 150px;
        }
    mushroom-button$: |
      .button  ::slotted(*) {
        padding-right: 100px;
        padding-left: 10px;
        padding-bottom: 20px;
        width: 150px;
      }

Animate the Icon.

add + 1 to the nth-child for each button in your card. the first button on the volume control page is nth-child(2). you will need to put your keyframes outside of the ha-icon as per the below.

card_mod:
  style:
    mushroom-media-player-media-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          animation: wobbling 0.7s linear infinite alternate;
        }
        @keyframes wobbling {
          0% {transform: rotate(-80deg);}
          100% {transform: rotate(40deg);}
        }
    mushroom-media-player-volume-control$:
      mushroom-button:nth-child(2)$: |
        .button ::slotted(*) {
          animation: wobbling 0.7s linear infinite alternate;
        }
        @keyframes wobbling {
          0% {transform: rotate(-80deg);}
          100% {transform: rotate(40deg);}
        }
    mushroom-button$: |
      .button  ::slotted(*) {
        animation: wobbling 0.7s linear infinite alternate;
      }
      @keyframes wobbling {
        0% {transform: rotate(-80deg);}
        100% {transform: rotate(40deg);}
      }

Button Background.


add + 1 to the nth-child for each button in your card. the first button on the volume control page is nth-child(2). !important seems to be required.

card_mod:
  style:
    mushroom-media-player-media-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          background: #780000 !important;
        }
    mushroom-media-player-volume-control$:
      mushroom-button:nth-child(2)$: |
        .button {
          background: #780000 !important;
        }
    mushroom-button$: |
      .button {
        background: #780000 !important;
      }

Button Size.


add + 1 to the nth-child for each button in your card. the first button on the volume control page is nth-child(2).

card_mod:
  style:
    mushroom-media-player-media-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          height: 100px !important;
          width: 100px !important;
        }
    mushroom-media-player-volume-control$:
      mushroom-button:nth-child(2)$: |
        .button {
          height: 100px !important;
          width: 100px !important;
        }
    mushroom-button$: |
      .button {
        height: 100px !important;
        width: 100px !important;
      }

Button Location.


add + 1 to the nth-child for each button in your card. the first button on the volume control page is nth-child(2).Only margin top and left work, but negative values are allowed so you can move them anywhere you please.

card_mod:
  style:
    mushroom-media-player-media-control$: |
      mushroom-button:nth-child(1) {
        margin-top: 20px !important;
        margin-left: 37px !important;
      }
    mushroom-media-player-volume-control$: |
      mushroom-button:nth-child(2) {
        margin-top: 20px !important;
        margin-left: 37px !important;
      }
    .: |
      mushroom-button {
        margin-top: 20px !important;
        margin-left: 37px !important;
      }

Button Border/Outline.


add + 1 to the nth-child for each button in your card. the first button on the volume control page is nth-child(2). border types can be found here.

card_mod:
  style:
    mushroom-media-player-media-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          border: dashed blue !important;
        }
    mushroom-media-player-volume-control$:
      mushroom-button:nth-child(2)$: |
        .button {
          border: dashed blue !important;
        }
    mushroom-button$: |
      .button {
        border: dashed blue !important;
      }

Button Reverse Order.


You could then also flip each of the buttons around so they look right using rotation

card_mod:
  style:
    mushroom-media-player-volume-control$: |
      mushroom-slider {
        transform: scalex(-1)
      }
    .: |
      .actions {
        transform: scalex(-1)
      }

Animate buttons shape.

i would recommend adding some padding to the boxes that the buttons live in just so that there is space for the animation. you will need to put your keyframes outside of the .button, like the below.

card_mod:
  style:
    mushroom-media-player-media-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          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;}
        }
    mushroom-media-player-volume-control$:
      mushroom-button:nth-child(2)$: |
        .button {
          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;}
        }
    mushroom-button$: |
      .button {
        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;}
      }
    .: |
      mushroom-media-player-media-control {
        padding: 10px;
        height: 40px;
      }
      mushroom-media-player-volume-control {
        padding: 10px;
        height: 40px;
      }
      mushroom-button {
        padding: 10px;
        height: 40px;
      }

End of Buttons Styling Section

End of Media Card Section

[dimitri.landerloos]

Person Card

Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.

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

Change the icon color.

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

Change icon size.

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

Rotate Icon.

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

Offset/Pad Icon.

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.

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.

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

Shape Size.

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.

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”?

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;
        border-radius: 10px !important;
      }

Shape Outline/Border.

the different border types can be found here.

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

Shape Animation.

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.

Note that any buttons also seem to change color according to this color. you can style the buttons seperately which you will see later in the guide.

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

Background outline/border.

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.

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.

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.

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.

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.

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

you will need to put your keyframes outside of the ha-card, like the below.

card_mod:
  style: |
    ha-card {
      border-radius: 20px !important;
      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.

maybe dont use Wingdings

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

Change Font Style.

Font styles can be found here.

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

Change Font Variant.

Font variants can be found here.

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

Change Font Size.

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.

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

Different allignment options can be found here.

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

Change Rows.

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 Person card does not have selection value.

End of Selection Value Styling Section

Badge Icon Styling

You can style the badge icon like this:

Change the icon type/mdi.

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

Change the icon color.

card_mod:
  style: |
    mushroom-badge-icon {
      --icon-color: orange;
    }

Change icon size.

card_mod:
  style: |
    mushroom-badge-icon {
      --badge-icon-size: 40px;
    }

Rotate Icon.

card_mod:
  style: |
    mushroom-badge-icon {
      rotate: 30deg;
    }

Offset/Pad Icon.

card_mod:
  style:
    mushroom-badge-icon$: |
      ha-icon {
        padding-right: 10px;
        padding-left: 5px;
        padding-bottom: 10px;
        height: 20px;
        width: 0px;
      }

Animate the Icon.

If you are using an animation you need to put your keyframes outside of the mushroom-badge-icon, like the below.

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

End of Badge Icon Styling Section

Badge Icon Background/Shape Styling

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

Shape Color.

looks like !important is required.

card_mod:
  style: |
    mushroom-badge-icon {
      --main-color: blue !important;
    }

Shape Size.

You should set the icon size to 12px as this is the standard size for badges in mushroom cards. you are then free to change the size of the shape without affecting the icon.

card_mod:
  style: |
    mushroom-badge-icon {
      --badge-icon-size: 12px;
      --badge-size: 30px;
    }

Shape Shadow.

Left with shadow, right standard without shadow.

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

Shape “Shape”?

Note that it doesnt seem like you can use negative values here.

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

Shape Outline/Border.

the different border types can be found here.

card_mod:
  style:
    mushroom-badge-icon$: |
      .badge {
        border: 2.5px outset blue
      }

Shape Animation.

If you are using an animation you need to put your keyframes outside of the .badge, like the below.

card_mod:
  style:
    mushroom-badge-icon$: |
      .badge {
        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;}
      }

Badge Location.

card_mod:
  style: |
    mushroom-badge-icon {
      margin-right: 32px !important;
    }

End of Badge Icon Shape Styling Section

Slider Styling

N/A Person Card does not have a slider.

End of Slider Styling Section

Buttons Styling

N/A Person Card does not have control buttons.

End of Buttons Styling Section

End of Person Card Section

Select Card

Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.

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

Change the icon color.

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

Change icon size.

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

Rotate Icon.

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

Offset/Pad Icon.

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.

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.

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

Shape Size.

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.

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”?

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;
        border-radius: 10px !important;
      }

Shape Outline/Border.

the different border types can be found here.

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

Shape Animation.

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.

Note that the selection box also changes color… you can style this seperately which you will see later in the guide.

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

Background outline/border.

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.

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.

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.

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.

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.

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

you will need to put your keyframes outside of the ha-card, like the below.

card_mod:
  style: |
    ha-card {
      border-radius: 20px !important;
      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

Text can be styled like this:

Change Font.

Note that this doesnt affect the selection value. this can be styled seperately, which you will see in the selection value section. maybe dont use Wingdings

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

Change Font Style.

Font styles can be found here.

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

Change Font Variant.

Font variants can be found here.

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

Change Font Size.

Note that this doesnt affect the selection value. this can be styled seperately, which you will see in the selection value section. 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.

Note that this doesnt affect the selection value. this can be styled seperately, which you will see in the selection value section. 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

Note that this doesnt affect the selection value. this can be styled seperately, which you will see in the selection value section. Different allignment options can be found here.

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

Change Rows.

Note that this doesnt affect the selection value. this can be styled seperately, which you will see in the selection value section. 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

You can style the text that results from you selection with the dropdown like this:

Change Font.

!important is required. maybe dont use Wingdings

card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$: |
        .mdc-select__selected-text {
          font-family: "Wingdings 2" !important;
        }

Change Font Style.

Font styles can be found here.

card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$: |
        .mdc-select__selected-text {
           font-style: italic;
        }

Change Font Variant.
Font Variants do not seem to be supported for the selection value unfortunately. you will have to use a different font entirely to get the desired look.

Change Font Size.

!important is reqired. Careful, the dropdown doesnt grow with the font size.

card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$: |
        .mdc-select__selected-text {
          font-size: 30px !important;
        }

Change Font Color.

!important is required.

card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$: |
        .mdc-select__selected-text {
           color: green !important;
        }

Change Alligment

Different allignment options can be found here.
note that this does only seem to affect the vertical position of the value. it also doesnt move very much in general.

card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$: |
        .mdc-select__selected-text-container {
          align-items: start !important;
        }

Background

card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$: |
        .mdc-select__anchor{
          background: red !important
        }

Dropdown icon color.

You can style it overall one color. or seperate for open and closed.
Overall:

card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$: |
        .mdc-select__dropdown-icon {
          fill: red !important
        }

Open/Closed.

card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$: |
        .mdc-select__dropdown-icon-inactive {
          fill: red !important;
        }
        .mdc-select__dropdown-icon-active {
          fill: green !important;
        }

Border.

card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$: |
        .mdc-select__anchor{
          border: 1px red dashed !important
        }

List items box size.

credit @Ildar_Gabdullin for his amazing resource on mdc styling. check it out here.

card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$: 
        mwc-menu $: |
          mwc-list {
            max-height: 96px !important;
          }

list items spacing.

credit @Ildar_Gabdullin for his amazing resource on mdc styling. check it out here.

card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$:
        mwc-menu $: |
          mwc-list {
            --mdc-menu-item-height: 16px;
          }

list item color.

credit @Ildar_Gabdullin for his amazing resource on mdc styling. check it out here.
colors current selection, background and other options seperately.

card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$: |
        mwc-menu {
          --mdc-theme-text-primary-on-background: red;
          --mdc-theme-primary: green;
          --mdc-theme-surface: lightyellow;
        }

End of Selection Value Styling Section

Badge Icon Styling

N/A Select Card does not have a badge icon.

End of Badge Icon Shape Styling Section

Slider Styling

N/A Select Card does not have a slider.

End of Slider Styling Section

Buttons Styling

N/A Select Card does not have control buttons.

End of Buttons Styling Section

End of Select Card Section

[dimitri.landerloos]

Template Card

Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.

Of course for the template card you could also just use the visual editor…

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

Change the icon color.

Of course for the template card you could also just use the visual editor…

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

Change icon size.

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

Rotate Icon.

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

Offset/Pad Icon.

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.

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.

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

Shape Size,

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.

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”?

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;
        border-radius: 10px !important;
      }

Shape Outline/Border.

the different border types can be found here.

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

Shape Animation.

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.

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

Background outline/border.

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.

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.

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.

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.

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.

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

remember to put your keyframes outside of your ha-card.

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.

maybe dont use Wingdings

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

Change Font Style.

Font styles can be found here.

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

Change Font Variant.

Font variants can be found here.

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

Change Font Size.

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.

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

Different allignment options can be found here.

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

Change Rows.

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 Template Card does not have a selection value.

End of Selection Value Styling Section

Badge Icon Styling

You can style the badge icon like this:

Change the icon type/mdi.

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

Change the icon color.

card_mod:
  style: |
    mushroom-badge-icon {
      --icon-color: orange;
    }

Change icon size.

card_mod:
  style: |
    mushroom-badge-icon {
      --badge-icon-size: 40px;
    }

Rotate Icon.

card_mod:
  style: |
    mushroom-badge-icon {
      rotate: 30deg;
    }

Offset/Pad Icon.

card_mod:
  style:
    mushroom-badge-icon$: |
      ha-icon {
        padding-right: 10px;
        padding-left: 5px;
        padding-bottom: 10px;
        height: 20px;
        width: 0px;
      }

Animate the Icon.

If you are using an animation you need to put your keyframes outside of the mushroom-badge-icon, like the below.

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

End of Badge Icon Styling Section

Badge Icon Background/Shape Styling

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

Shape Color.

looks like !important is required.

card_mod:
  style: |
    mushroom-badge-icon {
      --main-color: blue !important;
    }

Shape Size.

You should set the icon size to 12px as this is the standard size for badges in mushroom cards. you are then free to change the size of the shape without affecting the icon.

card_mod:
  style: |
    mushroom-badge-icon {
      --badge-icon-size: 12px;
      --badge-size: 30px;
    }

Shape Shadow.

Left with shadow, right standard without shadow.

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

Shape “Shape”?

Note that it doesnt seem like you can use negative values here.

card_mod:
  style:
    mushroom-badge-icon$: |
      .badge {
        padding-right: 40px;
        padding-left: 10px;
        padding-bottom: 10px;
        border-radius: 10px !important;
      }

Shape Outline/Border.

the different border types can be found here.

card_mod:
  style:
    mushroom-badge-icon$: |
      .badge {
        border: 2.5px outset blue
      }

Shape Animation.

If you are using an animation you need to put your keyframes outside of the .badge, like the below.

card_mod:
  style:
    mushroom-badge-icon$: |
      .badge {
        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;}
      }

Badge Location.

card_mod:
  style: |
    mushroom-badge-icon {
      margin-right: 32px !important;
    }

End of Badge Icon Shape Styling Section

Slider Styling

N/A Template Card does not have a slider.

End of Slider Styling Section

Buttons Styling

N/A Template Card does not have control buttons.

End of Button Styling Section

End of Template Card Section

Title Card

Sections are split:

Main Icon Styling

N/A Title Card does not have an icon.

End Icon Styling Section

Main Icon Background/Shape Styling

N/A Title Card does not have an icon background/shape.

End Shape/Icon Background Styling Section

Card Styling

The card body itself can be styled like this:

Background Color.

!important is required.

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

Background outline/border.

!important is required. 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 !important;
    }

Card shadow.

You can use this to both add a shadow and remove one.
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.

I have set a border for this just so you can see the change. 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;
      border: white solid 1px !important;
    }

Card padding.

I have set a border for this just so you can see the change.
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;
      border: white solid 1px !important;
    }

Card margins.

I have set a border for this just so you can see the change. 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;
      border: white solid 1px !important;
    }

Card Border/Corner Radius.

I have set a border for this just so you can see the change. 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

remember to put your keyframes outside of your ha-card.

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.

maybe dont use Wingdings

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

Change Font Style.

Font styles can be found here.

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

Change Font Variant.

Font variants can be found here.

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

Change Font Size.

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: |
    ha-card {
      --title-font-size: 40px !important;
      --subtitle-font-size: 10px !important;
    }

Change Font Color.

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: |
    ha-card {
      --card-primary-color: blue;
      --card-secondary-color: orange;
    }

Change Alligment

There doesnt seem to be a way to do this with card mod. just use the visual editor

Change Rows.
There doesnt seem to be a way to do this with card mod unfortunately.

End of Text Styling Section

Selection Value Styling

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

End of Selection Value Styling Section

Badge Icon Styling

N/A Title Card does not have badge icons.

End of Badge Icon Styling Section

Badge Icon Background/Shape Styling

N/A Title Card does not have badge icons.

End of Badge Icon Shape Styling Section

Slider Styling

N/A Title Card does not have a slider.

End of Slider Styling Section

Buttons Styling

N/A Title Card does not have control buttons.

End of Button Styling Section

End of Title Card Section

[dimitri.landerloos]

Update Card

Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.

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

Change the icon color.

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

Change icon size.

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

Rotate Icon.

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

Offset/Pad Icon.

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.

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.

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

Shape Size.

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.

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”?

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;
        border-radius: 10px !important;
      }

Shape Outline/Border.

the different border types can be found here.

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

Shape Animation.

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.

Note that any buttons also seem to change color according to this color. you can style the buttons seperately which you will see later in the guide.

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

Background outline/border.

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.

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.

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.

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.

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.

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

remember to put your keyframes outside of the ha-card.

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.

maybe dont use Wingdings

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

Change Font Style.

Font styles can be found here.

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

Change Font Variant.

Font variants can be found here.

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

Change Font Size.

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.

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

Different allignment options can be found here.

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

Change Rows.

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 Update Card does not a selection value.

End of Selection Value Styling Section

Badge Icon Styling

N/A Update Card does not have badge icons.

End of Badge Icon Styling Section

Badge Icon Background/Shape Styling

N/A Update Card does not have badge icons.

End of Badge Icon Shape Styling Section

Slider Styling

N/A Update Card does not have a slider.

End of Slider Styling Section

Buttons Styling

If you have control buttons they can be styled like this:

Change the icon type/mdi.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.

card_mod:
  style:
    mushroom-update-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          --card-mod-icon: mdi:mushroom;
        }

Change the icon color.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.

card_mod:
  style:
    mushroom-update-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          --card-mod-icon-color: orange;
        }

Change icon size.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.

card_mod:
  style:
    mushroom-update-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          --control-icon-size: 30px;
        }

Rotate Icon.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.

card_mod:
  style:
    mushroom-update-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          rotate: 40deg;
        }

Offset/Pad Icon.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.

card_mod:
  style:
    mushroom-update-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          padding-right: 30px;
          padding-left: 10px;
          padding-bottom: -20px;
          height: 40px;
          width: 50px;
        }

Animate the Icon.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit. you will need to put your keyframes outside of the ha-icon as per the below.

card_mod:
  style:
    mushroom-update-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          animation: wobbling 0.7s linear infinite alternate;
        }
        @keyframes wobbling {
          0% {transform: rotate(-80deg);}
          100% {transform: rotate(40deg);}
        }

Button Background.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.

card_mod:
  style:
    mushroom-update-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          background: #780000 !important;
        }

Button Size.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit. !important is required.

card_mod:
  style:
    mushroom-update-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          height: 50px !important;
          width: 50px !important;
        }

Button Rotation.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.

card_mod:
  style:
    mushroom-update-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          rotate: 30deg;
        }

Button Location.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit. Only margin top and left work, but negative values are allowed so you can move them anywhere you please.

card_mod:
  style:
    mushroom-update-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          margin-top: 10px !important;
          margin-left: 35px !important;
        }

Button Border/Outline.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit. border types can be found here.

card_mod:
  style:
    mushroom-update-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          border: dashed blue !important;
        }

Button Reverse Order.

yaml courtesy of @rhysb. keep in mind if you do any styling now that the nth-child(1) is now at the end instead as the order was reversed.

card_mod:
  style: |
    mushroom-update-buttons-control {  
      transform: scalex(-1);
    }

Animate buttons shape.

i have added a bit of padding so the animation fits. you will need to put your keyframes outside of the .button, like the below.

card_mod:
  style:
    mushroom-update-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          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;}
        }
    .: |
      mushroom-update-buttons-control {
        height: 40px !important;
        padding: 10px;
      }

End of Button Styling Section

End of Update Card Section

Vacuum Card

Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.

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

Change the icon color.

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

Change icon size.

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

Rotate Icon.

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

Offset/Pad Icon.

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.

You can set that the icon is animated when running from the visual editor already but you are restricted to that specific animation and only condition is on vs off. 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.

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

Shape Size.

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.

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”?

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;
        border-radius: 10px !important;
      }

Shape Outline/Border.

the different border types can be found here.

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

Shape Animation.

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.

Note that any buttons also seem to change color according to this color. you can style the buttons seperately which you will see later in the guide.

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

Background outline/border.

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.

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.

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.

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.

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.

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

remember to put your keyframes outside of the ha-card.

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.

maybe dont use Wingdings

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

Change Font Style.

Font styles can be found here.

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

Change Font Variant.

Font variants can be found here.

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

Change Font Size.

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.

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

Different allignment options can be found here.

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

Change Rows.

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 Vacuum Card does not a selection value.

End of Selection Value Styling Section

Badge Icon Styling

N/A Vacuum Card does not have badge icons.

End of Badge Icon Styling Section

Badge Icon Background/Shape Styling

N/A Vacuum Card does not have badge icons.

End of Badge Icon Shape Styling Section

Slider Styling

N/A Vacuum Card does not have a slider.

End of Slider Styling Section

Buttons Styling

If you have control buttons they can be styled like this:

Change the icon type/mdi.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.

card_mod:
  style:
    mushroom-vacuum-commands-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          --card-mod-icon: mdi:mushroom;
        }

Change the icon color.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.

card_mod:
  style:
    mushroom-vacuum-commands-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          --card-mod-icon-color: orange;
        }

Change icon size.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.

card_mod:
  style:
    mushroom-vacuum-commands-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          --control-icon-size: 30px;
        }

Rotate Icon.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.

card_mod:
  style:
    mushroom-vacuum-commands-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          rotate: 40deg;
        }

Offset/Pad Icon.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.

card_mod:
  style:
    mushroom-vacuum-commands-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          padding-right: 30px;
          padding-left: 10px;
          padding-bottom: -20px;
          height: 40px;
          width: 50px;
        }

Animate the Icon.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit. you will need to put your keyframes outside of the ha-icon as per the below.

card_mod:
  style:
    mushroom-vacuum-commands-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          animation: wobbling 0.7s linear infinite alternate;
        }
        @keyframes wobbling {
          0% {transform: rotate(-80deg);}
          100% {transform: rotate(40deg);}
        }

Button Background.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.

card_mod:
  style:
    mushroom-vacuum-commands-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          --bg-color: #780000;
        }

Button Size.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit. !important is required.

card_mod:
  style:
    mushroom-vacuum-commands-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          height: 50px !important;
          width: 50px !important;
        }

Button Rotation.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.

card_mod:
  style:
    mushroom-vacuum-commands-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          rotate: 30deg;
        }

Button Location.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit. Only margin top and left work, but negative values are allowed so you can move them anywhere you please.

card_mod:
  style:
    mushroom-vacuum-commands-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          margin-top: 10px !important;
          margin-left: 35px !important;
        }

Button Border/Outline.

increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit. border types can be found here.

card_mod:
  style:
    mushroom-vacuum-commands-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          border: dashed blue !important;
        }

Button Reverse Order.

yaml courtesy of @rhysb. keep in mind if you do any styling now that the nth-child(1) is now at the end instead as the order was reversed.

card_mod:
  style: |
    mushroom-vacuum-commands-control {  
      transform: scalex(-1);
    }

Animate buttons shape.

i have added a bit of padding so the animation fits. you will need to put your keyframes outside of the .button, like the below.

card_mod:
  style:
    mushroom-vacuum-commands-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          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;}
        }
    .: |
      mushroom-vacuum-commands-control {
        padding: 10px;
      }

End of Button Styling Section

End of Vacuum Card Section

[dimitri.landerloos]

just posted

[paddy0174 (Patrick)]

That is one hell of an impressive guide you wrote! Wow!

Thanks so much, already set a bookmark, because I know, I’ll need and use this guide a lot!

[Elical]

Thanks for this, it’s very helpful

[VBrenner (V)]

Is there a way to swap around Icon and Text? Align-items End but first goes Icon and to the left of it goes text?

[dimitri.landerloos]

Like this?

card_mod:
  style:
    mushroom-state-info$: |
      .container {
        align-items: end;
        transform: scalex(-1);
      }
    .: |
      ha-card {
        transform: scalex(-1);
      }

[VBrenner (V)]

yes, but my end result wasn’t as good as yours

      style:
        mushroom-state-info$: |
          .container {
            align-items: end;
            transform: scalex(-1)
          }
        .: |
          ha-card {
            transform: scalex(-1)
            background: none;
            border-width: 0;
          }

[VBrenner (V)]

@dimitri.landerloos

card_mod:
  style:
    mushroom-state-info$: |
      .container {
        align-items: end;
        transform: scalex(-1)
      }
    .: |
      ha-card {
        transform: scalex(-1)
      }

ignore me, found an issue. it was | after style

[VBrenner (V)]

Another one - how do you apply styling to all cards in the Grid card vs. going one by one? e.g if you have a Grid of Mushroom Entity cards

[dimitri.landerloos]

You would have to have a standard style set in your theme yaml. But that will apply to all cards in your dashboard. Not just in that specific grid.

Otherwise you will have to go one by one.

[VBrenner (V)]

hmmm… can you talk more about how to do it in theme.yaml? I am thinking that 99% of my cards have:

card_mod:
  style: |
    ha-card {
      background: none;
      border-width: 0;
    }

So if I can have that and then just adapt for outlier cards within lovelace then it will simplify things drastically

My theme is super simple for now, planning to get to it a bit later:

Absolute:
# Global
  primary-background-color: "#ffffff"  # systemGray5 light mode
  secondary-background-color: rgba(255, 255, 255, 0.9)
  
  mdc-theme-surface: var(--primary-background-color)

[dimitri.landerloos]

Try and find this section:

card-mod-card-yaml: |
    .: |
       ha-card {
         background: red;
       }

And then do your styling in there. Should work

Remember to reload your HA as theme changes dont take effect on a simple browser refresh.

[Holdestmade]

@dimitri.landerloos

Remember to reload your HA as theme changes dont take effect on a simple browser refresh.

You can reload your themes when you do a change without an HA restart, there’s a service:

service: frontend.reload_themes

[dimitri.landerloos]

thank you. not so familiar with themes as i do all my styling in cards. so appreciate the input

[VBrenner (V)]

nothing happened… but this one worked through Themes.yaml:

ha-card-border-width: 0px
ha-card-border-color: transparent