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

[rhysb (Rhys)]

You need to use .:, like this:

card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {{  '--icon-animation: fountain 1.5s ease infinite;' if is_state(config.entity, 'on') }}
      }
      @keyframes fountain {
        0%, 100 { clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); }
        50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
        60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
        70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
        80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
      }
    .: |
      ha-card {
        --icon-size: 300px;
      }

[kakarotto185]

Thank you. That did the trick

[rhysb (Rhys)]

It will be because you are using --rgb-indigo-color. This was added, then removed from HA. You could change it to rgba(var(--mush-rgb-indigo, 63, 81, 181), 0.2).

[rhysb (Rhys)]

You can position the Browser Mod Popup like this:

type: custom:mushroom-template-card
icon: mdi:mushroom
icon_color: red
primary: Mushroom
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: Mushroom Popup
      content:
        type: custom:mushroom-template-card
        icon: mdi:mushroom
        icon_color: red
        primary: Mushroom
      card_mod:
        style: |
          ha-dialog {
            --vertical-align-dialog: center !important;
          }

Use flex-start for the top, center for the middle and flex-end for the bottom. flex-start is the default.

[Mariusthvdb (Marius)]

trying ti mimic the icon background Mushroom (Tile core) uses on a custom:button-card, I need some help please. Ive ran through the complete Mushroom repo but can not find the way this is done, transposable to button-card.

I do have the background color (or at least believe so)

      - type: custom:button-card
        entity: light.dining
        icon: mdi:silverware
        <<: &style
          template: button_light
          show_last_changed: false
          styles:
            icon:
  #             - filter: drop-shadow(0 0 12px var(--button-card-light-color))
              - background: >
                  [[[ var color = entity.attributes.rgb_color;
                      return (entity.state === 'on') ?
                      'rgba(' + color + ',0.2)' : 'none'; ]]]

but as you can see the shape isnt there yet

top is button-card, bottom is Tile card with some mods to make it square.
Since Mushroom would be closest to what Core Tile does, I hope anyone of you here can help me with the background shape

I’ve posted also in button-card for this, so hope not to offend using this crosspost…

[basbrus (Bas)]

As mushroom is almost a typescript version of Minimalist you should be able to find the templates used with custom:button-card for the icon style: UI/icon.yaml at 0f473d63ad86baa60a7bf36eff1946d389993f7f · UI-Lovelace-Minimalist/UI · GitHub

[Radeaus (Quinten)]

Great, thanks! It seems more complicated than I thought. I have not much experience with CSS.

I filled in as custom color: green. Do you know how to implement a custom color? For example, I want it to be the same color as the graph. #3D5AFE

But when I fill the RGB, I get this:

    card_mod:
      style: |
        mushroom-shape-icon {
            --rgb-state-media-player: var(--rgb-72, 133, 237)
          }

Any idea how to fill in the correct RGB?

[Mariusthvdb (Marius)]

thanks!

I did search the templates, but apparently missed the internal ones… and indeed wherever I check those, like also here, this is used:

    img_cell:
      - background-color: "rgba(var(--color-theme),0.05)"
      - border-radius: "50%"
      - place-self: "center"
      - width: "42px"
      - height: "42px"

using that in my button-card does make a difference:

its somehow also depicted in inspector:

which I ws trying to recreate as you posted

experimenting with that setting in the template to eg:

          styles:
            img_cell:
#               - background-color: "rgba(var(--color-theme),0.05)"
              - border-radius: 50%
              - place-self: start
              - width: 42px
              - height: 42px

does move the icon, but still only uses the ::before bit…
feels close, but not there yet…

I;ll move back over to button card, as that is where I am trying to rebuild this, sorry to bother here

[Eoin]

I have no doubt this has already been answered but after multiple searches cannot find the solution.

How do you reduce the gap between the ‘Icon’ and ‘Primary’ text in a template card when using the vertical layout?

Thx.

[dicko (Martyn)]

Hi

I can get a chip card animated for 1or more lights turned on and also a separate chip card badge with number of lights on but I cant seem to get the 2 working together for when 1 or more light is on for the group and badge indicates number of lights on ?

Is that possible ?

Thanks

Martyn

[kazir1]

