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

quinquelhas · December 17, 2023, 1:56pm

Hello

Why doesn’t change the color of letters when it reaches 100%?

ha-card {
                --primary-text-color:
                  {% set nivelbateria = states('sensor.quinquelhas_battery_level')%}
                  {% if nivelbateria > '0'  and nivelbateria < '20' %} red
                  {% elif nivelbateria > '21' and nivelbateria  < '80' %} orange
                  {% else %} green
                  {% endif %}
                }

it works red and orange, also green but when it reaches 100, doesn’t work…

changeqsq · December 17, 2023, 1:58pm

I cannot get card_mod to work in Mushroom and Button Card, but the examples using card_mod are effective. How can I resolve this issue?

type: custom:mushroom-person-card
entity: person.qsq
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: orange !important;
      }

dimitri.landerloos · December 17, 2023, 2:03pm

Try the same thing with background instead.

--shape-color only applies the color when the entity is considered on (so for person entity when home).

type: custom:mushroom-person-card
entity: person.qsq
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: orange !important;
      }

Does this work?

dimitri.landerloos · December 17, 2023, 2:05pm

You are comparing a float to a string.
The output of your sensor is likely to be a float. But your values you are comparing against are string because you have wrapped them in '100' if you try without the ' ' it will probably work.

Strings and floats are comparable, but not the way you would expect, so your result is going to be strange.

changeqsq · December 17, 2023, 2:05pm

This is effective, thank you very much. Because I’m just starting to learn and don’t understand many things, may I ask where you recommend starting to learn Mushroom?

dimitri.landerloos · December 17, 2023, 2:08pm

If you are talking about card mod and mushroom together you can look through the guide in my profile for examples. If you are talking about just mushroom the github would probably be best.

quinquelhas · December 17, 2023, 2:10pm

If i try without ’ ’ doesn’t work

dimitri.landerloos · December 17, 2023, 2:14pm

Clearly your sensor isnt a float automatically.

This should work:

       {% set nivelbateria = states('sensor.office_blinds_battery') | float%}
       {% if nivelbateria >= 0  and nivelbateria < 20 %} 
         red;
       {% elif nivelbateria >= 21 and nivelbateria  < 80 %} 
         orange;
       {% else %} 
         green;
       {% endif %}

quinquelhas · December 17, 2023, 2:18pm

Ok i will change that…

I take advantage of you being here , how i do to make round the nambers?

I put round in the end?

dimitri.landerloos · December 17, 2023, 2:23pm

You can yes.

Vs:

quinquelhas · December 17, 2023, 2:26pm

thanks

Mattia2399 · December 17, 2023, 6:51pm

Do you know how to create a media player card that uses Spotify as a music service and with a drop-down menu where you can select the source to play the music?

For the card I would have no problem creating it, but what about the services/scripts to manage the sources?

dimitri.landerloos · December 17, 2023, 9:44pm

Sorry i am going to have to say outside of my experience - but i would also say that the question is probably not for the Mushroom thread

queerco · December 18, 2023, 4:30am

V3 of my nest hub HA Dashboard ft Jellyfin, LMS and stash app integration. I’m very proud of this.

The floorplan is just an image background, and grid layout cards with mushroom cards did most of the rest.

LiQuid_cOOled · December 18, 2023, 8:25am

Is there a way to only transform/skew a box-reflect? It looks like an aged function, but its appears to be a good way to create a 3D look without using entity pics if it’s possible.

dimitri.landerloos · December 18, 2023, 9:55am

Vs

Or do you mean something else?

Otherwise its just playing with the 2 first values.

card_mod:
  style: |
    ha-card {
      box-shadow: -10px 10px 15px green;
    }

LiQuid_cOOled · December 18, 2023, 10:10am

Something different. -webkit-box-reflect: is what I was referencing. I was curious if transform: edits could be used on the box-reflect

card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
               --shape-color: none;
               -webkit-box-reflect: below -10px linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4));
                    }

queerco · December 18, 2023, 5:20pm

Just did a full post on it for reddit

LiQuid_cOOled · December 19, 2023, 6:09am

Working on a sleek 3D Mushroom dashboard using Card Mod’s ability to edit the pseudo elements (:after , :before ) . I’ll share the code and finished project when a larger chunk is complete.

dimitri.landerloos · December 19, 2023, 10:01am

Just a note to say that it is not Mushrooms ability to edit pseudo elements. Card Mod provides the facility, but it is native CSS.