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

miketarg · November 21, 2023, 9:10pm

I so sorry to bother you.

I am having real difficulty in getting any of these to work.

The only icons I can get to animate are the fan and the media player entitys.

The switch entity won’t animate.

I feel very silly as I know I must be doing something wrong, but. I have no idea what it is?

Thanks in advance

This is my code:-

type: custom:mushroom-template-card
icon: mdi:microwave
icon_color: blue
primary: Microwave
entity: switch.microwave_switch
card_mod:
style:
mushroom-shape-icon$: |
ha-icon:before {
content: “”;
position: absolute;
width: 25%;
height: 25%;
margin: 10%;
animation: cook 1s linear infinite;
}
@keyframes cook {
0%, 100% { background: linear-gradient(90deg, white 0%, transparent 50%, transparent 100%); }
33% { background: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%); }
66% { background: linear-gradient(90deg, transparent 0%, transparent 50%, white 100%); }
}

dimitri.landerloos · November 21, 2023, 11:01pm

Please learn to format your code. Check the thread below:

Specifically section 11.

dimitri.landerloos · November 21, 2023, 11:02pm

You can do it with card mod. Have a look in the guide linked in my profile.

NovaG · November 22, 2023, 3:04am

I’m just using the MiniHass theme

---
####################### LIGHT MODE ####################
MiniHass_Light:
  # contrast
  contrast-0: "#ffffff"
  contrast-10: "#F2F2F2"
  contrast-20: "#e5e5e5"
  contrast-33: "#888888"
  contrast-66: "#444444"
  contrast-100: "#000000"

  # main interface colors
  color-green: "#39bb4f"
  hcv-color-new: "#39bb4f"
  color-yellow: rgb(253 204 18)
  color-blue: rgba(159,204,250,1)
  color-cerise: "#e0188f"
  color-purple: rgba(130,30,255)
  color-orange: "#F46036"
  color-off-grey: "#525252"
  color-red: "#E84941"
  color-teal: rgba(123,232,183,1)
  color-white: "#ffffff"
  color-off-white: "#fffff2"
  color-black: "#000000"
  
  gradient-yellow: linear-gradient(30deg, rgb(253 204 18) 0%, rgb(253 238 70) 100%)
  gradient-green: linear-gradient(120deg, rgba(120,210,155,1), rgba(205,240,200,1))
  gradient-red: linear-gradient(45deg, rgba(240,130,140,1), rgba(250,185,195,1))
  gradient-grey-cold: linear-gradient(45deg, rgba(235,244,245,1), rgba(181,198,224,1))
  gradient-blue: linear-gradient(45deg, rgba(9,116,241,1), rgba(159,204,250,1))
  gradient-orange: linear-gradient(45deg, rgba(253,125,90,1), rgba(253,172,90,1))
  gradient-teal: linear-gradient(45deg, rgba(123,232,183,1), rgba(123,232,218,1))
  gradient-purple: linear-gradient(120deg, rgb(130,30,255), rgb(170,100,250))
  gradient-purple-teal: 'linear-gradient(45deg, var(--color-purple), var(--color-teal))'
  gradient-teal-purple: 'linear-gradient(45deg, var(--color-teal), var(--color-purple))'
  gradient-black: linear-gradient(45deg, rgba(13,13,15,1), rgba(19,20,23,1))

  #glow
  glow: 0px 0px 0px 0px
  glow-color-green: 'var(--glow) var(--color-green)'
  glow-color-yellow: 'var(--glow) var(--color-yellow)'
  glow-color-dark-blue: 'var(--glow) var(--color-dark-blue)'
  glow-color-light-blue: 'var(--glow) var(--color-light-blue)'
  glow-color-cerise: 'var(--glow) var(--color-cerise)'
  glow-color-violet: 'var(--glow) var(--color-violet)'
  glow-color-orange: 'var(--glow) var(--color-orange)'
  glow-color-red: 'var(--glow) var(--color-red)'
  glow-color-white: 'var(--glow) var(--color-white)'

  # background and sidebar
  background: '#FFFFFF'

  # card
  background-neo: linear-gradient(145deg, rgba(250,250,250,.5) 25%, rgba(50,50,50,.1))
  box-shadow-neo: 5px 5px 10px rgba(50,50,50,.15), -5px -5px 10px rgba(255,255,255,.5)
  border-width: "0px"
  border-radius: "16px"
  box-shadow: "none"
  ha-card-box-shadow: "var(--box-shadow)"
  ha-card-background: '#F4F4F4'
  background-card-color: 'rgba(14,14,112, 0)'
  ha-card-border-width: "var(--border-width)"

  # Slider

  slider-bar-color: '#7ED8FC'
  slider-color: '#00468c'
  slider-secondary-color: "var(--color-orange)"
  
  # UI
  mdc-button-outline-color: "var(--color-orange)"
  mdc-theme-primary: "var(--color-red)"
  --energy-grid-consumption-color: "var(--color-red)"
  --energy-grid-return-color: "var(--color-red)"
  --energy-solar-color: "var(--color-red)"
  energy-non-fossil-color: "var(--color-red)"
  energy-battery-out-color: "var(--color-red)"
  energy-battery-in-color: "var(--color-red)"
  --energy-gas-color: "var(--color-red)"

  mini-media-player-accent-color: "var(--color-white)"
  mini-media-player-icon-color: "var(--color-white)"
  mini-media-player-base-color: "var(--color-white)"
  swiper-pagination-color: "var(--color-black)"

  #Typography (static)
  fs-xl: 4rem
  fs-1000: 2.5rem
  fs-800: 2rem
  fs-600: 1.5rem
  fs-500: 1.25rem
  fs-400: 1rem
  fs-300: 0.75rem
  fs-200: 0.5rem

  #Buttons (static)
  button-small: 30px

  #Typography (responsive)
  #fs-xl: clamp(4rem, 4vw, 8rem)
  #fs-1000: clamp(2.5rem, 2vw, 4rem)
  #fs-800: clamp(2rem, 2vw, 3rem)
  #fs-600: clamp(1.5rem, 2vw, 2.25rem)
  #fs-500: clamp(1.25rem, 2vw, 2.25rem)
  #fs-400: clamp(1rem, 1vw, 2rem)
  #fs-300: clamp(0.75rem, 2vw, 1.25rem)
  #fs-200: clamp(0.5rem, 2vw, 1rem)

  #Buttons (responsive)
  #button-small: clamp(30px, 2vw, 50px)

