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

[LiQuid_cOOled]

@berkans Got it to work…

type: tile
entity: light.tv_lights
hide_state: false
show_entity_picture: false
features:
  - type: light-brightness
tap_action:
  action: toggle
icon: mdi:light-recessed
card_mod:
  style:
    hui-card-features$:
      hui-light-brightness-card-feature$:
        ha-control-slider$: |
          .slider {
            --control-slider-border-radius: 4px !important;
             height:15px !important; 
              }
    .: |
        ha-card .content {
         display: none !important;
         }

[berkans (Berkan Sezer)]

Perfect. Thank you very much.

[asturpar (Pablo)]

Hi thanks very much for this wonderful set of cards.
There’s something I couldn’t achieve yet with the custom template or light cards.

I use the template cards badge to show if there’s presence detected in the rooms where I have detectors

The problem is that I couldn’t add this feature to the light cards, and if using the template cards I cannot reach the advanced setting for the lights (colour, intensity…)

I’d like to add a badge when detected any zone where I have it set (these are light cards), as I have a FP2 that gives that info

Is there any way to achieve it?
Thanks!

[asturpar (Pablo)]

Here I would like to place it

[TommyWelle (Tommy Welle Jacobsson)]

Share your code and ill make it happend

[LiQuid_cOOled]

to start…The card you are using is a mini-media-player, not a Mushroom card. The Mini-media player has it’s own mod settings you’ll need to adjust.

checkout this extensive guide and look for mini-media-player

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 …

[peroanjo (Daniel)]

Hello Everyone!

Does anyone has the code, or something similar, to create this?

The important part is, I’m not sure how to add the three buttons side by side, any help would be kindly appreciated, thanks!

[LiQuid_cOOled]

Its a Tile or a Mushroom Cover Card. They are automatically added.

[Boostin4HP]

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Garage Door
    secondary: >-
      {% if is_state('cover.garage_door','open') and
      is_state('binary_sensor.garage_door_open','on') %}
        Open and Unlocked
      {% elif is_state('binary_sensor.garage_door_open','on') %}
        Door Open
      {% elif is_state('cover.garage_door','open') %}
        Unlocked
      {% else %}
        Closed
      {% endif%}
    icon: >-
      {% if is_state('cover.garage_door','open') and
      is_state('binary_sensor.garage_door_open','on') %}
        mdi:garage-open-variant
      {% elif is_state('binary_sensor.garage_door_open','on') %}
        mdi:garage-open-variant
      {% elif is_state('cover.garage_door','open') %}
        mdi:garage-alert-variant
      {% else %}
        mdi:garage-variant-lock
      {% endif%}
    icon_color: >-
      {% if is_state('cover.garage_door','closed') and
      is_state('binary_sensor.garage_door_open','off') %}
        green
      {% else %}
        red
      {% endif%}
    badge_icon: |-
      {% set bl = states('sensor.garage_door_sensor_battery_level') | int %}
      {% if bl < 10 %} mdi:battery-outline
      {% elif bl < 20 %} mdi:battery-10
      {% elif bl < 30 %} mdi:battery-20
      {% elif bl < 40 %} mdi:battery-30
      {% elif bl < 50 %} mdi:battery-40
      {% elif bl < 60 %} mdi:battery-50
      {% elif bl < 70 %} mdi:battery-60
      {% elif bl < 80 %} mdi:battery-70
      {% elif bl < 90 %} mdi:battery-80
      {% elif bl < 100 %} mdi:battery-90
      {% elif bl == 100 %} mdi:battery
      {% else %} mdi:battery-unknown
      {% endif %}
    badge_color: |-
      {% set bl = states('sensor.garage_door_sensor_battery_level') | int %}
      {% if bl < 10 %} red
      {% elif bl < 20 %} red
      {% elif bl < 30 %} red
      {% elif bl < 40 %} orange
      {% elif bl < 50 %} orange
      {% elif bl < 60 %} green
      {% elif bl < 70 %} green
      {% elif bl < 80 %} green
      {% elif bl < 90 %} green
      {% elif bl < 100 %} green
      {% elif bl == 100 %} green
      {% else %} disabled
      {% endif %}
    tap_action:
      action: none
    card_mod:
      style: |
        mushroom-badge-icon {
          left: -3px;
        }
  - type: custom:mushroom-cover-card
    entity: cover.garage_door
    name: Garage Door
    primary_info: none
    secondary_info: none
    icon_type: none
    tap_action:
      action: none
    show_buttons_control: true
    card_mod:
      style: |
        ha-card {
          margin-top: -12px;
        }
