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

[AJediIAm (Jaap)]

Rain is measured in mm/h. It can change significantly in minutes and it can differ significantly in a 100m area. Therefore, a rain sensor is the only meaningful way of detecting current rain.

The next best thing are the condition or the precipitation per hour.
Condition can be accurate to half an hour, but it’s often much worst.

In all cases, it is good to know how your favorite weather service works. Does it show the weather of the closest weather station or does it calculate an average for your exact location based on several weather relations.

A animated weather radar image can also be useful and would be my recommendation for must UI related things.

[LiQuid_cOOled]

I am not sure why you replied to me? I was simply sharing the fact the weather integrations have gone through significant changes. This topic and your reply is not Mushroom related.

I would suggest creating a Feature Request(FR) or new thread.

[LiQuid_cOOled]

Appreciate you sharing, here is a grill animation I created a while back.

type: custom:mushroom-template-card
primary: Grill
icon: mdi:grill
icon_color: black
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --icon-color: black !important;
        --icon-symbol-size: 30px;
        background: rgba(220, 220, 220, .3)
        !important;
        }
      .shape:before {
         content: "";
         height: 15px;
         width: 21px;
         border-width: 0;
         position: absolute;
         background: linear-gradient(to top left, #FFFF11 40%, red 57%);
         margin-top:-15px;
         filter: blur(1px);
         clip-path: polygon(71% 83%, 78% 73%, 81% 64%, 80% 55%, 76% 47%, 69% 41%, 63% 36%, 59% 30%, 56% 22%, 59% 14%, 62% 7%, 50% 15%, 44% 20%, 39% 28%, 35% 40%, 36% 49%, 38% 58%, 33% 57%, 30% 51%, 31% 35%, 24% 44%, 19% 59%, 21% 50%, 22% 66%, 26% 76%, 35% 85%, 48% 88%, 61% 86%);
         animation: fire 400ms ease-in-out infinite;
                    }
       @keyframes fire {
       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); }
        }
    .: |
      ha-state-icon {
           clip-path: polygon(15% 30%, 86% 30%, 100% 100%, 0% 100%); }
         }

[AJediIAm (Jaap)]

I have the bad habit of sharing useless facts. Maybe it is interesting to someone.

[Chykan (Andrew)]

I found it of interest.

[LiQuid_cOOled]

As did I, but still not Mushroom related. It’s best to keep topics within the appropriate thread to make it easier for future users to locate solutions based on the topic.

Cross posting just adds complexity to a search and we should do our part to improve the forum’s search engine…

[Chykan (Andrew)]

I agree but a certain amount of cross posting actually helps especially when related to an issue. The search engine rarely gets you close, I find myself scrolling through an entire thread just to find my answer. Main thing is the information is there and leads off in the right direction help. I digress this is also not mushroom related. BTW I appreciate your posts here and various other places on the forum, very helpful.

[tnbnilteilcwmbhqjv]

Hello, I’m using the media player card to make a volume bar. I was wondering if there’s a way to make another bar which control the playback position/progress of the media player?

type: custom:mushroom-media-player-card
volume_controls:
  - volume_set

[LiQuid_cOOled]

Check out the Mini-media-player You can add and hide a ton of features.

Using a stack card would make it easy to add to a Mushroom card if you are sticking with a particular style.

[FilipeOS]

Hi guys, can you advise how can I add the " graus" and " min" after the value in mushroom-number-card ? I tried secondary but did not work. secondary: '{{ states(entity) }} graus'

[LiQuid_cOOled]

This is one method

type: custom:mushroom-number-card
entity: input_number.apex
card_mod:
 style: 
   mushroom-state-info$: |
    .secondary:after {
     content: "graus"; }   

[FilipeOS]

don’t work

[Frosty]

it does work you just haven’t added it correctly!
look at this guide

especially the

What the $ and .: | symbols do

[Quokka1979 (Timmy)]

I’m running into a problem, probably because I just don’t know how to do it.

I want to enhance my mushroom card.
Right now it always shows Heat for no reason at all, so I wanted to use the sensor to check if it’s heating and adjust the icon colour to match the intensity.

Any help would be welcome.

Thank you.

type: custom:mushroom-climate-card
entity: climate.kitchen
layout: horizontal
hvac_modes:
  - auto
  - heat
show_temperature_control: true
card_mod:
  style: |
    ha-card {
      background: rgba(0, 0, 25, 0.45);
      border: 0px;
      box-shadow: none;
      padding: 4px 5px !important;
    }
cards:
  - type: custom:button-card
    entity: sensor.backdoor_thermostat_heating
    show_name: true
    name: |
      [[[
        const heatingPercent = parseFloat(states['sensor.backdoor_thermostat_heating'].state);
        if (heatingPercent === 0) { 
          return 'Off';
        } else {
          return `${heatingPercent} % Heating`;
        }
      ]]]
    show_icon: true
    icon: |
      [[[
        if (parseFloat(states['sensor.backdoor_thermostat_heating'].state) === 0) { 
          return 'mdi:radiator-disabled';
        } else {
          return 'mdi:radiator';
        }
      ]]]
    state:
      - value: '0'
        styles:
          icon:
            - color: white
      - value: '1'
        operator: '>='
        styles:
          icon:
            - color: yellow
      - value: '25'
        operator: '>='
        styles:
          icon:
            - color: orange
      - value: '50'
        operator: '>='
        styles:
          icon:
            - color: red

[msalessandro69]

For some reason when I am casting my dashboards my mushroom cards when casted are missing but they show up on my desktop and mobile mushroom cards are still showing up.

anyone going through something similar?

[toml0006 (Jackson Tomlinson)]

I cannot for the life of me get any card_mod settings to take effect; I am running version 3.6.2. I am using the following simple configuration:

type: custom:mushroom-cover-card
entity: cover.garage_doors
card_mod:
  style: |
    ha-card{
      background: none !important;
    }

…and here is a screenshot of the result:

I expect the card background to be transparent, but the card carries the default theme background color. Is there a trick to getting card_mod configurations to take?

[fugley]

make sure to clear browser cache

[Frosty]

try

background: rgba(0,0,0,0); 

[Fifthy (P.Hill)]

I’ve organized my entities into separate cards for each room. Some rooms have too many entities to fit on a single card. Is there a way for these entities to automatically cycle through within their respective cards?

[Frosty]

you could add a drop down list of entities that don’t fit on your card