Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

Share your Projects!
,
5995

but if you increase the icon size, the battery indicator ring doesnt resize.

5996

Try something like this:

type: custom:mushroom-person-card
entity: person.rhys
icon_type: entity-picture
card_mod:
  style:
    mushroom-shape-avatar$: |
      .container:before {
        content: "";
        height: 100%;
        width: 100%;
        background: radial-gradient(rgb(var(--rgb-white)) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-green)) {{ states('sensor.rhys_phone_battery_level') }}% 0%, transparent 0% 100%);
        border-radius: var(--icon-border-radius);
        position: absolute;
        -webkit-mask-image: radial-gradient(circle calc(var(--icon-size) / 2 - 0.3em) at 50% 50%, transparent 100%, black 0);
      }
    .: |
      ha-card {
        --icon-size: 72px;
      }
1 Like
5997

Brilliantā€¦THX.

1 Like
5998

Exactly what i searched for .

Thanks.

1 Like
5999

Hi,
iĀ“m a bit confused why the borders of the cards are visible:

BildschirmĀ­foto 2023-03-20 um 14.51.08
BildschirmĀ­foto 2023-03-20 um 14.51.081018Ɨ274 10.5 KB

Can anyone let me know how to remove them?

6000

change the theme to Mushroom Shadow and that will fix it on the device

1 Like
6001

Many thanks for your help

1 Like
6002

is it possible to share the SVG files you use as part of this? Thanks in advance and awesome work!!!

/local/weather_icons/anim/{{ condition }}.svg
1 Like
6003

Is there something like a ā€œblankā€ card with the dimensions of a mushroom card that can be used as a ā€œfillerā€ guys?

6004

Knew I would forget something :roll_eyes:.

Added.

1 Like
6005

Whats the full path to put the files?

6006

Use the Gap card from Layout Card.

2 Likes
6007

You can put them anywhere in \config\www. I put theme here \config\www\weather_icons\anim.

1 Like
6008

I have put them in that path you have, and in the yaml this ā€œ/local/weather_icons/anim/{{ condition }}.svgā€ but nothings shows up.

But its amazing what you have made

1 Like
6009

What does it say for the weather condition? Currently ā€œPartly Cloudyā€ for me.

6010

It say sunny

6011

Does this work for you?

type: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''temperature'') | round(1) }} Ā°C'
secondary: '{{ states(entity) | title }}'
icon: none
entity: weather.weatherflow_hourly_based_forecast
picture: >-
  {% set condition = states(entity) %} {% if condition == 'partlycloudy' and
  is_state('sun.sun', 'below_horizon') %}
    {% set condition = condition + '-night' %}
  {% endif %} /local/weather_icons/anim/{{ condition }}.svg
card_mod:
  style: |
    ha-card {
      --icon-border-radius: 0;
    }
1 Like
6012

tried that, but it actually is an empty space. What I amlooking for is an empty button I guess?

Screenshot 2023-03-20 om 20.57.19
Screenshot 2023-03-20 om 20.57.191270Ɨ270 55.1 KB

"

So same as this but without icon, withoud mushback without primary text and without state.

6013

it works for me, I read somewhere that HA has to be restarted in order to recognize icons :thinking: not sure if that is your case

6014

Could you add - somewhere - a screenshot of your current setup and not just the cards you have? I am looking for some inspiration to finish up my dashboard since it is a mess :see_no_evil: