Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1.
But it was suggested in a comment to post it here as a guide instead.

However, i have changed the scope when making this topic to where i will go through each card 1 by 1 to show the options for styling with Card Mod. it is a lot more thorough now than before.

Also just wanted to add that alot of the time there is more than 1 way to complete these same things, and its hard to find out what the “best” way is. so if you find a way that you think is better/easier. let me know in a message, and i will change it here :slight_smile:

Below info is true as of Mushroom Version 3.1.0 and Card Mod Version 3.2.2
(you can also optionally use a theme like i do. i use Minimalist Version 1.3.6).

I have had to post each section in the comments this post to stay under the character limit :slight_smile:

More Information:

Extra Card Mod Information
Colors

Anytime that color is being referred to you tend to have a few options on how to give a color.

Named color.
image

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

Hex color.
image

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

Hex color with an alpha channel to give opacity. (not supported for some browsers, namely internet explorer.)
image

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

RGB color.
image

card_mod:
  style: |
    ha-state-icon {
      color: rgb(10, 200, 250)
    }

RGBA color has an alpha channel to give opacity .
image

card_mod:
  style: |
    ha-state-icon {
      color: rgba(200, 10, 250, 0.4 )
    }

there may be more options for colors like hsl hsla that work. but these are the main ones :slight_smile:

You can also use gradients like this. (however it seems to only work for backgrounds. i have also removed the border of the card as the color seems to spill onto it .) linea gradient options here.
image

card_mod:
  style: |
    ha-card {
      background: linear-gradient(to bottom right, rgba(0, 150, 4, 1) 30%, rgba(3, 74, 255, 1) 100%);
      border: none;
    }

You can also set an entity image instead like this. courtesy of @rhysb. (again ive removed the border asi seem to have some color spill.)
image

card_mod:
  style: |
    ha-card {
      background-image: url( '{{ state_attr( "media_player.dimitris_pc", "entity_picture" ) }}' );
      background-blend-mode: overlay;
      border: none;
    }
Templating inside card mod

if you have if statements or any other templating i find following the below principles works best.
card mod is very forgiving however.

if statements. i find it best to follow the below structure with if statements. it is just the easiest to read (at least in my opinion.)
image
put any variable that isnt chaging depending on the if statement at the top. then have your if statement and indent you variable one in after the if statements to show the blocks properly.

card_mod:
  style: |
    ha-card {
      border: white 1px dashed;
      {% if states('media_player.dimitris_pc') == 'playing' %}
        background: blue;
      {% else %}
        background: grey;
      {% endif %}
    }

i wouldnt recommend doing this for example despite the fact that card mod will allow it and it works the same. it just makes the config hard to read.

card_mod:
  style: |
    {% if states('media_player.dimitris_pc') == 'playing' %}
      ha-card {
        border: white 1px dashed;
        background: blue;
      }
    {% else %}
      ha-card {
        border: white 1px dashed;
        background: grey;
      }
    {% endif %}

You can add comments to you code like this:
just wrap your comment in /* comment */

card_mod:
  style: |
    ha-card {
      /* Sets a white border */
      border: white 1px dashed;
      /* checks if the media player is playing */
      {% if states('media_player.dimitris_pc') == 'playing' %}
        /* if media player is playing sets background blue */
        background: blue;
      {% else %}
        /* if media player is anything other than playing sets background grey */
        background: grey;
      {% endif %}
    }
Style mushroom card inside of browser mod pop up

You just need to put your card mod config under the pop up card rather than the main card.

type: custom:mushroom-template-card
primary: Hello, Community
secondary: How are you?
icon: mdi:home
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      content:
        type: custom:mushroom-template-card
        primary: Hello, Community
        secondary: How are you?
        icon: mdi:home
        card_mod:
          style: |
            ha-card {
              border: white 1px dashed;
              {% if states('media_player.dimitris_pc') == 'playing' %}
                background: blue;
              {% else %}
                background: grey;
              {% endif %}
            }

@rhysb’s amazing animation resource link here. please however check my animation link here with an update on these animations as the way that animations are applied to icons has changed since these posts. however if you like any of these animations dont like my post like the original post. I didnt put the effort into creating them, i just updated them.

@Ildar_Gabdullin’s amazing resources on general card mod information here.

and then of course a massive thanks to the creators of the card and utilities being used @piitaya for mushroom cards and @thomasloven for the card mod utility.

44 Likes

Alarm Control Panel Card

Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.
image

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

Change the icon color.
image

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

Change icon size.
image

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

Rotate Icon.
image

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

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

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

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

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

End Icon Styling Section

Main Icon Background/Shape Styling

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

Shape Color.
image

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

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

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

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

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

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

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

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

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

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

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

End Shape/Icon Background Styling Section

Card Styling

The card body itself can be styled like this:

Background Color.
image
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.
image
Note that setting a border size does seem to change the actual card size slightly. border types can be found here.

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

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

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

Remove Shadow.

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

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

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

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

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

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

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

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

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

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

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

End of Card Styling Section

Text Styling

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

Change Font.
image
maybe dont use Wingdings :wink:

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

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

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

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

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

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

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

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

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

Change Alligment
image
Different allignment options can be found here.

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

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

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

End of Text Styling Section

Selection Value Styling

N/A Alarm Control Panel Card does not a selection value.

End of Selection Value Styling Section

Badge Icon Styling

N/A Alarm Control Panel Card does not have badge icons.

End of Badge Icon Styling Section

Badge Icon Background/Shape Styling

N/A Alarm Control Panel Card does not have badge icons.

End of Badge Icon Shape Styling Section

Slider Styling

N/A Alarm Control Panel 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.
image
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-button:nth-child(1):
      $: |
        ha-icon {
          --card-mod-icon: mdi:mushroom;
        }

Change the icon color.
image
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-button:nth-child(1):
      $: |
        ha-icon {
          --card-mod-icon-color: orange;
        }

Change icon size.
image
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-button:nth-child(1):
      $: |
        ha-icon {
          --control-icon-size: 30px;
        }

Rotate Icon.
image
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-button:nth-child(1):
      $: |
        ha-icon {
          rotate: 40deg;
        }

Offset/Pad Icon.
image
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-button:nth-child(1):
      $: |
        ha-icon {
          padding-right: 30px;
          padding-left: 10px;
          padding-bottom: -20px;
          height: 40px;
          width: 50px;
        }

Animate the Icon.
Untitled video - Made with Clipchamp (8)
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-button:nth-child(1):
      $: |
        ha-icon {
          animation: wobbling 0.7s linear infinite alternate;
        }
        @keyframes wobbling {
          0% {transform: rotate(-80deg);}
          100% {transform: rotate(40deg);}
        }

Button Background.
image
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-button:nth-child(1):
      $: |
        .button {
          --bg-color: #780000;
        }

Button Size.
image
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-button:nth-child(1):
      $: |
        .button {
          height: 50px !important;
          width: 50px !important;
        }

Button Rotation.
image
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-button:nth-child(1):
      $: |
        .button {
          rotate: 30deg;
        }

Button Location.
image
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-button:nth-child(1):
      $: |
        .button {
          margin-top: -50px !important;
          margin-left: 375px !important;
        {

Button Border/Outline.
image
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-button:nth-child(1):
      $: |
        .button {
          border: dashed blue !important;
        {

Button Reverse Order.
image
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-button-group {
        transform: scalex(-1);
    }

Animate buttons shape.
Untitled video - Made with Clipchamp (24)
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;}
        }

End of Button Styling Section

End of Alarm Control Panel Card Section

6 Likes

Chips Card

Sections are split:

Main Icon Styling

You can style the main icon of each chip type like this:

Change the icon type/mdi.
image
The weather chip icon cannot be modified as it is not a normal HA icon.
Note that when you have a conditional chip (like the first chip in this config is) with another chip inside of it you need to go 1 layer deeper.

card_mod:
  style:
    mushroom-conditional-chip:nth-child(1):
      mushroom-template-chip$: |
        ha-state-icon {
          --card-mod-icon: mdi:mushroom;
        }
    mushroom-entity-chip:nth-child(2)$: |
      ha-state-icon {
        --card-mod-icon: mdi:mushroom;
      }
    mushroom-action-chip:nth-child(3)$: |
      ha-state-icon {
        --card-mod-icon: mdi:mushroom;
      }
    mushroom-light-chip:nth-child(4)$: |
      ha-state-icon {
        --card-mod-icon: mdi:mushroom;
      }
    mushroom-weather-chip:nth-child(5)$: |
      ha-state-icon {
        # Cant be changed as it is not a normal HA icon.
      }
    mushroom-template-chip:nth-child(6)$: |
      ha-state-icon {
        --card-mod-icon: mdi:mushroom;
      }
    mushroom-alarm-control-panel-chip:nth-child(7)$: |
      ha-state-icon {
        --card-mod-icon: mdi:mushroom;
      }
    mushroom-back-chip:nth-child(8)$: |
      ha-state-icon {
        --card-mod-icon: mdi:mushroom;
      }
    mushroom-menu-chip:nth-child(9)$: |
      ha-state-icon {
        --card-mod-icon: mdi:mushroom;
      }

Change the icon color.
image
Some use --color and some use --icon-color. and some use both 1 for on state and 1 for off state (the light chip only.). use the appropriate one as per the below.
!important is needed for the alarm panel chip.
The weather chip icon cannot be modified as it is not a normal HA icon.
Note that when you have a conditional chip (like the first chip in this config is) with another chip inside of it you need to go 1 layer deeper.

card_mod:
  style:
    mushroom-conditional-chip:nth-child(1):
      mushroom-template-chip$: |
        ha-state-icon {
          --color: red;
        }
    mushroom-entity-chip:nth-child(2)$: |
      ha-state-icon {
        --color: red;
      }
    mushroom-action-chip:nth-child(3)$: |
      ha-state-icon {
        --color: red;
      }
    mushroom-light-chip:nth-child(4)$: |
      ha-state-icon {
        --color: red;
        --icon-color: blue;
      }
    mushroom-weather-chip:nth-child(5)$: |
      ha-state-icon {
        # Cant be changed as it is not a normal HA icon.
      }
    mushroom-template-chip:nth-child(6)$: |
      ha-state-icon {
        --color: red;
      }
    mushroom-alarm-control-panel-chip:nth-child(7)$: |
      ha-state-icon {
        --color: red !important;
      }
    mushroom-back-chip:nth-child(8)$: |
      ha-state-icon {
        --icon-color: blue;
      }
    mushroom-menu-chip:nth-child(9)$: |
      ha-state-icon {
        --icon-color: blue;
      }

You can also change the icon color for some of all of the chips in a card at once with the below instead. (not recommended, as it doesnt affect all icons).
image

card_mod:
  style: |
    ha-card {
      --color: blue;
    }

Change icon size.
image
The weather chip icon cannot be modified as it is not a normal HA icon.
Note that when you have a conditional chip (like the first chip in this config is) with another chip inside of it you need to go 1 layer deeper.

card_mod:
  style:
    mushroom-conditional-chip:nth-child(1):
      mushroom-template-chip$: |
        ha-state-icon {
          --chip-icon-size: 30px;
        }
    mushroom-entity-chip:nth-child(2)$: |
      ha-state-icon {
          --chip-icon-size: 30px;
      }
    mushroom-action-chip:nth-child(3)$: |
      ha-state-icon {
          --chip-icon-size: 30px;
      }
    mushroom-light-chip:nth-child(4)$: |
      ha-state-icon {
          --chip-icon-size: 30px;
      }
    mushroom-weather-chip:nth-child(5)$: |
      ha-state-icon {
        # Cant be changed as it is not a normal HA icon.
      }
    mushroom-template-chip:nth-child(6)$: |
      ha-state-icon {
          --chip-icon-size: 30px;
      }
    mushroom-alarm-control-panel-chip:nth-child(7)$: |
      ha-state-icon {
          --chip-icon-size: 30px;
      }
    mushroom-back-chip:nth-child(8)$: |
      ha-state-icon {
          --chip-icon-size: 30px;
      }
    mushroom-menu-chip:nth-child(9)$: |
      ha-state-icon {
          --chip-icon-size: 30px;
      }

Rotate Icon.
image
The weather chip icon cannot be modified as it is not a normal HA icon.
Note that when you have a conditional chip (like the first chip in this config is) with another chip inside of it you need to go 1 layer deeper.

card_mod:
  style:
    mushroom-conditional-chip:nth-child(1):
      mushroom-template-chip$: |
        ha-state-icon {
          rotate: 30deg;
        }
    mushroom-entity-chip:nth-child(2)$: |
      ha-state-icon {
          rotate: 30deg;
      }
    mushroom-action-chip:nth-child(3)$: |
      ha-state-icon {
          rotate: 30deg;
      }
    mushroom-light-chip:nth-child(4)$: |
      ha-state-icon {
          rotate: 30deg;
      }
    mushroom-weather-chip:nth-child(5)$: |
      ha-state-icon {
        # Cant be changed as it is not a normal HA icon.
      }
    mushroom-template-chip:nth-child(6)$: |
      ha-state-icon {
          rotate: 30deg;
      }
    mushroom-alarm-control-panel-chip:nth-child(7)$: |
      ha-state-icon {
          rotate: 30deg;
      }
    mushroom-back-chip:nth-child(8)$: |
      ha-state-icon {
          rotate: 30deg;
      }
    mushroom-menu-chip:nth-child(9)$: |
      ha-state-icon {
          rotate: 30deg;
      }

Offset/Pad Icon.
image
This one there is a couple different ones you can use, and also some different value types. i would just play around with it until you find what you like.
The weather chip icon cannot be modified as it is not a normal HA icon.
Note that when you have a conditional chip (like the first chip in this config is) with another chip inside of it you need to go 1 layer deeper.

card_mod:
  style:
    mushroom-conditional-chip:nth-child(1):
      mushroom-template-chip$: |
        ha-state-icon {
          padding-right: 30px;
          padding-left: 10px;
          height: 40px;
          width: 20px;
        }
    mushroom-entity-chip:nth-child(2)$: |
      ha-state-icon {
          padding-right: 30px;
          padding-left: 10px;
          height: 40px;
          width: 20px;
      }
    mushroom-action-chip:nth-child(3)$: |
      ha-state-icon {
          padding-right: 30px;
          padding-left: 10px;
          height: 40px;
          width: 20px;
      }
    mushroom-light-chip:nth-child(4)$: |
      ha-state-icon {
          padding-right: 30px;
          padding-left: 10px;
          height: 40px;
          width: 20px;
      }
    mushroom-weather-chip:nth-child(5)$: |
      ha-state-icon {
        # Cant be changed as it is not a normal HA icon.
      }
    mushroom-template-chip:nth-child(6)$: |
      ha-state-icon {
          padding-right: 30px;
          padding-left: 10px;
          height: 40px;
          width: 20px;
      }
    mushroom-alarm-control-panel-chip:nth-child(7)$: |
      ha-state-icon {
          padding-right: 30px;
          padding-left: 10px;
          height: 40px;
          width: 20px;
      }
    mushroom-back-chip:nth-child(8)$: |
      ha-state-icon {
          padding-right: 30px;
          padding-left: 10px;
          height: 40px;
          width: 20px;
      }
    mushroom-menu-chip:nth-child(9)$: |
      ha-state-icon {
          padding-right: 30px;
          padding-left: 10px;
          height: 40px;
          width: 20px;
      }

Animate the Icon.
Untitled video - Made with Clipchamp (9)
If you are using an animation you need to put your keyframes outside of the ha-state-icon, like the below.
The weather chip icon cannot be modified as it is not a normal HA icon.
Note that when you have a conditional chip (like the first chip in this config is) with another chip inside of it you need to go 1 layer deeper.

card_mod:
  style:
    mushroom-conditional-chip:nth-child(1):
      mushroom-template-chip$: |
        ha-state-icon {
          animation: wobbling 0.7s linear infinite alternate;
        }
        @keyframes wobbling {
          0% {transform: rotate(-80deg);}
          100% {transform: rotate(40deg);}
        }
    mushroom-entity-chip:nth-child(2)$: |
      ha-state-icon {
        animation: wobbling 0.7s linear infinite alternate;
      }
      @keyframes wobbling {
        0% {transform: rotate(-80deg);}
        100% {transform: rotate(40deg);}
      }
    mushroom-action-chip:nth-child(3)$: |
      ha-state-icon {
        animation: wobbling 0.7s linear infinite alternate;
      }
      @keyframes wobbling {
        0% {transform: rotate(-80deg);}
        100% {transform: rotate(40deg);}
      }
    mushroom-light-chip:nth-child(4)$: |
      ha-state-icon {
        animation: wobbling 0.7s linear infinite alternate;
      }
      @keyframes wobbling {
        0% {transform: rotate(-80deg);}
        100% {transform: rotate(40deg);}
      }
    mushroom-weather-chip:nth-child(5)$: |
      ha-state-icon {
        # Cant be changed as it is not a normal HA icon.
      }
    mushroom-template-chip:nth-child(6)$: |
      ha-state-icon {
        animation: wobbling 0.7s linear infinite alternate;
      }
      @keyframes wobbling {
        0% {transform: rotate(-80deg);}
        100% {transform: rotate(40deg);}
      }
    mushroom-alarm-control-panel-chip:nth-child(7)$: |
      ha-state-icon {
        animation: wobbling 0.7s linear infinite alternate;
      }
      @keyframes wobbling {
        0% {transform: rotate(-80deg);}
        100% {transform: rotate(40deg);}
      }
    mushroom-back-chip:nth-child(8)$: |
      ha-state-icon {
        animation: wobbling 0.7s linear infinite alternate;
      }
      @keyframes wobbling {
        0% {transform: rotate(-80deg);}
        100% {transform: rotate(40deg);}
      }
    mushroom-menu-chip:nth-child(9)$: |
      ha-state-icon {
        animation: wobbling 0.7s linear infinite alternate;
      }
      @keyframes wobbling {
        0% {transform: rotate(-80deg);}
        100% {transform: rotate(40deg);}
      }

End Icon Styling Section

Main Icon Background/Shape Styling

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

Shape Color.
image
image
This can be done in 2 ways. either globally for all chips in the card. or 1 at a time for each chip.

Globally. right under (or at the bottom of) the chips card.

type: custom:mushroom-chips-card
card_mod:
  style: |
    ha-card {
      --chip-background: blue;
    }

for each chip. under the individual chip type (or at the bottom of that chip type). if you have a conditional chip make sure your code is under the chip that gets shown by the conditional chip. not under the conditional chip itself.

  - type: conditional
    conditions:
      - entity: light.office_desk_lamp
        state: 'on'
    chip:
      type: template
      entity: light.office_desk_lamp
      icon: mdi:lightbulb
      card_mod:
        style: |
          ha-card {
            --chip-background: blue;
          }

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

      card_mod:
        style: |
          ha-card {
            justify-content: center;
            --chip-height: 64px;
            --chip-border-radius: 50%;
            --chip-icon-size: 18px;
          }

Shape Shadow.
image
image
Top standard for my theme (minimalist) with shadow (just extra shadow added for effect), bottom without shadow. !important seems to be required.

Add Shadow

      card_mod:
        style: |
          ha-card {
            box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.8) !important;
          }

Remove Shadow.

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

Shape “Shape”?
N/A doesnt seem like you can influence the shape much other than the border radius. covered in the Shape Size section above.

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

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

Shape Animation.
Untitled video - Made with Clipchamp (11)
If you are using an animation you need to put your keyframes outside of 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 Shape/Icon Background Styling Section

Card Styling

The card body itself can be styled like this:

Background Color.
image
!important is required.

card_mod:
  style: |
    ha-card {
      background-color: blue !important;
    }

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

card_mod:
  style: |
    ha-card {
      border: 4px blue dashed !important;
    }

Card shadow.
image
image
You can use this to both add a shadow and remove one of course the Chip Card itself has no shadow by default. !important is required.

Add Shadow.

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

Remove Shadow.

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

Card size.
image
This changes the outside size of the card. not any of the interior contents. you have to use !important it seems for height to actually change. i have added a border here to illustrate. but it isnt actually required.

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

Card padding.
image
This adds interior padding to the card for chip card it doesnt make the chips any smaller, but rather makes the card larger with a larger empty volume. border added to illustrate but not required.

card_mod:
  style: |
    ha-card {
      padding-right: 50px !important;
      padding-left: 50px!important;
      padding-bottom: 50px !important;
      padding-top: 50px !important;
      border: 2px blue dashed !important;
    }

Card margins.
image
Card margin adds blank space to the outside of the card. hard to show, but the screenshot is taken to show the added blank space on the outside of the card.

card_mod:
  style: |
    ha-card {
      margin-top: 30px;
      margin-bottom: 30px;
      margin-left: 30px;
      margin-right: 30px;
      border: 2px blue dashed !important;
    }

Card Border/Corner Radius.
image
Changes the radius of the corners. border added to illustrate but not required.

card_mod:
  style: |
    ha-card {
      border-radius: 20px !important;
      border: 2px blue dashed !important;
    }

Card Content Rows/Columns


You can change the way that chips are in rows and columns with the below.
Check out the below 2 links to find out what your options are. in general display changes the way that your chips themselves are displayed in the column/row. and flex-flow changes the layout of the chips.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow
https://www.w3schools.com/cssref/pr_class_display.php

card_mod:
  style: |
    .chip-container {
      flex-flow: column wrap !important;
      display: inline-block !important;
    }

Chip Spacing
image
You can change the space between chips like this.

card_mod:
  style: |
    .chip-container {
      --chip-spacing: 20px;
    }

End of Card Styling Section

Text Styling

Chip text can be styled like this:

Change Font.
image
You can place this under the major chip card to affect all chips in the card. or you can place it under the chip that you want to style individually. doesnt matter, code is the same.
maybe dont use Wingdings :wink:

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

Change Font Style.
image
You can place this under the major chip card to affect all chips in the card. or you can place it under the chip that you want to style individually. doesnt matter, code is the same.
Font styles can be found here.

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

Change Font Variant.
image
You can place this under the major chip card to affect all chips in the card. or you can place it under the chip that you want to style individually. doesnt matter, code is the same.
Font variants can be found here.

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

Change Font Size.
image
You can place this under the major chip card to affect all chips in the card. or you can place it under the chip that you want to style individually. doesnt matter, code is the same.

card_mod:
  style: |
    ha-card {
       --chip-font-size: 20px;
    }

Change Font Color.
image
You can change the color of text in 2 ways for chips. either accros the entire card for all chips like the below. (keep in mind that this also changes icon colours at the same time for most chip types, so it is really not recommended).

card_mod:
  style: |
    ha-card {
      --primary-text-color: blue;
    }

image
i would however recommend that you change the color on an individual level instead by placing it under the chip you are trying to style specifically. like the below:

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: light.office_desk_lamp
        state: 'on'
    chip:
      type: template
      entity: light.office_desk_lamp
      icon: mdi:lightbulb
  - type: entity
    entity: person.dimitri_landerloos
    card_mod:
      style: |
        ha-card {
          --text-color: blue;
        }

Change Alligment
Separate allignment of text with Card-Mod does not seem to work for chips unfortunately. if someone finds out a way to adjust internal text alligment in the chips let me know, or update it here! :slight_smile:

Change Rows.
Only 1 row of text in the chips. so no rows can be adjusted.

End of Text Styling Section

Selection Value Styling

N/A Chips Card does not a selection value.

End of Selection Value Styling Section

Badge Icon Styling

N/A Chips Card does not have badge icons.

End of Badge Icon Styling Section

Badge Icon Background/Shape Styling

N/A Chips Card does not have badge icons.

End of Badge Icon Shape Styling Section

Slider Styling

N/A Chips Card does not have a slider.

End of Slider Styling Section

Buttons Styling

N/A Chips Card does not have control buttons.

End of Buttons Styling Section

End of Chips Card Section

6 Likes

Climate Card

Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.
image

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

Change the icon color.
image

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

Change icon size.
image

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

Rotate Icon.
image

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

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

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

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

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

End Icon Styling Section

Main Icon Background/Shape Styling

You can style the main icon background/shape like this:
Shape Color.
image

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

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

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

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

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

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

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

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

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

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

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

End Shape/Icon Background Styling Section

Card Styling

The card body itself can be styled like this:

Background Color.
image
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.
image
Note that setting a border size does seem to change the actual card size slightly. border types can be found here.

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

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

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

Remove Shadow.

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

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

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

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

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

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

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

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

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

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

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.
image
maybe dont use Wingdings :wink:

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

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

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

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

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

Change Font Size.
image
I have not found a way to change font size for text accross the board. you have to do them individually it seems. note that this doesnt affect the value in the selection. if you want to style this go to the selection value styling section.

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

Change Font Color.
image
I have not found a way to change color for text accross the board. you have to do them individually it seems. note that this doesnt affect the value in the selection. if you want to style this go to the selection value styling section.

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

Change Alligment
image
Different allignment options can be found here.
note that this doesnt affect the value in the selection. if you want to style this go to the selection value styling section.

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

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

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

End of Text Styling Section

Selection Value Styling

You can style the number that results from you selection with buttons like this:

Change Font.
image
maybe dont use Wingdings :wink:

card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        .value {
          font-family: "Wingdings 2";
        }

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

card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        .value {
          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.
image

card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        .value {
          font-size: 30px;
        }

Change Font Color.
image
!important is required.

card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        .value {
          color: green !important;
        }

Change Alligment
image
Different allignment options can be found here.
note that this does only seem to affect the vertical position of the value.

card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        .container {
          align-items: start !important;
        }

End of Selection Value Styling Section

Badge Icon Styling

You can style the badge icon like this:

Change the icon type/mdi.
image

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

Change the icon color.
image

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

Change icon size.
image

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

Rotate Icon.
image

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

Offset/Pad Icon.
image

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

Animate the Icon.
Untitled video - Made with Clipchamp (15)
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.
image
looks like !important is required.

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

Shape Size.
image
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.
imageimage
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”?
image
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.
image
the different border types can be found here.

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

Shape Animation.
Untitled video - Made with Clipchamp (16)
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;}
      }

End of Badge Icon Shape Styling Section

Slider Styling

N/A Climate 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.
image
For some reason for these the 2 buttons are nth-child(1) and nth-child(3) and there is no 2? so just keep that in mind :slight_smile:

card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container .button:nth-child(1) {
          --card-mod-icon: mdi:mushroom;
        }

Change the icon color.
image
For some reason for these the 2 buttons are nth-child(1) and nth-child(3) and there is no 2? so just keep that in mind :slight_smile:

card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container .button:nth-child(1) {
          --card-mod-icon-color: orange;
        }

Change icon size.
image
For some reason for these the 2 buttons are nth-child(1) and nth-child(3) and there is no 2? so just keep that in mind :slight_smile:

card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container .button:nth-child(1) {
          --control-icon-size: 50px;
        }

Rotate Icon.
image
For some reason for these the 2 buttons are nth-child(1) and nth-child(3) and there is no 2? so just keep that in mind :slight_smile:

card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container .button:nth-child(1) {
          rotate: 40deg;
        }

Offset/Pad Icon.
image
For some reason for these the 2 buttons are nth-child(1) and nth-child(3) and there is no 2? so just keep that in mind :slight_smile:

card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container .button:nth-child(1) {
          padding-right: 100px;
          padding-left: 10px;
          padding-bottom: 20px;
          width: 150px;
        }

Animate the Icon.
Untitled video - Made with Clipchamp (14)
For some reason for these the 2 buttons are nth-child(1) and nth-child(3) and there is no 2? so just keep that in mind :slight_smile: you will need to put your keyframes outside of the #container .button:nth-child(1) as per the below.

card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container .button:nth-child(1) {
          animation: wobbling 0.7s linear infinite alternate;
          }
        @keyframes wobbling {
          0% {transform: rotate(-80deg);}
          100% {transform: rotate(40deg);}
        }

Button Background.
image
For some reason for these the 2 buttons are nth-child(1) and nth-child(3) and there is no 2? so just keep that in mind :slight_smile:

card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container .button:nth-child(1) {
          background: #780000;
        }

Button Size.
image
For some reason for these the 2 buttons are nth-child(1) and nth-child(3) and there is no 2? so just keep that in mind :slight_smile: !important is required. (color added to show size, not needed).

card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container .button:nth-child(1) {
          height: 50px !important;
          width: 50px !important;
          background: #780000;
        }

Button Location.
image
For some reason for these the 2 buttons are nth-child(1) and nth-child(3) and there is no 2? so just keep that in mind :slight_smile: Only margin top and left work, but negative values are allowed so you can move them anywhere you please.

card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container .button:nth-child(1) {
          margin-top: 20px !important;
          margin-left: 37px !important;
        }

Button Border/Outline.
image
For some reason for these the 2 buttons are nth-child(1) and nth-child(3) and there is no 2? so just keep that in mind :slight_smile: border types can be found here.

card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container .button:nth-child(1) {
          border: dashed blue !important;
        }

Button Reverse Order.
image
You can flip the order of the buttons, but it also flips the selection value. you can flip the selection value back again though, with the .value added code at the bottom.

card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        :host {
          transform: scalex(-1);
        }
        .value {
          transform: scalex(-1);
        }

Animate buttons shape.
Untitled video - Made with Clipchamp (23)
you will need to put your keyframes outside of the .button, like the below.

card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container .button:nth-child(1) {
          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;}
        }
        #container .button:nth-child(3) {
          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 Buttons Styling Section

End of Climate Card Section

6 Likes

Cover Card

Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.
image

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

Change the icon color.
image

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

Change icon size.
image

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

Rotate Icon.
image

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

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

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

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

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

End Icon Styling Section

Main Icon Background/Shape Styling

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

Shape Color.
image

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

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

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

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

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

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

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

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

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

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

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

End Shape/Icon Background Styling Section

Card Styling

The card body itself can be styled like this:

Background Color.
image
Note that any buttons and sliders 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.
image
Note that setting a border size does seem to change the actual card size slightly. border types can be found here.

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

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

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

Remove Shadow.

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

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

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

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

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

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

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

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

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

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

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.
image
maybe dont use Wingdings :wink:

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

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

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

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

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

Change Font Size.
image
I have not found a way to change font size for text 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.
image
I have not found a way to change color for text accross the board. you have to do them individually it seems.

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

Change Alligment
image
Different allignment options can be found here.

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

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

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

End of Text Styling Section

Selection Value Styling

N/A Cover Card has no Selection Value.

End of Selection Value Styling Section

Badge Icon Styling

N/A Cover Card has no Badge Icon.

End of Badge Icon Styling Section

Badge Icon Background/Shape Styling

N/A Cover 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.
image

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

Change Size
image
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-cover-position-control$:
      mushroom-slider$: |
        .slider {
          width: 200px !important;
          height: 200px !important;
        }
    mushroom-cover-tilt-position-control$:
      mushroom-slider$: |
        .slider {
          width: 200px !important;
          height: 200px !important;
        }
    .: |
      mushroom-cover-position-control {
        height: 200px;
      }
      mushroom-cover-tilt-position-control {
        height: 200px;
      }

Rotate slider
image
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-cover-position-control$:
      mushroom-slider$: |
        .slider {
          rotate: 90deg;
        }
    mushroom-cover-tilt-position-control$:
      mushroom-slider$: |
        .slider {
          rotate: 90deg;
        }
    .: |
      mushroom-cover-position-control {
        height: 200px;
      }
      mushroom-cover-tilt-position-control {
        height: 200px;
      }

Offset/Pad Slider
image
You have to use margin instead of padding. padding only seems to make the slider itself bigger.

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

Animate Slider Shape.
Untitled video - Made with Clipchamp (20)
Untitled video - Made with Clipchamp (22)
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-cover-position-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-cover-tilt-position-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-cover-position-control {
        padding: 10px;
        height: 40px;
      }
      mushroom-cover-tilt-position-control {
        padding: 10px;
        height: 40px;
      }

Slider Border.
image
Maybe add some padding the the box the slider lives in.

card_mod:
  style:
    mushroom-cover-position-control$:
      mushroom-slider$: |
        .slider {
          border: dashed blue !important;
        }
    mushroom-cover-tilt-position-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:

Change the icon type/mdi.
image
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. if you have the tilt or position control button it needs to be styled seperately.

card_mod:
  style:
    mushroom-cover-buttons-control$:
      mushroom-button:nth-child(1):
        $: |
          ha-icon {
            --card-mod-icon: mdi:mushroom;
          }
    mushroom-button$: |
      ha-icon {
        --card-mod-icon: mdi:mushroom;
      }

Change the icon color.
image
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. if you have the tilt or position control button it needs to be styled seperately.

card_mod:
  style:
    mushroom-cover-buttons-control$:
      mushroom-button:nth-child(1):
        $: |
          ha-icon {
            --card-mod-icon-color: orange;
          }
    mushroom-button$: |
      ha-icon {
        --card-mod-icon-color: orange;
      }

Change icon size.
image
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. if you have the tilt or position control button it needs to be styled seperately.

card_mod:
  style:
    mushroom-cover-buttons-control$:
      mushroom-button:nth-child(1):
        $: |
          ha-icon {
            --control-icon-size: 50px;
          }
    mushroom-button$: |
      ha-icon {
        --control-icon-size: 50px;
      }

Rotate Icon.
image
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. if you have the tilt or position control button it needs to be styled seperately.

card_mod:
  style:
    mushroom-cover-buttons-control$:
      mushroom-button:nth-child(1):
        $: |
          ha-icon {
             rotate: 40deg;
          }
    mushroom-button$: |
      ha-icon {
         rotate: 40deg;
      }

Offset/Pad Icon.
image
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. if you have the tilt or position control button it needs to be styled seperately.

card_mod:
  style:
    mushroom-cover-buttons-control$:
      mushroom-button:nth-child(1):
        $: |
          ha-icon {
            padding-right: 100px;
            padding-left: 10px;
            padding-bottom: 20px;
            width: 150px;
          }
    mushroom-button$: |
      ha-icon {
        padding-right: 100px;
        padding-left: 10px;
        padding-bottom: 20px;
        width: 150px;
      }

Animate the Icon.
Untitled video - Made with Clipchamp (19)
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. if you have the tilt or position control button it needs to be styled seperately. you will need to put your keyframes outside of the ha-icon as per the below.

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

Button Background.
image
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. if you have the tilt or position control button it needs to be styled seperately.
!important seems to be required.

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

Button Size.
image
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. if you have the tilt or position control button it needs to be styled seperately.
There isnt enough space to make the button any bigger so if that is your aim i would recommend making the boxes that they live in bigger as well. like the below. of course this doesnt apply if you are making the buttons smaller.

card_mod:
  style:
    mushroom-cover-buttons-control$:
      mushroom-button:nth-child(1):
        $: |
          .button {
            height: 100px !important;
            width: 100px !important;
          }
      mushroom-button:nth-child(2):
        $: |
          .button {
            height: 42px !important;
            width: 100px !important;
          }
    mushroom-button$: |
      .button {
        width: 100px !important;
        height: 43px !important;
      }
    .: |
      mushroom-cover-buttons-control {
        height: 100px !important;
      }
      mushroom-button {
        height: 100px !important;
        width: 100px !important;
      }

Button Location.
image
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. if you have the tilt or position control button it needs to be styled seperately. Only margin top and left work, but negative values are allowed so you can move them anywhere you please. you can add extra space like the above by making the boxes that the buttons live in bigger if you need it.

card_mod:
  style:
    mushroom-cover-buttons-control$:
      mushroom-button:nth-child(1):
        $: |
          .button {
            margin-top: 20px !important;
            margin-left: 37px !important;
          }
      mushroom-button:nth-child(2):
        $: |
          .button {
            margin-top: 0px !important;
            margin-left: 0px !important;
          }
    mushroom-button$: |
      .button {
        margin-top: -10px !important;
        margin-left: -37px !important;
      }

Button Border/Outline.
image
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. if you have the tilt or position control button it needs to be styled seperately. border types can be found here.

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

Button Reverse Order.
image
You can flip the order of the main buttons, but unfortunately since the tilt/position button is seperate that wont flip with it. i have added a second code snippet that flips all buttons by using margin and padding instead. it will only work if you card is standard size, if you need it for a non-standard size card play with the margin and padding values until it works for you.

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

image
image
flip all by using margin and padding instead. this doesnt work very well unless you also move the slider which i will cover better later. but i have done it in this example.

card_mod:
  style:
    mushroom-cover-buttons-control$: |
      mushroom-button:nth-child(3) {
        margin-left: -30px !important;
      }
      mushroom-button:nth-child(1) {
        margin-left: -48px !important;
      }
      mushroom-button:nth-child(2) {
        margin-left: 0px !important;
        padding-right: 30px !important;
      }
      :host {
        transform: scalex(-1);
        padding-right: 56px !important;
      }
    mushroom-cover-position-control$: |
      mushroom-slider {
        position:relative; 
        left: 46px;
      }
    mushroom-cover-tilt-position-control$: |
      mushroom-slider {
        position:relative; 
        left: 46px;
      }
    .: |
      mushroom-button {
        position:relative; 
        left: -416px;
      }

Animate buttons shape.
Untitled video - Made with Clipchamp (21)
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-cover-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: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-cover-buttons-control {
        padding: 10px;
        height: 40px;
      }
      mushroom-button {
        padding: 10px;
        height: 40px;
      }

End of Buttons Styling Section

End of Cover Card Section

6 Likes

Entity Card

Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.
image

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

Change the icon color.
image

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

Change icon size.
image

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

Rotate Icon.
image

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

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

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

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

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

End Icon Styling Section

Main Icon Background/Shape Styling

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

Shape Color.
image

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

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

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

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

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

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

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

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

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

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

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

End Shape/Icon Background Styling Section

Card Styling

The card body itself can be styled like this:

Background Color.
image

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

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

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

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

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

Remove Shadow.

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

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

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

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

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

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

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

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

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

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

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

End of Card Styling Section

Text Styling

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

Change Font.
image
maybe dont use Wingdings :wink:

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

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

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

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

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

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

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

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

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

Change Alligment
image
Different allignment options can be found here.

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

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

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

End of Text Styling Section

Selection Value Styling

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

End of Selection Value Styling Section

Badge Icon Styling

N/A Entity Card does not have badge icons.

End of Badge Icon Styling Section

Badge Icon Background/Shape Styling

N/A Entity Card does not have badge icons.

End of Badge Icon Shape Styling Section

Slider Styling

N/A Entity Card does not have a slider.

End of Slider Styling Section

Buttons Styling

N/A Entity Card does not have control buttons.

End of Button Styling Section

End of Entity Card Section

7 Likes

Media player card plz? :revolving_hearts:

Fan Card

Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.
image

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

Change the icon color.
image

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

Change icon size.
image

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

Rotate Icon.
image

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

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

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

Animate the Icon.
Untitled video - Made with Clipchamp (32)
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.
image

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

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

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

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

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

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

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

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

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

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

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

End Shape/Icon Background Styling Section

Card Styling

The card body itself can be styled like this:

Background Color.
image
Note that any buttons and sliders 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.
image
Note that setting a border size does seem to change the actual card size slightly. border types can be found here.

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

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

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

Remove Shadow.

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

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

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

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

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

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

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

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

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

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

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.
image
maybe dont use Wingdings :wink:

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

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

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

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

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

Change Font Size.
image

I have not found a way to change font size for text 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.
image
I have not found a way to change color for text accross the board. you have to do them individually it seems.

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

Change Alligment
image
Different allignment options can be found here.

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

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

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

End of Text Styling Section

Selection Value Styling

N/A Fan Card has no Selection Value.

End of Selection Value Styling Section

Badge Icon Styling

N/A Fan Card has no Badge Icon.

End of Badge Icon Styling Section

Badge Icon Background/Shape Styling

N/A Fan 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.
image

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

Change Size
image
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-fan-percentage-control$:
      mushroom-slider$: |
        .slider {
          width: 200px !important;
          height: 200px !important;
        }
    .: |
      mushroom-fan-percentage-control {
        height: 200px;
      }

Rotate slider
image
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-fan-percentage-control$:
      mushroom-slider$: |
        .slider {
          rotate: 90deg;
        }
    .: |
      mushroom-fan-percentage-control {
        height: 200px;
      }

Offset/Pad Slider
image
You have to use margin instead of padding. padding only seems to make the slider itself bigger.

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

Animate Slider Shape.
Untitled video - Made with Clipchamp (35)
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-fan-percentage-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-fan-percentage-control {
        padding: 10px;
        height: 40px;
      }

Slider Border.
image
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

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

Change the icon type/mdi.
image

card_mod:
  style:
    mushroom-fan-oscillate-control$:
      mushroom-button$: |
        ha-icon {
          --card-mod-icon: mdi:mushroom;
        }

Change the icon color.
image

card_mod:
  style:
    mushroom-fan-oscillate-control$:
      mushroom-button$: |
        ha-icon {
          --card-mod-icon-color: orange;
        }

Change icon size.
image

card_mod:
  style:
    mushroom-fan-oscillate-control$:
      mushroom-button$: |
        ha-icon {
          --control-icon-size: 50px;
        }

Rotate Icon.
image

card_mod:
  style:
    mushroom-fan-oscillate-control$:
      mushroom-button$: |
        ha-icon {
          rotate: 40deg;
        }

Offset/Pad Icon.
image

card_mod:
  style:
    mushroom-fan-oscillate-control$:
      mushroom-button$: |
        ha-icon {
          padding-right: 100px;
          padding-left: 10px;
          padding-bottom: 20px;
          width: 150px;
        }

Animate the Icon.
Untitled video - Made with Clipchamp (36)
you will need to put your keyframes outside of the ha-icon as per the below.

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

Button Background.
image
!important seems to be required.

card_mod:
  style:
    mushroom-fan-oscillate-control$:
      mushroom-button$: |
        .button {
          background: #780000 !important;
        }

Button Size.
image
There isnt enough space to make the button any bigger so if that is your aim i would recommend making the boxes that they live in bigger as well. like the below. of course this doesnt apply if you are making the buttons smaller.

card_mod:
  style:
    mushroom-fan-oscillate-control$:
      mushroom-button$: |
        .button {
          height: 100px !important;
          width: 100px !important;
        }
    .: |
      mushroom-fan-oscillate-control {
        height: 100px !important;
        width: 100px !important;
      }

Button Location.
image
Only margin top and left work, but negative values are allowed so you can move them anywhere you please. you can add extra space like the below by making the boxes that the buttons live in bigger if you need it.

card_mod:
  style:
    mushroom-fan-oscillate-control$:
      mushroom-button$: |
        .button {
          margin-top: 20px !important;
          margin-left: 37px !important;
        }
    .: |
      mushroom-fan-oscillate-control {
        height: 100px !important;
        width: 100px !important;
      }

Button Border/Outline.
image
border types can be found here.

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

Button Reverse Order.
N/A only 1 button for the fan card.

Animate buttons shape.
Untitled video - Made with Clipchamp (37)
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-fan-oscillate-control$:
      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-fan-oscillate-control {
        padding: 10px;
        height: 40px;
      }

End of Buttons Styling Section

End of Fan Card Section

Humidifier Card

Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.
image

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

Change the icon color.
image

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

Change icon size.
image

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

Rotate Icon.
image

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

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

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

Animate the Icon.
Untitled video - Made with Clipchamp (38)
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.
image

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

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

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

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

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

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

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

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

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

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

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

End Shape/Icon Background Styling Section

Card Styling

The card body itself can be styled like this:

Background Color.
image
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.
image
Note that setting a border size does seem to change the actual card size slightly. border types can be found here.

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

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

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

Remove Shadow.

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

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

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

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

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

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

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

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

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

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

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.
image
maybe dont use Wingdings :wink:

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

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

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

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

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

Change Font Size.
image
I have not found a way to change font size for text 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.
image
I have not found a way to change color for text accross the board. you have to do them individually it seems.

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

Change Alligment
image
Different allignment options can be found here.

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

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

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

End of Text Styling Section

Selection Value Styling

N/A Humidifier Card has no Selection Value.

End of Selection Value Styling Section

Badge Icon Styling

N/A Humidifier Card has no Badge Icon.

End of Badge Icon Styling Section

Badge Icon Background/Shape Styling

N/A Humidifier 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.
image

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

Change Size
image
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-fan-percentage-control$:
      mushroom-slider$: |
        .slider {
          width: 200px !important;
          height: 200px !important;
        }
    .: |
      mushroom-fan-percentage-control {
        height: 200px;
      }

Rotate slider
image
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-fan-percentage-control$:
      mushroom-slider$: |
        .slider {
          rotate: 90deg;
        }
    .: |
      mushroom-fan-percentage-control {
        height: 200px;
      }

Offset/Pad Slider
image
You have to use margin instead of padding. padding only seems to make the slider itself bigger.

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

Animate Slider Shape.
Untitled video - Made with Clipchamp (41)
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-fan-percentage-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-fan-percentage-control {
        padding: 10px;
        height: 40px;
      }

Slider Border.
image
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

N/A Humidifier Card does not have control buttons.

End of Buttons Styling Section

End of Humidifier Card Section

6 Likes
Number Card

Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.
image

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

Change the icon color.
image

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

Change icon size.
image

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

Rotate Icon.
image

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

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

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

Animate the Icon.
Untitled video - Made with Clipchamp (42)
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.
image

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

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

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

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

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

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

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

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

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

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

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

End Shape/Icon Background Styling Section

Card Styling

The card body itself can be styled like this:

Background Color.
image
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.
image
Note that setting a border size does seem to change the actual card size slightly. border types can be found here.

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

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

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

Remove Shadow.

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

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

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

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

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

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

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

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

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

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

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.
image
maybe dont use Wingdings :wink:

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

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

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

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

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

Change Font Size.
image
I have not found a way to change font size for text 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.
image
I have not found a way to change color for text accross the board. you have to do them individually it seems.

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

Change Alligment
image
Different allignment options can be found here.

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

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

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

End of Text Styling Section

Selection Value Styling

N/A 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.
image

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

Change Size
image
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
image
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
image
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.
Untitled video - Made with Clipchamp (45)
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.
image
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

N/A Number Card does not have control buttons.

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.
image

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

Change the icon color.
image

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

Change icon size.
image

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

Rotate Icon.
image

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

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

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

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

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

End Icon Styling Section

Main Icon Background/Shape Styling

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

Shape Color.
image

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

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

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

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

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

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

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

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

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

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

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

End Shape/Icon Background Styling Section

Card Styling

The card body itself can be styled like this:

Background Color.
image
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.
image
Note that setting a border size does seem to change the actual card size slightly. border types can be found here.

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

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

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

Remove Shadow.

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

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

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

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

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

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

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

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

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

Card Shape Animation
Untitled video - Made with Clipchamp (54)
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.
image
maybe dont use Wingdings :wink:

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

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

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

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

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

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

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

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

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

Change Alligment
image
Different allignment options can be found here.

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

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

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

End of Text Styling Section

Selection Value Styling

N/A 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.
image
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 :slight_smile:

card_mod:
  style:
    mushroom-lock-buttons-control$:
      mushroom-button$: |
        ha-icon {
          --card-mod-icon: mdi:mushroom;
        }

Change the icon color.
image

card_mod:
  style:
    mushroom-lock-buttons-control$:
      mushroom-button$: |
        ha-icon {
          --card-mod-icon-color: orange;
        }

Change icon size.
image

card_mod:
  style:
    mushroom-lock-buttons-control$:
      mushroom-button$: |
        ha-icon {
          --control-icon-size: 30px;
        }

Rotate Icon.
image

card_mod:
  style:
    mushroom-lock-buttons-control$:
      mushroom-button$: |
        ha-icon {
          rotate: 40deg;
        }

Offset/Pad Icon.
image

card_mod:
  style:
    mushroom-lock-buttons-control$:
      mushroom-button$: |
        ha-icon {
          padding-right: 30px;
          padding-left: 10px;
          padding-bottom: -20px;
          height: 40px;
          width: 50px;
        }

Animate the Icon.
Untitled video - Made with Clipchamp (55)
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$: |
        ha-icon {
          animation: wobbling 0.7s linear infinite alternate;
        }
        @keyframes wobbling {
          0% {transform: rotate(-80deg);}
          100% {transform: rotate(40deg);}
        }

Button Background.
image
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$: |
        .button {
          --bg-color: #780000;
        }