####################### Backend UI ####################
####################### MACHIATO ####################
  # Colors
  text: "#fdfdff"
  subtext1: "#dcdcde"
  subtext0: "#e6e7eb"

  overlay2: "#939ab7"
  overlay1: "#8087a2"
  overlay0: "#6e738d"

  surface2: "#5b6078"
  surface1: "#494d64"
  surface0: "#363a4f"

  base: "#24273a"
  mantle: "#1e2030"
  crust: "#181926"

  rosewater: "#f4dbd6"
  flamingo: "#f0c6c6"
  pink: "#f5bde6"
  mauve: "#c6a0f6"
  red: "#ed8796"
  maroon: "#ee99a0"
  peach: "#f5a97f"
  yellow: "#eed49f"
  green: "#a6da95"
  teal: "#8bd5ca"
  sky: "#91d7e3"
  sapphire: "#7dc4e4"
  blue: "#8aadf4"
  lavender: "#b7bdf8"

  # Black / White
  black: "#000000"
  white: "#FFFFFF"
  # Colors
  purple: rgb(var(--purple-rgb))
  yellow: rgb(var(--yellow-rgb))
  orange: rgb(var(--orange-rgb))
  red: rgb(var(--red-rgb))
  green: rgb(var(--green-rgb))
  blue: rgb(var(--blue-rgb))
  # Color tints
  purple-tint: rgba(var(--purple-rgb),var(--color-tint))
  yellow-tint: rgba(var(--yellow-rgb),var(--color-tint))
  orange-tint: rgba(var(--orange-rgb),var(--color-tint))
  red-tint: rgba(var(--red-rgb),var(--color-tint))
  green-tint: rgba(var(--green-rgb),var(--color-tint))
  blue-tint: rgba(var(--blue-rgb),var(--color-tint))
  # Gradients
  brightness: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.4) 0%, rgba(var(--brightness-high-rgb), 1) 100%)
  brightness-tint: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.06) 0%, rgba(var(--brightness-high-rgb), var(--color-tint)) 100%)
  temperature: linear-gradient(90deg, rgba(var(--temperature-low-rgb), 01) 0%, rgba(var(--temperature-high-rgb), 1) 100%)
  temperature-tint: linear-gradient(90deg, rgba(var(--temperature-low-rgb), var(--color-tint)) 0%, rgba(var(--temperature-high-rgb), var(--color-tint)) 100%)

  ###########################

  # Header
  app-header-background-color: var(--mantle)
  app-header-text-color: var(--text)

  # Main Interface colors
  primary-color: var(--white)
  light-primary-color: var(--primary-color)

  primary-background-color: var(--base)
  secondary-background-color: var(--base)

  # Text
  primary-text-color: var(--text)
  secondary-text-color: var(--subtext1)
  text-primary-color: var(--text)
  divider-color: var(--base)
  accent-color: var(--sky)
  disabled-text-color: var(--surface0)

  # Sidebar
  sidebar-background-color: var(--crust)
  sidebar-selected-background-color: var(--primary-background-color)

  sidebar-icon-color: var(--subtext0)
  sidebar-text-color: var(--subtext0)
  sidebar-selected-icon-color: var(--blue)
  sidebar-selected-text-color: var(--blue)

  # Buttons
  paper-item-icon-color: var(--subtext0)
  paper-item-icon-active-color: var(--primary-color)

  # States and Badges
  state-icon-color: var(--white)
  state-icon-active-color: var(--primary-color)

  state-icon-unavailable-color: var(--disabled-text-color)

  # Sliders
  paper-slider-knob-color: var(--blue)
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--blue)

  # Labels
  label-badge-background-color: var(--surface0)
  label-badge-text-color: var(--text)
  label-badge-red: var(--red)
  label-badge-green: var(--green)
  label-badge-blue: var(--blue)
  label-badge-yellow: var(--yellow)
  label-badge-gray: var(--overlay0)

  # Cards

  paper-dialog-background-color: var(--overlay0)
  paper-listbox-background-color: var(--overlay0)
  paper-card-background-color: var(--card-background-color)

  # Switches
  switch-checked-button-color: var(--green)
  switch-checked-track-color: var(--surface0)
  switch-unchecked-button-color: rgb(--overlay0)
  switch-unchecked-track-color: rgb(--surface0)
  # Toggles
  paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
  paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
  paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)

  # Table
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  data-table-background-color: var(--primary-background-color)
  mdc-checkbox-unchecked-color: var(--surface0)

  # Dropdowns
  material-background-color: var(--primary-background-color)
  material-secondary-background-color: var(--primary-background-color)
  mdc-theme-surface: var(--primary-background-color)

  # Pre/Code
  markdown-code-background-color: var(--surface0)

  # Checkboxes
  mdc-select-fill-color: var(--surface0)
  mdc-select-ink-color: var(--primary-text-color)
  mdc-select-label-ink-color: var(--subtext1)
  mdc-select-idle-line-color: var(--primary-text-color)
  mdc-select-dropdown-icon-color: var(--secondary-text-color)
  mdc-select-hover-line-color: var(--accent-color)

  # Input
  input-fill-color: var(--secondary-background-color)
  input-dropdown-icon-color: var(--secondary-text-color)
  input-ink-color: var(--primary-text-color)
  input-label-ink-color: var(--secondary-text-color)
  input-idle-line-color: var(--primary-text-color)
  input-hover-line-color: var(--accent-color)

  # Toast
  paper-toast-background-color: var(--overlay0)

  # Colors
  error-color: var(--red)
  warning-color: var(--yellow)
  success-color: var(--green)
  info-color: var(--blue)

  state-on-color: var(--green)
  state-off-color: var(--red)


