Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 2)

Dimitriā€¦can You help once more

Currently ill use:

card_mod:
  style:
    mushroom-media-player-media-control$: |
      mushroom-button:nth-child(1) {
        height: 30px !important;
        width: 30px !important;
        margin-top: 7px !important;
      }
      mushroom-button:nth-child(2) {
        height: 30px !important;
        width: 30px !important;
        margin-top: 7px !important;
      }
      mushroom-button:nth-child(3) {
        height: 30px !important;
        width: 30px !important;
        margin-top: 7px !important;
      }
      mushroom-button:nth-child(4) {
        height: 30px !important;
        width: 30px !important;
        margin-top: 7px !important;
      }
    mushroom-media-player-volume-control$: |
      mushroom-button:nth-child(1) {
        height: 30px !important;
        width: 30px !important;
        margin-top: 7px !important;
      }
      mushroom-button:nth-child(2) {
        height: 30px !important;
        width: 30px !important;
        margin-top: 7px !important;
      }
      mushroom-button:nth-child(3) {
        height: 30px !important;
        width: 30px !important;
        margin-top: 7px !important;
      }
      mushroom-button:nth-child(4) {
        height: 30px !important;
        width: 30px !important;
        margin-top: 7px !important;
      }
    .: |
      mushroom-button {
        height: 30px !important;
        width: 30px !important;
        margin-top: 7px !important;
      }
      ha-card {
      height: 50px !important;
      }
    mushroom-shape-icon$: |
      .shape {
       background: none !important;
      }

On the media cardā€¦
And works great tho
But i fail to import:

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

Did try on several placesā€¦but ended up on some indentations
To changeā€¦results where then no errors
But still the slider is bigger then i wanted to be at 25px
Any idea?
Thank You!

try like this:

Code
type: custom:mushroom-media-player-card
entity: media_player.dimitris_pc
show_volume_level: true
use_media_info: true
volume_controls:
  - volume_mute
  - volume_buttons
  - volume_set
media_controls:
  - on_off
  - shuffle
  - previous
  - play_pause_stop
  - next
  - repeat
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: none !important;
      }
    mushroom-media-player-media-control$: |
      mushroom-button:nth-child(1) {
        height: 30px !important;
        width: 30px !important;
        margin-top: 7px !important;
      }
      mushroom-button:nth-child(2) {
        height: 30px !important;
        width: 30px !important;
        margin-top: 7px !important;
      }
      mushroom-button:nth-child(3) {
        height: 30px !important;
        width: 30px !important;
        margin-top: 7px !important;
      }
      mushroom-button:nth-child(4) {
        height: 30px !important;
        width: 30px !important;
        margin-top: 7px !important;
      }
    mushroom-media-player-volume-control$:
      mushroom-slider$: | 
        .slider {  
          height: 200px !important; 
        }
      .: |
        mushroom-button:nth-child(1) {
          height: 30px !important;
          width: 30px !important;
          margin-top: 7px !important;
        }
        mushroom-button:nth-child(2) {
          height: 30px !important;
          width: 30px !important;
          margin-top: 7px !important;
        }
        mushroom-button:nth-child(3) {
          height: 30px !important;
          width: 30px !important;
          margin-top: 7px !important;
        }
        mushroom-button:nth-child(4) {
          height: 30px !important;
          width: 30px !important;
          margin-top: 7px !important;
        }
    .: |
      mushroom-button {
        height: 30px !important;
        width: 30px !important;
        margin-top: 7px !important;
      }
      ha-card {
        height: 50px !important;
      }

The issue is that you cant have 2 seperate places refer to the same thing.

you already have mushroom-media-player-volume-control$: being referred to in 1 place here:

    mushroom-media-player-volume-control$: |
      mushroom-button:nth-child(1) {
        height: 30px !important;
        width: 30px !important;
        margin-top: 7px !important;
      }

you cant refer to it again, that would be a duplication.

so you have to append the mushroom-slider$: | to mushroom-media-player-volume-control$: like the above, but then access mushroom-media-player-volume-control$: directly as well, using .: | to get to each of the buttons.

1 Like

Yes! @dimitri.landerloos You got me just right. Super! I didnā€™t even come up with the idea to try card mod and what options would have had to be set. You are the best. So it works perfectly and exactly the way I wanted it. Thank you very much!

Thank You Dimitri for guidanceā€¦
Now i saw what i did wrong
Keep rocking m8!

Trying to get the icon to animate, but been unsuccessful. Any help please? thanks

type: custom:mushroom-template-card
primary: Washing Machine
secondary: >-
  {% if is_state("sensor.washer", "on") %} Currently {{
  state_attr("sensor.washer", "run_state") }} |  {{ state_attr("sensor.washer",
  "remain_time") }}/{{ state_attr("sensor.washer", "initial_time") }} elapsed

  {{ state_attr("sensor.washer", "current_course") }} {% else %} Off {% endif %}
icon: mdi:tumble-dryer
entity: sensor.washer
multiline_secondary: true
icon_color: indigo
tap_action:
  action: more-info
badge_color: ''
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
        transform-origin: 50% 110%;
      }
      @keyframes shake {
        0%, 100% { transform: translate(0, 0) rotate(0); }
        20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
        40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
        60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
        80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
      }
      @keyframes drum {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
      }

1 Like

Ah sorry didnā€™t see this update, Itā€™s working now thanks.
Anyway to stop it animating when the state is off?

there is. I canā€™t remember but I think @dimitri.landerloos guide also has an example.

I havenā€™t tested but this should work

type: custom:mushroom-template-card
card_mod:
  style: |
    {% if 'on' in states('switch.4ch_relay_relay1') %}
    ha-state-icon {
      animation: cloudy 10s ease-in-out infinite, wind 5s infinite; 
    }
    @keyframes cloudy {
      0%, 100% { transform: translateX(3px); }
      30% { transform: translateX(-1px); }
      45% { transform: translateX(1.5px); }
      75% { transform: translateX(-3.2px); }
    }
    @keyframes wind {
      0%, 50%, 100% { clip-path: inset(0 0 0 0); }
      25% { clip-path: inset(0 0 37% 0); }
    }
    {% else %}
             
    {% endif %}
primary: ''
secondary: ''
icon: mdi:home
icon_color: green

1 Like

I would recommend that you put your if statements like this instead:

card_mod:
  style: |
    ha-state-icon {
      {% if 'on' in states('switch.4ch_relay_relay1') %}
        animation: cloudy 10s ease-in-out infinite, wind 5s infinite;
      {% endif %}
    }
    @keyframes cloudy {
      0%, 100% { transform: translateX(3px); }
      30% { transform: translateX(-1px); }
      45% { transform: translateX(1.5px); }
      75% { transform: translateX(-3.2px); }
    }
    @keyframes wind {
      0%, 50%, 100% { clip-path: inset(0 0 0 0); }
      25% { clip-path: inset(0 0 37% 0); }
    }

@iona.

putting the if statements outside the elements that you are targetting and especially in between multiple elements tends to result in wonky behaviour.

2 Likes

@dimitri.landerloos Working, thank you :slight_smile:

Thankyou for correcting my code, much appreciated.
Iā€™ve learnt something new :slightly_smiling_face:

plus for some reason Iā€™ve always included {% else %} even if itā€™s not needed

Newbie here, can someone please help me with the code for changing a mushroom chip cardā€™s background color based on the entity state (on/off)? I couldnā€™t seem to find it here!

Doe it go under card-mod?

Thanks.

The actual chip background or the color of the card background?

The chip background would be

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: your.device
    card_mod:
     style: |
      ha-card {
       --chip-background: {{ 'lime' if is_state(config.entity, 'on') else 'red' }};
       }

Check out this guide. It will give you an idea of what standard options are and where card-mod is required.

Thanks for that quick one. I guess Iā€™m still doing something wrong. Adding that in does nothing and breaks my other formatting for the chip.

EDIT: Added my relatively more complex chip template card code

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: light.den
    icon: |-
      {% if is_state(entity, 'on') %}
        mdi:sofa-single
      {% else %}
        mdi:sofa-single
      {% endif %}
    icon_color: |-
      {% if is_state(entity, 'on') %}
        #F97B22
      {% else %}
        #B4B4B8
      {% endif %}
    content: >-
      Den: {{ expand(state_attr(entity, 'entity_id'))|
      selectattr('state','eq','on')|map(attribute='entity_id')|list|count}} / {{
      expand(state_attr(entity,
      'entity_id'))|map(attribute='entity_id')|list|count }}
    card_mod:
      style: |
        ha-card {
          --chip-background: {{ 'lime' if is_state(light.den, 'on') else 'red' }};
          box-shadow: none !important;
          justify-content: right;
          --chip-height: 35px;
          --chip-border-radius: 0px;
          --chip-icon-size: 18px;
          --chip-font-size: 12px;
          font-style: bold;
          font-variant: small-caps;
          padding-right: 0px;
          padding-left: 0px;
          font-family: "Roboto";
          font-weight: bolder;
          min-width: 70px !important;       
        }