Button Size.
image
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$: |
        .button {
          height: 50px !important;
          width: 50px !important;
        }
      .: |
        mushroom-button {
          padding: 10px;
        }

Button Rotation.
image

card_mod:
  style:
    mushroom-lock-buttons-control$:
      mushroom-button$: |
        .button {
          rotate: 30deg;
        }

Button Location.
image
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$: |
        .button {
          margin-top: -10px !important;
          margin-left: 30px !important;
        }

Button Border/Outline.
image
border types can be found here.

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

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

Animate buttons shape.
Untitled video - Made with Clipchamp (56)
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$: |
        .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

6 Likes

Light Card
Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.
image

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

Change the icon color.
image

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

Change icon size.
image

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

Rotate Icon.
image

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

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

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

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

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

End Icon Styling Section

Main Icon Background/Shape Styling

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

Shape Color.
image

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

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

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

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

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

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

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

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

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

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

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

End Shape/Icon Background Styling Section

Card Styling

The card body itself can be styled like this:

Background Color.
image
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.
image
Note that setting a border size does seem to change the actual card size slightly. border types can be found here.

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

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

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

Remove Shadow.

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

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

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

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

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

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

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

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

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

Card Shape Animation
Untitled video - Made with Clipchamp (48)
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.
image
maybe dont use Wingdings :wink:

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

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

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

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

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

Change Font Size.
image
I have not found a way to change font size for text 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.
image
I have not found a way to change color for text accross the board. you have to do them individually it seems.

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

Change Alligment
image
Different allignment options can be found here.

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

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

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

End of Text Styling Section

Selection Value Styling

N/A 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.
image
image
image
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
image
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
image
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
image
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.
Untitled video - Made with Clipchamp (49)
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.
image
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.
image
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 seperate like you have done in other cards :slight_smile:
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):
      $: |
        ha-icon {
          --card-mod-icon: mdi:mushroom;
        }

Change the icon color.
image
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):
      $: |
        ha-icon {
          --card-mod-icon-color: orange;
        }

Change icon size.
image
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):
      $: |
        ha-icon {
          --control-icon-size: 50px;
        }

Rotate Icon.
image
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):
      $: |
        ha-icon {
          rotate: 40deg;
        }

Offset/Pad Icon.
image
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):
      $: |
        ha-icon {
          padding-right: 100px;
          padding-left: 10px;
          padding-bottom: 20px;
          width: 150px;
        }

Animate the Icon.
Untitled video - Made with Clipchamp (50)
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):
      $: |
        ha-icon {
          animation: wobbling 0.7s linear infinite alternate;
        }
        @keyframes wobbling {
          0% {transform: rotate(-80deg);}
          100% {transform: rotate(40deg);}
        }

Button Background.
image
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.
image
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.
image
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.
image
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.
image
this doesnt work very well unless you also move the slider. i have done that in this example. this wont look good on all screen sizes. adjust for the screen size it will be used on.

card_mod:
  style: |
    mushroom-button:nth-child(3) {
      position:relative; 
      left: -414px;
    }
    mushroom-button:nth-child(2) {
      position:relative; 
      left: -308px;
    }
    mushroom-light-brightness-control {
      position:relative; 
      left: 108px;
    }
    mushroom-light-color-control {
      position:relative; 
      left: 108px;
    }
    mushroom-light-color-temp-control {
      position:relative; 
      left: 108px;
    }

Animate buttons shape.
Untitled video - Made with Clipchamp (51)
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(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:nth-child(2) {
        padding: 10px;
        height: 40px;
      }

End of Buttons Styling Section

End of Light Card Section

6 Likes

Media Card
Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.
image

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

Change the icon color.
image

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

Change icon size.
image

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

Rotate Icon.
image

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

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

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

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

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

End Icon Styling Section

Main Icon Background/Shape Styling

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

Shape Color.
image

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

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

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

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

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

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

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

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

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

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

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

End Shape/Icon Background Styling Section

Card Styling

The card body itself can be styled like this:

Background Color.
image
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.
image
Note that setting a border size does seem to change the actual card size slightly. border types can be found here.

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

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

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

Remove Shadow.

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

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

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

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

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

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

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

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

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

Card Shape Animation
Untitled video - Made with Clipchamp (59)
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.
image
maybe dont use Wingdings :wink:

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

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

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

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

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

Change Font Size.
image
I have not found a way to change font size for text 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.
image
I have not found a way to change color for text accross the board. you have to do them individually it seems.

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

Change Alligment
image
Different allignment options can be found here.

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

Change Rows.
image
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
image
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
image
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
image
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.
Untitled video - Made with Clipchamp (60)
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.
image
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.
image
image
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 seperate like you have done in other cards :slight_smile:
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):
        $: |
          ha-icon {
            --card-mod-icon: mdi:mushroom;
          }
    mushroom-media-player-volume-control$:
      mushroom-button:nth-child(2):
        $: |
          ha-icon {
            --card-mod-icon: mdi:mushroom;
          }
    mushroom-button$: |
      ha-icon {
        --card-mod-icon: mdi:mushroom;
      }

Change the icon color.
image
image
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):
        $: |
          ha-icon {
             --card-mod-icon-color: orange;
          }
    mushroom-media-player-volume-control$:
      mushroom-button:nth-child(2):
        $: |
          ha-icon {
             --card-mod-icon-color: orange;
          }
    mushroom-button$: |
      ha-icon {
         --card-mod-icon-color: orange;
      }

Change icon size.
image
image
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):
        $: |
          ha-icon {
            --control-icon-size: 50px;
          }
    mushroom-media-player-volume-control$:
      mushroom-button:nth-child(2):
        $: |
          ha-icon {
            --control-icon-size: 50px;
          }
    mushroom-button$: |
      ha-icon {
        --control-icon-size: 50px;
      }

Rotate Icon.
image
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):
        $: |
          ha-icon {
            rotate: 40deg;
          }
    mushroom-media-player-volume-control$:
      mushroom-button:nth-child(2):
        $: |
          ha-icon {
            rotate: 40deg;
          }
    mushroom-button$: |
      ha-icon {
        rotate: 40deg;
      }

Offset/Pad Icon.
image
image
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):
        $: |
          ha-icon {
            padding-right: 100px;
            padding-left: 10px;
            padding-bottom: 20px;
            width: 150px;
          }
    mushroom-media-player-volume-control$:
      mushroom-button:nth-child(2):
        $: |
          ha-icon {
            padding-right: 100px;
            padding-left: 10px;
            padding-bottom: 20px;
            width: 150px;
          }
    mushroom-button$: |
      ha-icon {
        padding-right: 100px;
        padding-left: 10px;
        padding-bottom: 20px;
        width: 150px;
      }

Animate the Icon.
Untitled video - Made with Clipchamp (61)
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):
        $: |
          ha-icon {
            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):
        $: |
          ha-icon {
            animation: wobbling 0.7s linear infinite alternate;
          }
          @keyframes wobbling {
            0% {transform: rotate(-80deg);}
            100% {transform: rotate(40deg);}
          }
    mushroom-button$: |
      ha-icon {
        animation: wobbling 0.7s linear infinite alternate;
      }
      @keyframes wobbling {
        0% {transform: rotate(-80deg);}
        100% {transform: rotate(40deg);}
      }

Button Background.
image
image
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.
image
image
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) {
        height: 100px !important;
        width: 100px !important;
      }
    mushroom-media-player-volume-control$: |
      mushroom-button:nth-child(2) {
        height: 100px !important;
        width: 100px !important;
      }
    .: |
      mushroom-button {
        height: 100px !important;
        width: 100px !important;
      }

Button Location.
image
image
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.
image
image
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.
image
image
You could then also flip each of the buttons around so they look right using rotation :slight_smile:

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

Animate buttons shape.
Untitled video - Made with Clipchamp (62)
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

6 Likes
Person Card

Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.
image

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

Change the icon color.
image

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

Change icon size.
image

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

Rotate Icon.
image

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

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

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

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

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

End Icon Styling Section

Main Icon Background/Shape Styling

You can style the main icon background/shape like this:
Shape Color.
image

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

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

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

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

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

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

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

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

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

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

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

End Shape/Icon Background Styling Section

