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

[SoulAssassin (Anton Stolov)]

One more question about animation, I don’t understand which parameter is responsible for expanding the effect throughout the entire window in the icon? Ucan see white stripes on the sides of the animation rising up, I wanted the effect to fill this animation of the toaster completely inside.

            - type: custom:mushroom-template-card
              layout: vertical
              entity: switch.socket
              icon: mdi:toaster-oven
              icon_color: red
              primary: Toaster
              secondary: "{{ states('sensor.power') | round(1) }} W"
              tap_action:
                action: toggle
              double_action:
                action: none
              hold_action:
                action: more-info
              vertical: true
              card_mod:
                  style: |
                    ha-card {
                      border: none !important;
                    }
                    ha-state-icon:before {
                      content: "";
                      position: absolute;
                      width: 25%;
                      height: 30%;
                      margin: 12%;
                      animation: cook 1s linear infinite;
                    }
                    @keyframes cook { 
                      0%, 100% { background: linear-gradient(0deg, orange 0%, transparent 50%, transparent 100%); }
                      33% { background: linear-gradient(0deg, transparent 0%, orange 50%, transparent 100%); }
                      66% { background: linear-gradient(0deg, transparent 0%, transparent 50%, orange 100%); }
                    }
                    :host {
                      --icon-size: 80px !important;
                      perspective: 900px;
                    }
                    ha-card:active {
                      transform: rotateX(25deg);
                      transform-origin: center bottom;
                      transition: 0s;
                    }

[fredericomcorda]

Mushroom cards has completely transformed my dashboard
But I saw something online where for light entities the slider appears behind the text (not below). Do any of you have an ideia how can this be done with mushroom like I saw below?

[LiQuid_cOOled]

Yes it’s possible with Mushroom.

Feel free to load your code from an entity or two for advice.

This card has multiple data points on top of the slider (underlined in green)

[LiQuid_cOOled]

Adjust these

      width: 37%;
      height: 30%;
      left: 22px;
      top: 30px;

card_mod:
  style: |
    ha-card {
      border: none !important;
    }
    ha-state-icon:before {
      content: "";
      position: absolute;
      width: 37%;
      height: 30%;
      left: 22px;
      top: 30px;
      animation: cook 1.5s linear infinite;
    }
    @keyframes cook { 
      0%, 100% { background: linear-gradient(0deg, orange 0%, transparent 50%, transparent 100%); }
      33% { background: linear-gradient(0deg, transparent 0%, orange 50%, transparent 100%); }
      66% { background: linear-gradient(0deg, transparent 0%, transparent 50%, orange 100%); }
    }
    :host {
      --icon-size: 80px !important;
      perspective: 900px;
    }
    ha-card:active {
      transform: rotateX(25deg);
      transform-origin: center bottom;
      transition: 0s;
    }

[fredericomcorda]

Thanks. This is my original code. I don’t know how to start (already have card-mod)

type: custom:mushroom-light-card
entity: light.ceiling_light
show_brightness_control: true
use_light_color: true

[LiQuid_cOOled]

I’d recommend starting with this guide and learn a bit before we start with your request…

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.2.2 and Card Mod Version 3.4.1 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.7). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …

My code for this card is 184 lines long and that’s simple compared to what some folks have designed.

[SoulAssassin (Anton Stolov)]

Thanks!

                      width: 37%;
                      height: 30%;
                      left: 11px;
                      top: 17px;
                      margin: 12%;

…is good for me

@LiQuid_cOOled Btw, can u tell me about that kitchen hood animation that I showed above? Is it possible to add a rising smoke effect? So that it smoke appears from below, and not from above?

[LiQuid_cOOled]

Did you get the exhaust fan figure out?

[SoulAssassin (Anton Stolov)]

Nope, I asked u in edited message above

I was unable to create the effect of smoke rising from below… I was only able to hide it from bottom to top and on the contrary, I cannot make the hiding go all the time from below in a circle.

[LiQuid_cOOled]

sorry I missed the edit, message me the card code if you’d like.

[SoulAssassin (Anton Stolov)]

Btw, I also had several questions regarding the lighting card (or template card with lighting):

1. I didn’t find the answer on my own or didn’t understand how to apply it, is it possible to show the current color of the entity as the native HA does?

2. I searched and tried to implement it myself, but so far to no avail, I would like to try the effect of a pulsating radius if the lighting is on (similar to how we do it with person cards).

