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

LiQuid_cOOled · March 31, 2024, 7:30pm

Its easier to copy and paste the code this way. I generally test my work prior to replying with a resolution.

LiQuid_cOOled · March 31, 2024, 7:48pm

Is this what you are looking for?

LiQuid_cOOled · March 31, 2024, 7:59pm

Let’s start with this…

type: custom:mushroom-template-card
primary: Heizung
icon: mdi:fan
icon_color: |
  {% if is_state('climate.heizung_dachflur','heat') %} 
    red
  {% else %} 
    black
  {% endif %}
entity: climate.heizung_dachflur
layout: vertical
picture: ''
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: none !important;
        --icon-symbol-size: 50px;
        top: 10px;
         }
    .: |
      ha-card {
       padding: 0px !important;
       border: 1px solid white;
       background: blue !important;
       height: 83px !important;
       zoom: 150%;
         }

In general you don’t need to use zoom. You can control the size of the icon and font without zoom.

These control those two items.

 --icon-symbol-size: 60px;
--card-primary-font-size: 20px;

Full Card code

type: custom:mushroom-template-card
primary: Heizung
icon: mdi:fan
icon_color: |
  {% if is_state('climate.heizung_dachflur','heat') %} 
    red
  {% else %} 
    black
  {% endif %}
entity: climate.heizung_dachflur
layout: vertical
picture: ''
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: none !important;
        --icon-symbol-size: 60px;
        top:5px;
         }
    .: |
      ha-card {
       padding: 0px !important;
       border: 1px solid white;
       background: blue !important;
       height: 83px !important;
       --card-primary-font-size: 20px;
                }

Deninho91 · March 31, 2024, 8:25pm

Many thanks!!!

And the Animation will be Planed, Like I did before?

LiQuid_cOOled · March 31, 2024, 8:27pm

I don’t know what you mean by Planed?

LiQuid_cOOled · April 1, 2024, 2:30am

I missed this, do you still need assistance? .: | was indented too far…make sure it’s aligned with the m in mushroom.

Deninho91 · April 1, 2024, 6:17am

Sorry,

I mean „Placed“

LiQuid_cOOled · April 1, 2024, 6:22am

There should be no issues with animation. If you have a problem just post the code with a description and I’ll take a look. I’ve worked on so many cards, I sometimes need a reminder

Deninho91 · April 1, 2024, 6:40am

Heheh everything is good.

In my Post 335 there was an Animation also, nur in your corrected Code, this was Not Mentioned😊

I just implemented Again and it works:partying_face:

Zenia · April 1, 2024, 10:56am

No worries, you are busy and don’t have to replay at all. You always so kind helping us. I will check this tonight. Just curios, how I can make lines, which is going down from fan light flicker? @LiQuid_cOOled , I don’t know how to show my appreciation to you and @Ildar_Gabdullin, because of you guys , I learn a lot( still learning) and have a really good dashboard.

LiQuid_cOOled · April 1, 2024, 10:19pm

I’ll should have a solution this evening.

LiQuid_cOOled · April 2, 2024, 12:35am

This should work for you

chrome-capture-2024-4-1

type: custom:stack-in-card
mode: vertical
card_mod:
  style: |-
    ha-card {
      
      {% if states('light.living_fan') == 'on' %}
      box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
      {% else %}
      box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
      {% endif %}      
      {% if is_state('light.living_fan', 'on') %}
      background: rgba(255, 152, 0, 0.1) !important;
      {% endif %}
      }       
cards:
  - type: custom:mushroom-fan-card
    entity: fan.living_fan
    name: '  '
    show_percentage_control: true
    show_oscillate_control: true
    tap_action:
      action: toggle
    hold_action:
      action: none
    double_tap_action:
      action: none
    icon: mdi:fan
    icon_color: |
      {{ '#00bcd4' if is_state(config.entity, 'on') else 'blue' }}
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
           background: none !important;
              }
        .: |
          ha-state-icon {
              animation:
              {% set pwr = states(config.entity) %} 
              {% set perc = state_attr(config.entity,'percentage')|int %}
              {% set spd = 'rotation infinite linear' %}
              {% if ( pwr == 'off') %} 0s {{spd}} 
              {% elif (perc <= 17 and pwr == 'on') %} 2.5s {{spd}}
              {% elif (perc <= 34 and pwr == 'on') %}  2s {{spd}}
              {% elif (perc <= 51 and pwr == 'on') %}  1.5s {{spd}}
              {% elif (perc <= 67 and pwr == 'on') %}  1s {{spd}}
              {% elif (perc <= 84 and pwr == 'on') %}  .75s {{spd}}
              {% elif (perc <= 100 and pwr == 'on') %}  .5s {{spd}}
              {% endif %};
               }
              @keyframes rotation {
              0% {transform: rotate(0deg);}
              100% {transform: rotate(360deg);} }
          ha-card {
                  border: none;
                  background: none;
                  margin-left: -0px !important;
                  margin-right: 0px !important;
                  margin-bottom: 0px !important;
                    }
  - type: custom:mushroom-light-card
    entity: light.living_fan
    name: '  '
    icon: mdi:ceiling-fan-light
    use_light_color: true
    show_brightness_control: true
    tap_action:
      action: toggle
    hold_action:
      action: none
    double_tap_action:
      action: none
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
           background: none !important;
              }
        .: |
          ha-state-icon {
            animation: {{ 'illumination 2s infinite' if is_state('light.living_fan', 'on') }};
          }
          @keyframes illumination {
            0%, 100% { clip-path: inset(0 0 0 0); }
            95% { clip-path: polygon(70% 0, 30% 0, 13% 15%, 0 40%, 0 72%, 30% 62%, 40% 72%, 60% 72%, 70% 63%, 100% 72%, 100% 40%, 87% 15%)};
          }