card_mod:
  style: >
    {% if states('light.svetilnik_vannaya_1') == 'on' or
    states('light.svetilnik_vannaya_2' ) == 'on' or
    states('light.svetilnik_vannaya_3' ) == 'on' %}
      ha-card {
      border: solid #B8860B;
      box-shadow: 0px 0px 9px 1px #DAA520;
      background: url('/local/rooms/vanna.jpg' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
      background-size: 50%, 100%;
      background-color: rgba(0, 0, 0, 0.1);
      background-position: right;
      background-repeat: no-repeat;
      background-blend-mode: lighten;
    } 
      {%else%} 
      ha-card {
      border: solid #A9A9A9;
      box-shadow: 0px 0px 9px 1px #808080;
      background: url('/local/rooms/vanna.jpg' ), linear-gradient(to left, transparent, rgba(var(--rgb-card-background-color)) 50% );
      background-size: 50%, 100%;
      background-color: rgba(255, 255, 255, 0.6);
      background-position: right;
      background-repeat: no-repeat;
      background-blend-mode: lighten;
    }   {%endif%}

[carpenter01 (Ur Red Chemist)]

Don’t think I’ve changed anything. Have you tried clearing browser cache?

[andrew.vint]

This is a bit of a random comment but still sticking with the mushroom cards topic.

I have recently completly rebuilt my lovelace dashboard for mobiles using the mushroom cards and tried like i have in outher areas to do it all using the GUI, though relaity is that a lot of YAML has been used to tweak the look and feel of the cards etc.

I am looking for a bit of inspiration, as i have been inspired a lot by reading through this thread, on anyone that has created a home cinema or theatre page that is in keeping with the mushrooms card theme. I have a projector, plex server, fire tv, xbox etc.

I have played about already but its a bit cluttered and doesnt really look like where it needs to be, reality is i need something that is functional yet looks impressive for when you want to show off lol

Is anyone happy to share the look of there theatre / home cinema cards out there so i can shamelessy copy the best bits ?

Thanks in advance

[Sylwester (Sylwester Olik)]

Thanks.
Your solution work. I had in my theme file this:

    card-mod-more-info-yaml: |
        ha-dialog {
          --vertical-align-dialog: center !important;
        }

I am not sure if that is correct. Strange behaviour. Do not work all the time.
I do not want edit all my cards to add this style code.
Is this code above correct?

[Sylwester (Sylwester Olik)]

I found something. After refresh this code in theme file doesn’t work. Popup is always on top, but then if I press card where I have your code and popup shows in the middle all popups starts showing in the middle. After refresh again all popups are on top until I press this card with your code. Any idea?

[cretzu8523 (8523tiberiu)]

@kazir1

linear-gradient(to left, transparent, rgba(var(--rgb-card-background-color)) 50% );

thank you …now is working

[rhysb (Rhys)]

Hey Martin, is this what you are trying to do?

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:lightbulb
    entity: group.all_lights
    icon_color: amber
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Lights On
          content:
            type: custom:auto-entities
            filter:
              include:
                - group: group.all_lights
                  state: 'on'
                  options:
                    type: custom:mushroom-light-card
                    show_brightness_control: true
                    layout: horizontal
                    tap_action:
                      action: toggle
                    use_light_color: true
                - entity_id: group.all_lights
                  state: 'on'
                  options:
                    type: custom:mushroom-light-card
                    layout: horizontal
                    secondary_info: none
                    tap_action:
                      action: toggle
                    card_mod:
                      style: |
                        ha-card {
                          background: rgba(var(--rgb-state-light), 0.1);
                        }
                        :host {
                          margin: 0px 0px 12px !important;
                        }
              exclude: []
            card:
              type: custom:layout-card
              cards: []
              layout_type: masonry
            sort:
              method: friendly_name
          card_mod:
            style: |
              .content {
                margin: -24px -16px -24px -16px !important;
                --ha-card-border-width: 0;
                --ha-card-background: none;
                --ha-card-box-shadow: 0;
                --masonry-view-card-margin: -12px 0px 0px 0px;
              }
    card_mod:
      style: |
        ha-card:after {
          {% set lights_on = (expand(states.group.all_lights) | selectattr('state', 'eq', 'on') | list | count) %}
          {% if lights_on > 0 %}
            content: "{{ lights_on }}";
          {% endif %}
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgb(var(--rgb-amber));
          color: var(--card-background-color);
          font-weight: bolder;
          border-radius: 50%;
          top: -5px;
          right: -5px;
          width: 16px;
          height: 16px;
          font-size: 11px; 
        }
        .content {
          {% if lights_on > 0 %}
            animation: boing 3s ease infinite;
          {% endif %}
          transform-origin: 50% 90%;
        }
        @keyframes boing {
          0% { transform: scale3d(1, 1, 1); }
          7% { transform: scale3d(1.25, 0.75, 1); }
          10% { transform: scale3d(0.75, 1.25, 1); }
          12% { transform: scale3d(1.15, 0.85, 1); }
          16% { transform: scale3d(0.95, 1.05, 1); }
          19% { transform: scale3d(1.05, 0.95, 1); }
          25% { transform: scale3d(1, 1, 1); }
        }   

[rhysb (Rhys)]

Try like this:

    card-mod-more-info: |
        ha-dialog {
            --vertical-align-dialog: center !important;
        }

Seems to work reliably for me…

[rhysb (Rhys)]

You can remove or reduce the gap with --spacing like this:

type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
layout: vertical
card_mod:
  style: |
    mushroom-state-item {
      --spacing: 0;
    }

[Jarne_Roussard]

thanks man !