Card Styling

The card body itself can be styled like this:

Background Color.
image
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.
image
Note that setting a border size does seem to change the actual card size slightly. border types can be found here.

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

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

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

Remove Shadow.

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

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

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

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

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

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

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

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

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

Card Shape Animation
Untitled video - Made with Clipchamp (65)
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.
image
maybe dont use Wingdings :wink:

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

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

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

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

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

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

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

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

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

Change Alligment
image
Different allignment options can be found here.

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

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

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

End of Text Styling Section

Selection Value Styling

N/A 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.
image

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

Change the icon color.
image

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

Change icon size.
image

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

Rotate Icon.
image

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

Offset/Pad Icon.
image

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

Animate the Icon.
Untitled video - Made with Clipchamp (66)
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.
image
looks like !important is required.

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

Shape Size.
image
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.
imageimage
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”?
image
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.
image
the different border types can be found here.

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

Shape Animation.
Untitled video - Made with Clipchamp (67)
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.
image

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.
image

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

Change the icon color.
image

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

Change icon size.
image

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

Rotate Icon.
image

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

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

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

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

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

End Icon Styling Section

Main Icon Background/Shape Styling

You can style the main icon background/shape like this:
Shape Color.
image

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

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

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

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

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

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

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

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

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

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

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

End Shape/Icon Background Styling Section

Card Styling

The card body itself can be styled like this:

Background Color.
image
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.
image
Note that setting a border size does seem to change the actual card size slightly. border types can be found here.

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

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

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

Remove Shadow.

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

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

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

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

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

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

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

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

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

Card Shape Animation
Untitled video - Made with Clipchamp (72)
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.
image
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 :wink:

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

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

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

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

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

Change Font Size.
image
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.
image
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 {
        --primary-text-color: blue;
        --secondary-text-color: orange;
      }

Change Alligment
image
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.
image
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.
image
!important is required. maybe dont use Wingdings :wink:

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

Change Font Style.
image
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.
image
!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.
image
!important is required.

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

Change Alligment
image
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
image

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

Dropdown icon color.
image
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.
image

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

List items box size.
image
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.
image
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.
image
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

6 Likes
Template Card

Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.
image
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.
image
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.
image

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

Rotate Icon.
image

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

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

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

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

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

End Icon Styling Section

Main Icon Background/Shape Styling

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

Shape Color.
image

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

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

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

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

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

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

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

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

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

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

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

End Shape/Icon Background Styling Section

Card Styling

The card body itself can be styled like this:

Background Color.
image

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

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

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

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

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

Remove Shadow.

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

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

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

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

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

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

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

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

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

Card Shape Animation
Untitled video - Made with Clipchamp (75)
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.
image
maybe dont use Wingdings :wink:

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

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

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

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

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

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

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

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

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

Change Alligment
image
Different allignment options can be found here.

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

Change Rows.
image
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.
image

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

Change the icon color.
image

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

Change icon size.
image

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

Rotate Icon.
image

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

Offset/Pad Icon.
image

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

Animate the Icon.
Untitled video - Made with Clipchamp (88)
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.
image
looks like !important is required.

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

Shape Size.
image
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.
imageimage
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”?
image
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.
image
the different border types can be found here.

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

Shape Animation.
Untitled video - Made with Clipchamp (89)
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.
image

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

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

Background outline/border.
image
!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.
imageimage
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.
image
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.
image
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.
image
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.
image
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
Untitled video - Made with Clipchamp (76)
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.
image
maybe dont use Wingdings :wink:

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

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

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

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

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

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

card_mod:
  style: |
    ha-card {
      --title-font-size: 40px !important;
      --subtitle-font-size: 10px !important;
    }

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

card_mod:
  style: |
    ha-card {
      --primary-text-color: blue;
      --secondary-text-color: orange;
    }

Change Alligment
image
There doesnt seem to be a way to do this with card mod. just use the visual editor :slight_smile:

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

6 Likes
Update Card

Sections are split:

Main Icon Styling

You can style the main icon like this:

Change the icon type/mdi.
image

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

Change the icon color.
image

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

Change icon size.
image

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

Rotate Icon.
image

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

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

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

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

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

End Icon Styling Section

Main Icon Background/Shape Styling

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

Shape Color.
image

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

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

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

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

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

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

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

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

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

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

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

End Shape/Icon Background Styling Section

Card Styling

The card body itself can be styled like this:

Background Color.
image
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.
image
Note that setting a border size does seem to change the actual card size slightly. border types can be found here.

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

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

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

Remove Shadow.

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

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

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

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

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

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

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

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

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

Card Shape Animation
Untitled video - Made with Clipchamp (79)
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.
image
maybe dont use Wingdings :wink:

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

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

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

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

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

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

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

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

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

Change Alligment
image
Different allignment options can be found here.

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

Change Rows.
image
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.
image
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):
        $: |
          ha-icon {
            --card-mod-icon: mdi:mushroom;
          }

Change the icon color.
image
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):
        $: |
          ha-icon {
            --card-mod-icon-color: orange;
          }

Change icon size.
image
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):
        $: |
          ha-icon {
            --control-icon-size: 30px;
          }

Rotate Icon.
image
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):
        $: |
          ha-icon {
            rotate: 40deg;
          }

Offset/Pad Icon.
image
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):
        $: |
          ha-icon {
            padding-right: 30px;
            padding-left: 10px;
            padding-bottom: -20px;
            height: 40px;
            width: 50px;
          }

Animate the Icon.
Untitled video - Made with Clipchamp (80)
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):
        $: |
          ha-icon {
            animation: wobbling 0.7s linear infinite alternate;
          }
          @keyframes wobbling {
            0% {transform: rotate(-80deg);}
            100% {transform: rotate(40deg);}
          }

Button Background.
image
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 {
            --bg-color: #780000;
          }

Button Size.
image
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.
image
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-button:nth-child(1):
      $: |
        .button {
          rotate: 30deg;
        }

Button Location.
image
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.
image
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.
image
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.
Untitled video - Made with Clipchamp (81)
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.
image

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

Change the icon color.
image

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

Change icon size.
image

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

Rotate Icon.
image

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

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

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

Animate the Icon.
Untitled video - Made with Clipchamp (82)
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.
image

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

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

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

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

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

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

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

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

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

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

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

End Shape/Icon Background Styling Section

Card Styling

The card body itself can be styled like this:

Background Color.
image
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.
image
Note that setting a border size does seem to change the actual card size slightly. border types can be found here.

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

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

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

Remove Shadow.

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

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

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

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

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

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

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

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

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

Card Shape Animation
Untitled video - Made with Clipchamp (84)
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.
image
maybe dont use Wingdings :wink:

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

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

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

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

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

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

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

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

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

Change Alligment
image
Different allignment options can be found here.

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

Change Rows.
image
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.
image
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):
        $: |
          ha-icon {
            --card-mod-icon: mdi:mushroom;
          }

Change the icon color.
image
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):
        $: |
          ha-icon {
            --card-mod-icon-color: orange;
          }

Change icon size.
image
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):
        $: |
          ha-icon {
            --control-icon-size: 30px;
          }

Rotate Icon.
image
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):
        $: |
          ha-icon {
            rotate: 40deg;
          }

Offset/Pad Icon.
image
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):
        $: |
          ha-icon {
            padding-right: 30px;
            padding-left: 10px;
            padding-bottom: -20px;
            height: 40px;
            width: 50px;
          }

Animate the Icon.
Untitled video - Made with Clipchamp (85)
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):
        $: |
          ha-icon {
            animation: wobbling 0.7s linear infinite alternate;
          }
          @keyframes wobbling {
            0% {transform: rotate(-80deg);}
            100% {transform: rotate(40deg);}
          }

Button Background.
image
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.
image
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.
image
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.
image
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.
image
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.
image
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.
Untitled video - Made with Clipchamp (86)
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 {
        height: 40px !important;
        padding: 10px;
      }

End of Button Styling Section

End of Vacuum Card Section

7 Likes

just posted :slight_smile:

5 Likes

That is one hell of an impressive guide you wrote! :+1: :partying_face: Wow! :slight_smile:

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

3 Likes

Thanks for this, it’s very helpful

1 Like

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?

Like this?

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

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

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