[SoulAssassin (Anton Stolov)]

Here is my code: Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 2) - #48 by SoulAssassin

Here is the icon: Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 2) - #55 by SoulAssassin

[LiQuid_cOOled]

From bottom to top…

card_mod:
  style: |
    ha-state-icon {
      animation: air 3s infinite linear;
     }
    @keyframes air {
      0%, 100% { clip-path: inset(0 0 38% 0); }
      0% { clip-path: inset(0 0 0 0 ); }
     }
    :host {
      --icon-size: 80px !important;
      perspective: 900px;
       }

[Adrian_Apostol]

Hello everyone,

So, long story short, i am trying to recreate @rhysb dashboard setup from here
So far it seems that the styling part is defeating me

How it should look like:

How it looks for me

Also, blurring of the card doesn’t work with mushroom theme, only with the minimalist theme. However it still doesnt look like the original.

How it should look like:

Mine (mushroom theme)

Mine (minimalist theme)

Top sticky card:

card_mod:
  style: |
    /* Remove styling from top card with chips */
    ha-card {
      /* Allow pseudo elements to display outside card */
      overflow: visible !important;
      /* Remove gap at top of card */
      margin-top: calc(-1 * var(--mush-chip-spacing, 0px));
      /* Remove styling from card */
      box-shadow: none;
      border: none;
      background: none;
      padding: var(--mush-chip-spacing, 8px);
      transition: all 0s;
    }
    /* Make card sticky at top of page */
    :host {
      position: sticky;
      z-index: 4;
      top: 0px;
    }
    /* Pseudo element to hide card styling when at top */
    ha-card:after {
      content: "";
      /* Make fixed so element scrolls up */
      position: absolute;
      top: 0px;
      /* Adjust height when notifications visible */
      height: {{ '104px' if is_state('input_boolean.menuconsumi', 'on') else '60px' }};
      /* Set width to match */
      width: 100%;
      max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));
      /* Center element on page */
      left: 50%;
      transform: translateX(-50%);
      /* Position between chips and background pseudo elemnt */
      z-index: -1;[quote="system, post:1, topic:693055, full:true"]
      /* Match background to main card */
      background: rgba(var(--rgb-card-background-color), 0);
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
    }
    /* Pseudo element for background & other card styling */
    ha-card:before {
      content: "";
      /* Position & size card behind chips */
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;
      /* Adjust width to account for border */
      width: calc(100% - 2 * var(--ha-card-border-width, 1px));
      /* Position card at back */
      z-index: -1;
      /* Blur content behind card */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      /* Adjust opacity of card */
      background: rgba(var(--rgb-card-background-color), 0.1);
      /* Set styling of card */
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
      box-shadow: 20px !important;
      border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #
    }

Bottom card:

card_mod:
  style: |
    ha-card {
      /* Set padding of card */
      padding: 8px 8px 12px;

      /* Move card up to match header card */
      margin-top: -10px;

      /* Styling of card background */
      background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color)) !important;
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);

      transition: all 0s;
    }

Any help is welcomed.
Thanks

[berkans (Berkan Sezer)]

Hi

Do you have any idea about height control in tile card for light brightness?

or is it even possible ?

I can hide data but can not control light bar height.

The code I tried is.

type: tile
entity: light.hue_color_lamp_1_2
features:
  - type: light-brightness
card_mod:
  style: |
      ha-card .content {
        display: none !important;
      }
      ha-card {
        background: transparent;   
        padding: 0px 11px 11px;
        --mush-rgb-disabled: 189,189,189;
        --mush-rgb-state-light: 255, 152, 0;
        --control-height: 16px;
        --control-top: 16px;
        --control-border-radius: 5px;

[LiQuid_cOOled]

You are using a tile card not a mushroom card.

There is a Tile thread that was just started. @Mariusthvdb may know…

Style Tile: more-info

while I was at it, I had to change the card_mod for the Tile fan card…as it stopped coloring accordingly, and the icon didnt animate anymore somehow maybe its not as optimal as it could be, but it is robust and I include it on all of my fan tiles: type: tile entity: fan.woonkamer card_mod: !include /config/dashboard/card_mods/tile_fan_animate.yaml and this include (note the required card_mod: is already in the main cards config…) # tile_fan_animate style: hui-card-feature…

[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