####################### DARK MODE ####################
MiniHass_Dark:

  lovelace-background: 'center / cover no-repeat url("/local/images/bg1.jpg") fixed'

  # contrast
  contrast-100: rgb(255,255,255)
  contrast-66: rgb(136,136,136)
  contrast-33: rgb(68,68,68)
  contrast-20: rgb(30,30,30)
  contrast-10: rgb(17,17,17)
  contrast-0: rgb(0,0,0)

  # colors
  color-green: rgb(57,187,79)
  color-yellow: rgb(253 204 18)
  color-blue: rgb(159,204,250)
  color-cerise: rgb(224,24,143)
  color-purple: rgb(130,30,255)
  color-orange: rgb(244,96,54)
  color-off-grey: rgb(82,82,82)
  color-red: rgb(232,73,65)
  color-teal: rgb(123,232,183,1)
  color-white: rgb(255,255,255)
  color-black: rgb(0,0,0)
  gradient-yellow: linear-gradient(30deg, rgb(253 204 18) 0%, rgb(253 238 70) 100%)
  gradient-green: linear-gradient(120deg, rgba(120,210,155,1), rgba(205,240,200,1))
  gradient-red: linear-gradient(45deg, rgba(240,130,140,1), rgba(250,185,195,1))
  gradient-grey-cold: linear-gradient(45deg, rgba(235,244,245,1), rgba(181,198,224,1))
  gradient-blue: linear-gradient(45deg, rgba(9,116,241,1), rgba(159,204,250,1))
  gradient-orange: linear-gradient(45deg, rgba(253,125,90,1), rgba(253,172,90,1))
  gradient-teal: linear-gradient(45deg, rgba(123,232,183,1), rgba(123,232,218,1))
  gradient-purple: linear-gradient(120deg, rgb(130,30,255), rgb(170,100,250))
  gradient-purple-teal: 'linear-gradient(45deg, var(--color-purple), var(--color-teal))'
  gradient-teal-purple: 'linear-gradient(45deg, var(--color-teal), var(--color-purple))'
  gradient-black: linear-gradient(45deg, rgba(13,13,15,1), rgba(19,20,23,1))

  #glow
  glow: 0px 0px 15px 1px
  glow-color-green: 'var(--glow) var(--color-green)'
  glow-color-yellow: 'var(--glow) var(--color-yellow)'
  glow-color-dark-blue: 'var(--glow) var(--color-dark-blue)'
  glow-color-light-blue: 'var(--glow) var(--color-light-blue)'
  glow-color-cerise: 'var(--glow) var(--color-cerise)'
  glow-color-violet: 'var(--glow) var(--color-violet)'
  glow-color-orange: 'var(--glow) var(--color-orange)'
  glow-color-red: 'var(--glow) var(--color-red)'
  glow-color-white: 'var(--glow) var(--color-white)'

  # background and sidebar
  background: '#1b1d21'

  # card
  box-shadow-neo: 5px 5px 10px rgba(0,0,0,.5), -5px -5px 10px rgba(255,255,255,.03)

  border-width: "0px"
  border-radius: "16px"
  box-shadow: "none"

  ha-card-box-shadow: "var(--box-shadow)"
  ha-card-background: '#121316'
  ha-card-border-radius: "var(--border-radius)"
  background-card-color: 'rgba(14,14,112, 0)'
  ha-card-border-width: "var(--border-width)"

  # slider
  slider-bar-color: '#7ED8FC'
  slider-color: '#4200AA'
  slider-secondary-color: "var(--color-orange)"

  # media player
  mini-media-player-accent-color: "var(--color-white)"
  mini-media-player-icon-color: "var(--color-white)"
  mini-media-player-base-color: "var(--color-white)"

  #Typography (static)
  fs-xl: 4rem
  fs-1000: 2.5rem
  fs-800: 2rem
  fs-600: 1.5rem
  fs-500: 1.25rem
  fs-400: 1rem
  fs-300: 0.75rem
  fs-200: 0.5rem

  #Buttons (static)
  button-small: 30px

  #Typography (responsive)
  #fs-xl: clamp(4rem, 4vw, 8rem)
  #fs-1000: clamp(2.5rem, 2vw, 4rem)
  #fs-800: clamp(2rem, 2vw, 3rem)
  #fs-600: clamp(1.5rem, 2vw, 2.25rem)
  #fs-500: clamp(1.25rem, 2vw, 2.25rem)
  #fs-400: clamp(1rem, 1vw, 2rem)
  #fs-300: clamp(0.75rem, 2vw, 1.25rem)
  #fs-200: clamp(0.5rem, 2vw, 1rem)

  #Buttons (responsive)
  #button-small: clamp(30px, 2vw, 50px)

####################### Backend UI ####################
####################### MACHIATO ####################
  # Colors
  text: "#f7f7f7"
  subtext1: "#cccccc"
  subtext0: "#aaaaaa"

  overlay2: "#939ab7"
  overlay1: "#8087a2"
  overlay0: "#6e738d"

  surface2: "#5b6078"
  surface1: "#494d64"
  surface0: "#363a4f"

  base: "#24273a"
  mantle: "#1e2030"
  crust: "#181926"

  rosewater: "#f4dbd6"
  flamingo: "#f0c6c6"
  pink: "#f5bde6"
  mauve: "#c6a0f6"
  red: "#ed8796"
  maroon: "#ee99a0"
  peach: "#f5a97f"
  yellow: "#eed49f"
  green: "#7cc963"
  teal: "#8bd5ca"
  sky: "#91d7e3"
  sapphire: "#7dc4e4"
  blue: "#8aadf4"
  lavender: "#b7bdf8"

  ###########################

  # Header
  app-header-background-color: var(--mantle)
  app-header-text-color: var(--text)

  # Main Interface colors
  primary-color: var(--blue)
  light-primary-color: var(--primary-color)

  primary-background-color: var(--base)
  secondary-background-color: var(--base)

  # Text
  primary-text-color: var(--text)
  secondary-text-color: var(--subtext1)
  text-primary-color: var(--text)
  divider-color: var(--base)
  accent-color: var(--sky)
  disabled-text-color: var(--surface0)

  # Sidebar
  sidebar-background-color: var(--crust)
  sidebar-selected-background-color: var(--primary-background-color)

  sidebar-icon-color: var(--subtext0)
  sidebar-text-color: var(--subtext0)
  sidebar-selected-icon-color: var(--blue)
  sidebar-selected-text-color: var(--blue)

  # Buttons
  paper-item-icon-color: var(--subtext0)
  paper-item-icon-active-color: var(--primary-color)

  # States and Badges
  state-icon-color: var(--white)
  state-icon-active-color: var(--primary-color)

  state-icon-unavailable-color: var(--disabled-text-color)

  # Sliders
  paper-slider-knob-color: var(--blue)
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--blue)

  # Labels
  label-badge-background-color: var(--surface0)
  label-badge-text-color: var(--text)
  label-badge-red: var(--red)
  label-badge-green: var(--green)
  label-badge-blue: var(--blue)
  label-badge-yellow: var(--yellow)
  label-badge-gray: var(--overlay0)

  # Cards

  paper-dialog-background-color: var(--overlay0)
  paper-listbox-background-color: var(--overlay0)
  paper-card-background-color: var(--card-background-color)

  # Switches
  switch-checked-button-color: var(--green)
  switch-checked-track-color: var(--surface0)
  switch-unchecked-button-color: rgb(--overlay0)
  switch-unchecked-track-color: rgb(--surface0)
  # Toggles
  paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
  paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
  paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)

  # Table
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  data-table-background-color: var(--primary-background-color)
  mdc-checkbox-unchecked-color: var(--surface0)

  # Dropdowns
  material-background-color: var(--primary-background-color)
  material-secondary-background-color: var(--primary-background-color)
  mdc-theme-surface: var(--primary-background-color)

  # Pre/Code
  markdown-code-background-color: var(--surface0)

  # Checkboxes
  mdc-select-fill-color: var(--surface0)
  mdc-select-ink-color: var(--primary-text-color)
  mdc-select-label-ink-color: var(--subtext1)
  mdc-select-idle-line-color: var(--primary-text-color)
  mdc-select-dropdown-icon-color: var(--secondary-text-color)
  mdc-select-hover-line-color: var(--accent-color)

  # Input
  input-fill-color: var(--secondary-background-color)
  input-dropdown-icon-color: var(--secondary-text-color)
  input-ink-color: var(--primary-text-color)
  input-label-ink-color: var(--secondary-text-color)
  input-idle-line-color: var(--primary-text-color)
  input-hover-line-color: var(--accent-color)

  # Toast
  paper-toast-background-color: var(--overlay0)

  # Colors
  error-color: var(--red)
  warning-color: var(--yellow)
  success-color: var(--green)
  info-color: var(--blue)

  state-on-color: var(--green)
  state-off-color: var(--red)


  #######################################################
  ############### Custom global variables ###############
  #######################################################

  # Black / White
  black: "#000000"
  white: "#FFFFFF"
  # Colors
  purple: rgb(var(--purple-rgb))
  yellow: rgb(var(--yellow-rgb))
  orange: rgb(var(--orange-rgb))
  red: rgb(var(--red-rgb))
  green: rgb(var(--green-rgb))
  blue: rgb(var(--blue-rgb))
  # Color tints
  purple-tint: rgba(var(--purple-rgb),var(--color-tint))
  yellow-tint: rgba(var(--yellow-rgb),var(--color-tint))
  orange-tint: rgba(var(--orange-rgb),var(--color-tint))
  red-tint: rgba(var(--red-rgb),var(--color-tint))
  green-tint: rgba(var(--green-rgb),var(--color-tint))
  blue-tint: rgba(var(--blue-rgb),var(--color-tint))
  # Gradients
  brightness: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.4) 0%, rgba(var(--brightness-high-rgb), 1) 100%)
  brightness-tint: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.06) 0%, rgba(var(--brightness-high-rgb), var(--color-tint)) 100%)
  temperature: linear-gradient(90deg, rgba(var(--temperature-low-rgb), 01) 0%, rgba(var(--temperature-high-rgb), 1) 100%)
  temperature-tint: linear-gradient(90deg, rgba(var(--temperature-low-rgb), var(--color-tint)) 0%, rgba(var(--temperature-high-rgb), var(--color-tint)) 100%)
  # Color RGB variables
  purple-rgb: 239, 177, 255
  yellow-rgb: 255, 218, 120
  orange-rgb: 255, 181, 129
  red-rgb: 255, 145, 138
  green-rgb: 204, 233, 161
  blue-rgb: 144, 191, 255
  # Gradient RGB variables
  brightness-low-rgb: 232, 176, 29
  brightness-high-rgb: 255, 211, 94
  temperature-low-rgb: 177, 197, 255
  temperature-high-rgb: 255, 175, 131
  # Contrast variables
  black1: "#000000"
  black2: "#111318"
  black3: "#171A21"
  black4: "#1C1F27"
  black5: "#262A35"
  black6: "#353946"
  black7: "#434856"
  black8: "#535865"
  black9: "#636774"
  black10: "#777A83"
  white10: "#898C94"
  white9: "#969AA6"
  white8: "#A4A9B6"
  white7: "#B3B8C6"
  white6: "#C3C8D5"
  white5: "#D4D8E2"
  white4: "#E1E5EF"
  white3: "#EAEDF6"
  white2: "#F4F6FB"
  white1: "#FFFFFF"

  ########################################################
  ############### Variables based on modes ###############
  ########################################################

  modes:
    dark:
      # Black white contrats
      contrast1: var(--black1)
      contrast2: var(--black2)
      contrast3: var(--black3)
      contrast4: var(--black4)
      contrast5: var(--black5)
      contrast6: var(--black6)
      contrast7: var(--black7)
      contrast8: var(--black8)
      contrast9: var(--black9)
      contrast10: var(--black10)
      contrast11: var(--white10)
      contrast12: var(--white9)
      contrast13: var(--white8)
      contrast14: var(--white7)
      contrast15: var(--white6)
      contrast16: var(--white5)
      contrast17: var(--white4)
      contrast18: var(--white3)
      contrast19: var(--white2)
      contrast20: var(--white1)
      # Color tint transparancy
      color-tint: "0.15"
      # Contrast RGB variables
      contrast1-RGB: 0,0,0

    light:
      # Black white contrats
      contrast1: var(--white1)
      contrast2: var(--white2)
      contrast3: var(--white3)
      contrast4: var(--white4)
      contrast5: var(--white5)
      contrast6: var(--white6)
      contrast7: var(--white7)
      contrast8: var(--white8)
      contrast9: var(--white9)
      contrast10: var(--white10)
      contrast11: var(--black10)
      contrast12: var(--black9)
      contrast13: var(--black8)
      contrast14: var(--black7)
      contrast15: var(--black6)
      contrast16: var(--black5)
      contrast17: var(--black4)
      contrast18: var(--black3)
      contrast19: var(--black2)
      contrast20: var(--black1)
      # Color tint transparancy
      color-tint: "0.20"
      # Contrast RGB variables
      contrast1-RGB: 255,255,255