If you a specifying the entity, you need single quotes around the entity.

--chip-background: {{ 'lime' if is_state('light.pine', 'on') else 'red' }};

  - type: entity
    entity: light.pine
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    icon: mdi:lamp
    icon_color: green
    content_info: none
    card_mod:
      style: |
        ha-card {
          --chip-background: {{ 'lime' if is_state('light.pine', 'on') else 'red' }};
          justify-content: center;
          --chip-height: 35px;
          --chip-border-radius: 10px;
          --chip-icon-size: 20px;
          --chip-font-size: 9px;
          font-style: bold;
          font-variant: small-caps;
          padding-right: 0px;
          padding-left: 0px;
          font-family: "Roboto";
          font-weight: bolder;
          min-width: 20px !important;       
        }

THANK YOU! Works like a charm! Also learned something new!

Iā€™ll have another look at the Config guide. I just canā€™t seem to wrap my head around how to use .: | , or > or $

Iā€™m just going to piggyback on your kind availability for another follow-up which Iā€™ve been struggling with for days now.

If I were to add any sort of icon animation to this card, how would I go about formatting it into card-mod? Can you please draft an example code

Chips arenā€™t the best to start with. They are the most difficult to mod of the Mushroom Cards.

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: light.pc_lights
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    icon: mdi:lamp
    icon_color: green
    content_info: none
    card_mod:
      style: |
        ha-card {
          --chip-background: {{ 'lime' if is_state('light.pine', 'on') else 'red' }};
          justify-content: center;
          --chip-height: 35px;
          --chip-border-radius: 10px;
          --chip-icon-size: 20px;
          --chip-font-size: 9px;
          font-style: bold;
          font-variant: small-caps;
          padding-right: 0px;
          padding-left: 0px;
          font-family: "Roboto";
          font-weight: bolder;
          min-width: 20px !important;       
        }
card_mod:
  style:
    mushroom-entity-chip:nth-child(1)$: |
      ha-state-icon {
      animation: blink 2s linear infinite;
       }
      @keyframes blink { 50% {opacity: 0;} }

Thanks! What do you suggest I use as a card/template? Iā€™m not yet there to use YAML for a complete card from scratch and mushroom chips offered some flexibility.

I see youā€™ve added a card-mod at the parent chip level - so if if I have multiple chips, Iā€™d have to use child(2), child(3)ā€¦?

Iā€™m assuming since you did it this way, there is no way of including this under style we used for the entity chip card?

Correct, Dimitriā€™s guide lays that out here. Understanding a template card is a good way to start.

There is also a section on understanding the shadow-root

If you are on Chrome, the Dev Tool helps layout the CSS structure as well. Right click and inspect or F12 will get you to the tool.

1 Like

Thank you. Iā€™m going to do that now.

For some reason, your animation code didnā€™t seem to work for me. Iā€™ve gone ahead and attempted to have it change based on state as well - I know itā€™s wrong, but if you will help me with figuring out the code.

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: light.den
    icon: |-
      {% if is_state(entity, 'on') %}
        mdi:sofa-single
      {% else %}
        mdi:sofa-single
      {% endif %}
    icon_color: |-
      {% if is_state(entity, 'on') %}
        #F97B22
      {% else %}
        red
      {% endif %}
    content: >-
      Den: {{ expand(state_attr(entity, 'entity_id'))|
      selectattr('state','eq','on')|map(attribute='entity_id')|list|count}} / {{
      expand(state_attr(entity,
      'entity_id'))|map(attribute='entity_id')|list|count }}
    card_mod:
      style: |
        ha-card {
          --chip-background: {{ 'lime' if is_state('light.den', 'on') else 'yellow' }};
          box-shadow: none !important;
          justify-content: right;
          --chip-height: 35px;
          --chip-border-radius: 0px;
          --chip-icon-size: 18px;
          --chip-font-size: 12px;
          font-style: bold;
          font-variant: small-caps;
          padding-right: 0px;
          padding-left: 0px;
          font-family: "Roboto";
          font-weight: bolder;
          min-width: 70px !important;       
        }
card_mod:
  style:
    mushroom-entity-chip:nth-child(1)$: |
      {% if is_state(entity, 'on') %}
        ha-state-icon {
        animation: blink 2s linear infinite;
         }
        @keyframes blink { 50% {opacity: 0;} }
      {% else %}
        ha-state-icon {
        animation: blink 0s linear infinite;
         }
        @keyframes blink { 50% {opacity: 0;} }
      {% endif %}