Thomas-Webster · April 2, 2024, 7:30am

Hi, I’m a very beginner. Now I am facing this problem:
I would like to change only the primary text color depending on the state of a motion detector.
Where am I going wrong? What do I do wrong? What should I do differently?

Here is my current code:

  - type: custom:mushroom-template-card
    primary: Fürdő
    secondary: |-
      {{states('sensor.furdo_d952_temperature') | float | round(1)}} °C
      {{states('sensor.furdo_d952_humidity') | float | round(1)}} %
    icon: mdi:bathtub
    multiline_secondary: true
    icon_color: |-
      {% if is_state('light.led_driver_furdoszoba','on') %}
        orange
      {% endif %}
      {% if is_state('switch.wall_switch_mirror','on') %}
        amber
      {% endif %}
    tap_action:
      action: navigate
      navigation_path: /dashboard-kezelfelulet/furd
    card_mod:
      style: |
        :host {
          {% set sensor_dws_state =
          states('binary_sensor.dws_furdoszoba_contact') %} 
          {% set sensor_zone_state =
          states('binary_sensor.zone_furdo_abl_open') %}

          {% if sensor_dws_state == 'on' and sensor_zone_state == 'on' %}
          --ha-card-box-shadow: 0 0 10px red;
          {% elif sensor_dws_state == 'off' and sensor_zone_state == 'off' %}
          --ha-card-box-shadow: none;
          {% elif sensor_dws_state == 'on' and sensor_zone_state == 'off' %}
          --ha-card-box-shadow: 0 0 10px orange;
          {% else %}
          --ha-card-box-shadow: 0 0 10px grey;
          {% endif %}
        }

        .: |
          ha-card {
            {% set state=states('binary_sensor.motion_sensor_furdoszoba_occupancy') %}
            {% if state=='off' %}
              --primary-text-color: red
            {% else %}
              --primary-text-color: none
            {% endif %}
          }

LiQuid_cOOled · April 2, 2024, 7:45am

The field names have changed for primary and secondary colors. This will get you started. You do not need to use :host { . All of that code will work under ha-card:

I included one line to show that it works…

ha-card {
           --ha-card-box-shadow: 0 0 10px red;
           --card-primary-color:
           {{ 'red' if is_state('binary_sensor.motion_sensor_furdoszoba_occupancy', 'on') else 'grey' }}
             }

Thomas-Webster · April 2, 2024, 7:58am

Thank you very much!

LiQuid_cOOled · April 2, 2024, 8:00am

Another suggestion… your icon color template code does not require two ENDIFs

icon_color: |-
      {% if is_state('light.led_driver_furdoszoba','on') %}
        orange
      {% elif is_state('switch.wall_switch_mirror','on') %}
        amber
      {% endif %}

Thomas-Webster · April 2, 2024, 8:12am

Thanks for this suggestion too, I fixed it.

Zenia · April 2, 2024, 10:54am

Thank you so much. It’s exactly what I was looking for.
I will compare my code and yours, to understand where I made a mistake. Still learning. TY

Bieniu · April 2, 2024, 4:54pm

How can I get a card color change animation on click for Mushroom cards like in the case of a Tile card?

tile-animation

LiQuid_cOOled · April 2, 2024, 6:35pm

Like this…

type: custom:mushroom-template-card
primary: Hover Color
secondary: example
icon: mdi:home
card_mod:
  style: |
    ha-card:hover {
       background-color: rgba(0,255,0, 0.1);
                    }

chrome-capture-2024-4-2