TheCrey · November 22, 2023, 7:15am

Hi there,

i hope you are all fine.
I am getting a little lost here.
There is no much experience from my side regarding this so i tried a lot an read more.

But i am still lost, all i want is to change the font size ob the mushroom title card via the card-mod.
It would be nicer to make the icons smaller too but this is not important, as i am sure i am to do so, if i figured out how to change the font size.

Here ist the yaml code:
As i mentioned i would like to have the words: " Gäste-WC" , " Badezimmer" und “Küche” much smaller, so there will be no gap between the buttons at all

Any ideas or hints on how to accomplish that ?
Thanks in advance

p.s the card-mod hacs integration is installed and it does work in generell.

square: false
type: grid
cards:
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-title-card
        title: Lüftersteuerung
        alignment: center
        title_tap_action:
          action: none
        subtitle_tap_action:
          action: none
    columns: 1
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-title-card
        title: 'Gäste-WC '
        title_tap_action:
          action: none
        subtitle_tap_action:
          action: none
      - type: custom:mushroom-entity-card
        entity: switch.gwc_luefter_stufe_1
        name: '1'
        icon: mdi:fan-speed-1
        layout: vertical
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
        secondary_info: none
        primary_info: none
      - type: custom:mushroom-entity-card
        entity: switch.gwc_luefter_stufe_2
        name: '2'
        icon: mdi:fan-speed-2
        secondary_info: none
        layout: vertical
        primary_info: none
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
    columns: 3
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-title-card
        title: Badezimmer
      - type: custom:mushroom-entity-card
        entity: switch.luefter_badezimmer_switch_1
        icon: mdi:fan-speed-1
        layout: vertical
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
      - type: custom:mushroom-entity-card
        entity: switch.luefter_badezimmer_switch_2
        icon: mdi:fan-speed-2
        layout: vertical
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-title-card
        title: Küche
      - type: custom:mushroom-entity-card
        entity: switch.luefter_kueche_switch_0
        icon: mdi:fan-speed-1
        layout: vertical
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
      - type: custom:mushroom-entity-card
        entity: switch.luefter_kueche_switch_1
        icon: mdi:fan-speed-2
        layout: vertical
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
columns: 1

