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

[LiQuid_cOOled]

You’d have to increase the chip size to the right to make it clickable. You could make the background transparent so you wouldn’t see a wide chip.

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: light.xxxx
    tap_action:
      action: toggle
      
    card_mod:
     style: |
       ha-card {
          background: none !important;
          border: none;
          height: 40px;
          padding-left: 10px !important;
          display: flex;
          align-items: left;
          padding-right: 200px !important;
           }

[akcapak]

mm ok thank you again @LiQuid_cOOled
it is a bit of a hack… but i will try thanks

[LiQuid_cOOled]

Not sure there is another way…

[WeisserWolf611]

Thanks a lot, It looks really simple
The color-Change Idid I in the style of card_mod that was my mistake.
I try to intigrate the following line in an other code, with same function, but the icon is online stable.

 transform-origin: 50% 110%

I cant figure out who the syntax of CSS is. Had anybody a good tutorial or something?
I really want to do it by myself, instead of asking everything. Its nice that some helps when it is difficult, but this is more simple I think

An other question is: Can i use card_mod with any cards?
custom:button-card or something?

[milutm]

hey. anyone know how to change slider background in mushroom light card?
Please give me selector and rest of it?
trying with that but it doesnt work

[Frosty]

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;
      }

there’s a guide by dimitri.landerloos here includes almost everything

[LiQuid_cOOled]

Card Mod works in most instances, but requires understanding accessing the shadow-root of an object. Card Mod does works with Custom Button Cards, but the code will be different than Mushroom cards.

This is a good guide to start with both custom and standard HA cards…

Card-mod - Add css styles to any lovelace card

Here all my posts which may be useful: NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3). And also read this important note to create optimized code. In most examples here a code is NOT optimized - just to describe a DOM navigation. Entity card post rotating icon (by @dolodobendan) disabled tap_action Entities card (including some special row elements - button, section, divider) post font-size for Entities card post Entities card with attributes …

This is a good starting point for understanding CSS commands.

CSS Tutorial

[Ildar_Gabdullin]

@WeisserWolf611

Can i use card_mod with any cards?
custom:button-card or something?

As an addition: in many cases card-mod may be not needed for custom:button-card since it has its own “style” feature; but smth may be done by card-mod only…

[darko1515]

Hello. I am struggling to find an example on a conditional chip card.
I want to show a chip card when there is movement detected, but when there is no movement detected the chip card should not appear on the dashboard.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Living Room
    secondary: >-
      {{ states('sensor.senzor_living_roomerature_lumi_158d00044ab88b') |
      round(1) }} °C | {{ states('sensor.humidity_lumi_158d00044ab88b') |
      round(1) }} %
    icon: mdi:sofa
    entity: light.candelabru_living
    icon_color: |-
      {% if is_state('light.candelabru_living', 'on') %}
        orange
      {% elif is_state('light.instalatie_wifi', 'on') %}
        orange
      {% elif is_state('light.veioza', 'on') %}
        orange 
      {% endif %}
    tap_action:
      action: navigate
      navigation_path: /mushroom-one/living
    hold_action:
      action: none
    multiline_secondary: false
    layout: horizontal
    fill_container: false
    double_tap_action:
      action: none
    card_mod:
      style: |
        ha-card
          {background: transparent;
           border-style: none;
          }
        :host {
          --mush-icon-size: 60px;
          height: 60px;
          margin-left: -19px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: binary_sensor.senzor_miscare_living_occupancy
        double_tap_action:
          action: none
        icon_color: red
        tap_action:
          action: more-info
        hold_action:
          action: none
        content_info: none
        card_mod:
          style: |
            ha-card
              {background: transparent;
               border-style: none;
              }
      - type: light
        entity: light.instalatie_wifi
        double_tap_action:
          action: none
        content_info: none
        icon: mdi:string-lights
        tap_action:
          action: more-info
        hold_action:
          action: none
        use_light_color: true
        card_mod:
          style: |
            ha-card
              {background: transparent;
               border-style: none;
              }
      - type: entity
        entity: switch.plug_lumi_158d0001716f86_ch0_lumi_158d0001716f86
        double_tap_action:
          action: none
        icon: mdi:television-classic
        icon_color: primary
        use_entity_picture: false
        tap_action:
          action: more-info
        hold_action:
          action: none
        content_info: none
        card_mod:
          style: |
            ha-card
              {background: transparent;
               border-style: none;
              }
      - type: light
        entity: light.veioza
        double_tap_action:
          action: none
        icon: mdi:floor-lamp
        use_light_color: true
        content_info: none
        tap_action:
          action: more-info
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card
              {background: transparent;
               border-style: none;
              }
      - type: entity
        entity: climate.aer_conditionat
        double_tap_action:
          action: none
        icon: mdi:air-conditioner
        icon_color: primary
        content_info: none
        use_entity_picture: false
        tap_action:
          action: more-info
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card
              {background: transparent;
               border-style: none;
              }
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-spacing: -7px;
        }

[WebPower (Karoly Papp)]

Hello darko 1515