card_mod:
  style: |
    ha-card {
      {% if is_state('cover.garage_door','closed') and
      is_state('binary_sensor.garage_door_open','off') %}
          background: rgba(101,170,91,0.2);
      {% else %}
          background: rgba(226,84,66,0.2);
      {% endif %}
    }

[MrPresident (Tom)]

Hey guys! I need help. a long time ago my animations stopped working, and I tried everything but I cant get them to work, can someone help me and checkout what I’m doing wrong?

Thank you

example:

cards:
  - type: custom:mushroom-template-card
    icon: mdi:sofa
    entity: light.livingroom_group
    primary: Living Room
    icon_color: |-
      {% if is_state('light.livingroom_group', 'on') %}
        orange
      {% endif %}
    tap_action:
      action: toggle
    hold_action:
      action: navigate
      navigation_path: livingroom
    secondary: '{{ states(''sensor.atc_0ae9_temperature'') }}°F'
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {

          {{  '--icon-animation: ducky 2s ease-in-out infinite;' if
          is_state('light.livingroom_group', 'on') }} 
            transform-origin: 50% 75%;
          }

          @keyframes ducky {
            0%, 100% { transform: rotate(-15deg); }
            50% { transform: rotate(15deg); }
          }
  - type: custom:mushroom-template-card
    icon: mdi:bed-queen
    primary: Bedroom
    icon_color: |-
      {% if is_state('light.bedroom_bathroom_group', 'on') %}
        orange
      {% endif %}
    tap_action:
      action: toggle
    hold_action:
      action: navigate
      navigation_path: bedroom
    secondary: '{{ states(''sensor.ewelink_th01_temperature'') }}°F'
    entity: light.bedroom_bathroom_group
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {

          {{  '--icon-animation: ducky 2s ease-in-out infinite;' if
          is_state('light.bedroom_bathroom_group', 'on') }} 
            transform-origin: 50% 75%;
          }

          @keyframes ducky {
            0%, 100% { transform: rotate(-15deg); }
            50% { transform: rotate(15deg); }
          }

[LiQuid_cOOled]

ha-icon should be ha-state-icon and --icon-animation: should just be animation:

An example

type: custom:mushroom-template-card
primary: Spin
icon: mdi:fan
icon_color: red
card_mod:
  style: |
    ha-state-icon {
      animation: rotate .5s infinite linear}
     @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(-359deg);
        }
      }      

[MrPresident (Tom)]

Thanksss! That solved it.
is there a way to make it so that the animation only will work when the entity is on?

[LiQuid_cOOled]

An example with a if statement that controls the animation.

type: custom:mushroom-template-card
primary: Spin
entity: fan.bedroom_fan
icon: mdi:fan
icon_color: red
card_mod:
  style: |
    ha-state-icon {
      {% if is_state(config.entity, 'on') %}
      animation: rotate .5s infinite linear}
     @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(-359deg);
        }
      }
       {% endif %}

[MrPresident (Tom)]

Thank you so so much!

[dth97410]

@rhysb Hi, is it possible to create an animation such as a pulsation effect or something else inside or outside the temperature entity, knowing that the entity is on an picture element ? I’ve tried but I can’t get it to work.

[reypm]

I have a custom:mushroom-entity-card whose entity is a switch and I wonder if it is possible to animate the icon based on the switch state as you can see in the code below the icon is a fan which means switch is on, spin the fan, switch is off do nothing, can I get some help? I did some search in the forums but was unable to found my answer

type: custom:mushroom-entity-card
entity: switch.smartplug_top_fan_switch
name: Top Fan
fill_container: true
icon: mdi:fan
icon_type: icon
tap_action:
  action: toggle
hold_action:
  action: none
double_tap_action:
  action: none

[LiQuid_cOOled]

@reypm I literally just posted this yesterday (2 post ago) in this thread.

This code adjusted to use your switch vs the fan I posted.

type: custom:mushroom-template-card
primary: Spin
entity: switch.smartplug_top_fan_switch
icon: mdi:fan
icon_color: red
card_mod:
  style: |
    ha-state-icon {
      {% if is_state(config.entity, 'on') %}
      animation: rotate .5s infinite linear}
     @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(-359deg);
        }
      }
       {% endif %}

[LiQuid_cOOled]

This is not the thread for this question. Please review

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 …

There are instructions for both picture element and animations in this extensive guide.

[Stevengerrard08]

Hello,

My secondary text has suddenly turned white instead of gray. What do I add/change in the theme to get back the gray color?

[cokelid]

Mushroom with Alarmo?
Has anyone been able to get the mushroom alarm card to show the Alarmo keypad, rather than the standard Alarm keypad? In fact I can’t get the mushroom alarm card to work at all with Alarmo? Any advice?