dimitri.landerloos · November 22, 2023, 7:26am

Solution below. For beginners with card mod the guide in my profile will help.

Mushroom Cards Card Mod Styling/Config Guide

Change Font Size.

I have not found a way to change font size for text accross the board. you have to do them individually it seems.
card_mod:
  style: |
    ha-card {
      --title-font-size: 40px !important;
      --subtitle-font-size: 10px !important;
    }

cklit · November 22, 2023, 7:42am

That is a good looking card! Thanks for sharing!

TheCrey · November 22, 2023, 11:04am

Hi, that worked perfectly fine thanks.
Also thanks for you detailed.
I tried to resize the font of the mushroom card, as described by you, but it does not do anything there.
The Size of the card is changing but not the font.
Alone they are working, i am not getting how to combine them…

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

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

Also i have those strange gaps, any idea how i can remove them ?

dimitri.landerloos · November 22, 2023, 11:26am

Take a look at the section in the guide that says:
“What the $ and .: | symbols do”

You can only have one | in each line so your code would be like this:

card_mod:
  style: 
    mushroom-state-info$: |
      .container {
        --card-secondary-font-size: 10px;
        --card-primary-font-size: 10px;
      }
    .: |
      ha-card {
        height:80px !important;
        width: 80px;
      }

hazio · November 22, 2023, 6:22pm