Example code:

  - type: conditional
    conditions:
      - entity: binary_sensor.YOU_MOTION_SENSOR
        state: 'on'
    chip:
      type: entity
      entity: binary_sensor.YOU_MOTION_SENSOR
      icon_color: red
      content_info: none

[Zenia (Yevgeniy)]

Is it possible to make a fire color in the fireplace animation be RED and fireplace itself TEAL

type: custom:mushroom-template-card
primary: Fireplace
icon: mdi:fireplace
icon_color: red
card_mod:
  style: |
    ha-state-icon {
      animation: fire 800ms infinite;
      transform-origin: 50% 85%;
    }
    @keyframes fire {
        0%, 19%, 23%, 39%, 43%, 49%, 53%, 69%, 73%, 89%, 93%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
        20%, 40%, 50%, 70%, 90% { clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 99%, 66% 49%, 52% 44%, 33% 48%, 33% 82%, 66% 82%, 69% 100%, 0 100%); }
    }

@dimitri.landerloos I got this from your tutorial in Part 1 and would like to tweak a little bit, but don’t know how. You did that with Washer machine and it’s work great. Thank you

[WebPower (Karoly Papp)]

Hello,

It needs updating because a lot has already changed under HA, Style etc… Card mod etc… but it works, you can check it from here.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:pine-tree
    icon_color: green
    primary: 'Christmas Tree #2'
  - type: custom:mushroom-template-card
    icon: mdi:star-four-points
    icon_color: yellow
    primary: Star
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: star 8s ease infinite alternate;
          }
          @keyframes star {
            0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
            50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
          }
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
  - type: custom:mushroom-template-card
    icon: mdi:grain
    icon_color: red
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: flash 2s steps(1) infinite, lights 2s infinite;
            clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
          }
          @keyframes flash {
            50% { transform: rotateY(180deg); }
          }
          @keyframes lights {
            0%, 100% {--icon-color: rgb(var(--rgb-red)); }
            6.25% { --icon-color: rgb(var(--rgb-deep-orange)); }
            12.5% { --icon-color: rgb(var(--rgb-orange)); }
            18.75% { --icon-color: rgb(var(--rgb-amber)); }
            25% { --icon-color: rgb(var(--rgb-yellow)); }
            31.25% { --icon-color: rgb(var(--rgb-lime)); }
            37.5% { --icon-color: rgb(var(--rgb-light-green)); }
            43.75% { --icon-color: rgb(var(--rgb-green)); }
            50% { --icon-color: rgb(var(--rgb-teal)); }
            56.25% { --icon-color: rgb(var(--rgb-cyan)); }
            62.5% { --icon-color: rgb(var(--rgb-light-blue)); }
            68.75% { --icon-color: rgb(var(--rgb-blue)); }
            75% { --icon-color: rgb(var(--rgb-indigo)); }
            81.25% { --icon-color: rgb(var(--rgb-deep-purple)); }
            87.5% { --icon-color: rgb(var(--rgb-purple)); }
            93.75% { --icon-color: rgb(var(--rgb-pink)); }
          }
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -132px;
          }
  - type: custom:mushroom-template-card
    icon: mdi:gift
    icon_color: red
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: surprise 4s ease infinite;
          }
          @keyframes surprise {
            0%, 20%, 100% { transform: translateY(0); }
            2.5% { transform: translateY(-2px) rotate(-27deg); }
            5% { transform: translateY(-2px) rotate(21deg); }
            7.5% { transform: translateY(-2px) rotate(-15deg); }
            10% { transform: translateY(-2px) rotate(9deg); }
            12.5% { transform: translateY(0); }
            15% { transform: translateY(-1.2px) }
          }
          .shape {
            --shape-color: none;
            --icon-size: 18px;
            top: 18px;
            left: 18px;
          }
        .: |
          ha-card {
            width: 66px;
            top: -198px;
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

[Zenia (Yevgeniy)]

I am looking for a UTILITY ROOM Icon and don’t see any which I like. For now, I use a boiler (mdi: water-boiler) but want something more specific. Also want to animated this icon like I am doing now with the others. Any idea , what should I use? Thank you

[WebPower (Karoly Papp)]

Maybe: mdi:campfire

[Zenia (Yevgeniy)]

for Utility room
This is what I have now:

I have an Electrical panel, water heater, furnace etc. in this room

[serot23]

Thank you very much, i could swear i tried this but don’t know for sure. Where can i found the updated codes?

[LiQuid_cOOled]

What do you want to tweak in the fireplace animation?

[Zenia (Yevgeniy)]

Fireplace color TEAL( for example) and fire itself RED

[LiQuid_cOOled]

@Zenia I think WebPower was trying to say to you that you can put an icon over an icon to create the fireplace look you are wanting to tweak. He gave the Christmas tree example code and that is why he suggested campfire icon. It wasn’t for your utility room.

Clip-path hides a portion of the background to create the animation. What you are trying to accomplish is possible, but will take multiple steps.

I can take a stab at it, if you’d like.

[Zenia (Yevgeniy)]

Oh, Sorry. I thought he was replying to my other post about Utility room icon
@WebPower sorry if I said something wrong
@LiQuid_cOOled , yes, please
TY