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

[LiQuid_cOOled (Not really a...)]

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 (Not really a...)]

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 (Not really a...)]

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 (Not really a...)]

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 (Not really a...)]

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 (Not really a...)]

@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 (Not really a...)]

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 (Not really a...)]

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