Thanks, I was able to adjust the badge icon size, but the badge background (--badge-size) doesn’t seem to do anything, or am I missing something?

    mushroom-badge-icon$: |
      ha-icon {
      --badge-icon-size: 20px;!important;
      --badge-size: 40px; !important;
      }

Full code:

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
      }
    mushroom-state-info$: |
      .container {
        width: 83%;
        align-items: center;
      }
    .: |
      ha-card {
        --icon-size: 50px;
        width: fit-content;
        border-radius: 100px;
      }
    mushroom-badge-icon$: |
      ha-icon {
      --badge-icon-size: 20px; !important
      --badge-size: 40px; !important;
      }

dimitri.landerloos · November 22, 2023, 6:30pm

Try like this:

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
      }
    mushroom-state-info$: |
      .container {
        width: 83%;
        align-items: center;
      }
    .: |
      ha-card {
        --icon-size: 50px;
        width: fit-content;
        border-radius: 100px;
      }
      mushroom-badge-icon {
        --badge-icon-size: 20px !important;
        --badge-size: 40px !important;
      }

hazio · November 22, 2023, 7:19pm

Working great, thank you!

majdzik84 · November 22, 2023, 8:52pm

Great job!
Is it possible to make these badges also for avatar-picture instead of icon?

FedeL16 · November 22, 2023, 10:09pm

hi dimitri, i have a question:

this is my card_mod:

 ha-card {
      overflow: visible !important;
      margin-top: calc(-1 * var(--mush-chip-spacing, 8px));
      box-shadow: none;
      border: none;
      background: none;
      padding: var(--mush-chip-spacing, 8px);
      transition: all 0.5s;
      {% if is_state('binary_sensor.ping_dalg_pc', 'on') %}
      {% elif is_state('binary_sensor.ping_dalg_dell', 'on') %}
      {% elif is_state('input_boolean.notifications', 'on') %}
      {% elif not is_state('sensor.devices_with_low_battery', '0') %}
      {% elif is_state('input_boolean.bal', 'on') %}
      {% elif is_state('calendar.anniversaire', 'on') %}
      {% elif is_state('group.grp_update_all', 'on') %}
        margin-bottom: 0px !important;
      {% else %}
        margin-bottom: 30px !important;
      {% endif %}
    }
     

    ha-card {
      max-height: calc(100vh - var(--header-height)) !important;
      overflow-y: visible !important;
      max-width: var(--masonry-column-width, 490px) !important;
    }
    :host {
      
      position: fixed !important;
      z-index: 0 !important;
      bottom: 0px !important;
      width: 100% !important;
    }

    ha-card:before {
      content: "";
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;
      width: calc(100% - 2 * var(--ha-card-border-width, 1px));
      z-index: -1;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 35px;
      box-shadow: var(--ha-card-box-shadow);
      border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
      {% if is_state('media_player.tutti_i_media', ['playing', 'paused']) %}
        background: linear-gradient(135deg, rgba({{ states('sensor.dark_vibrant_color') }}, 0.85), rgba({{ states('sensor.dark_muted_color') }}, 0.75));
      {% else %}
        background: rgba(var(--rgb-card-background-color), 0.20);
      {% endif %}

if i want delete the overflow and continue to use the card to fix at bottom when an input_bolean is on, and when its state as off use the code card posted, how can i do?

dimitri.landerloos · November 22, 2023, 10:18pm

Should just be able to use mushroom-shape-avatar instead of ha-state-icon.

card_mod:
  style: |
    mushroom-shape-avatar::after {
      content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Trappa')) |rejectattr('entity_id', 'search', 'dz') |map(attribute='entity_id') |list | count }}';
      position: absolute;
      top: -11%;
      right: -11%;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 15px;
      height: 15px;
      font-size: 9px;
      font-weight: 700;
      {% if expand(states.light) 
        |selectattr('state', 'eq', 'on') 
        |selectattr('entity_id', 'in', area_entities('Trappa'))
        |rejectattr('entity_id', 'search', 'dz')
        |map(attribute='entity_id')
        |list | count > 0 
      %}
        background-color: rgba(var(--rgb-amber), 0.5);
      {% else %}
        background-color: rgba(var(--rgb-disabled), 0.5);       
      {% endif %}
      border-radius: 50%;
    }
    {% if states('binary_sensor.hallway_motion_sensor_occupancy') == 'off' %}
      mushroom-shape-avatar::before {
        content: 'directions_walk';
        position: absolute;
        font-family: 'Material Icons';
        top: -11%;
        left: -11%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 15px;
        height: 15px;
        font-size: 11px;
        background: rgba(var(--rgb-amber), 0.5);
        color: rgba(var(--rgb-amber), 1);
        border-radius: 50%;
        animation: blink 1s linear infinite;
      }
    {% endif %}
    @keyframes blink {
      50% {opacity: 0;}
    }

dimitri.landerloos · November 22, 2023, 10:34pm

Not quite sure what you mean sorry? You dont seem to need overflow at all (at least based on the snippet you provided here).

For your question to display the card when the boolean is on just use a conditional card and place your card inside of it.

FedeL16 · November 23, 2023, 9:52am

I have modified z-index and now remain on others cards while im scrolling my dashboard… so I solved without Boolean…
Thank you

NovaG · November 23, 2023, 10:50am

Here is another card for those who have blinds

All you have to do is change all references cover.stair_blinds to your entity name

If you want to use my font go into Settings > Dashboards > … > Resources

Add resource:

https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap

type: tile
entity: cover.stair_blinds
show_entity_picture: true
vertical: true
icon: none
name: Blinds
state_content: state
features:
  - type: cover-open-close
card_mod:
  style:
    ha-tile-icon$: |
      .shape {                
        --tile-icon-color: none  !important; 
        color: var(--contrast-100);
        margin-top: 5px;
      }
    ha-tile-info$: |
      .primary {
        font-family: Montserrat;
        --primary-text-color: var(--contrast-8);        
        font-size: 1.2em !important;                                                                          
        font-weight: 600 !important;
        line-height: 2em !important;          
        text-align: start;         
        z-index:1;    
      } 

      .secondary {                
        font-size: 1.1em !important;
        font-family: Montserrat;        
        text-transform: Uppercase;
        color: var(--contrast10) !important;
        text-align: start;   
      }
    .: |
      ha-card {
        --ha-card-border-width: 0;
        background: #050d0f;
        padding-bottom:5px;
        height: 150px;
        width: 150px;
        box-shadow: none;             
      }
      ha-tile-icon {
        --mdc-icon-size: 35px;
      }
      :host {
        --card-mod-icon: {% if is_state('cover.stair_blinds', 'open') %} mdi:blinds-horizontal {% else %} mdi:blinds-horizontal-closed {% endif %} !important;
      }

berntsson88 · November 23, 2023, 11:14am

i installd the Mushroom dashboard strategy… and i LOVE IT… best thing that happens sens HA:)

But i wonder, how can i make changes, i got a few things i need to change, and remove.

MSSH · November 23, 2023, 11:50am

Ok so Mushroom cards is amazing!

But I want to do something like this:

{% if ‘{{user}}’ == ‘Piet Hein’ %}
1
{% else %}
2
{% endif %}

I want to be able to check which user is looking at the page so I can change actions for instance on a template card… But I can’t get it too work.

Does anyone have an idea if this is possible?