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

I’ve added one for Air Purifier too :grinning_face_with_smiling_eyes:

3 Likes

Hm still unable to get either of these 2 to work.

You need to change the border-radius, like this:

card_mod:
  style: |
    mushroom-shape-icon {
      display: flex;
      animation: cool 15s ease-in-out infinite;
      border-radius: 50%;
    }
    @keyframes cool {
          60% { box-shadow: 0 0 0 0 rgba(var(--rgb-cyan), 0.7); }
          100% { box-shadow: 0 0 5px 15px transparent; }
          0%, 100% { transform: rotate(25deg); }
          25% { transform: rotate(-25deg); }
          50% { transform: rotate(50deg); }
          75% { transform: rotate(-50deg); }
    }

Like this:

            card_mod:
              style: 
                mushroom-state-info$: |
                  .primary {
                     text-align: center;
                  }
                .: |
                  mushroom-shape-icon {
                    --shape-color: none !important;
                    --shape-color-disabled: none !important;
                  }
                  ha-card { 
                    background: transparent;
                    border-radius: 20px;
                    margin-left: auto;
                    margin-right: auto;
                    margin-bottom: 2px;
                    --icon-border-radius: 0;
                  }

Just remove the card-mod at the bottom then. This one:

card_mod:
  style: |
    ha-card { 
      background: transparent;
      --ha-card-box-shadow: none;
    }

If I do that I get the shadow around the stack in card.

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - area: Temperature Sensors
          entity_id: /[te]mperature/
          options:
            type: custom:mushroom-template-card
            primary: '{{ states[entity].name }}'
            secondary: '{{ states(entity) | title }}'
            picture: null
            hold_action:
              action: toggle
            double_tap_action:
              action: more-info
            layout: null
            tap_action:
              action: none
            card_mod:
              style: |
                mushroom-shape-icon {
                  --shape-color: none !important;
                  --shape-color-disabled: none !important;
                }
                ha-card { 
                  background: transparent;
                  border-radius: 20px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                  --icon-border-radius: 0;
                }
                mushroom-state-info$: |
                  .primary {
                     text-align: center;
                }
      exclude: []
  - type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - area: Temperature Sensors
          entity_id: /[hu]midity/
          options:
            type: custom:mushroom-template-card
            primary: '{{ states[entity].name }}'
            secondary: '{{ states(entity) | title }}'
            picture: null
            hold_action:
              action: toggle
            double_tap_action:
              action: more-info
            layout: null
            tap_action:
              action: none
            card_mod:
              style: |
                mushroom-shape-icon {
                  --shape-color: none !important;
                  --shape-color-disabled: none !important;
                }
                ha-card { 
                  background: transparent;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                  --icon-border-radius: 0;
                }
      exclude: []

I only want the shadow around the mushroom cards.

Odd, that didn’t work either.

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - area: Temperature Sensors
          entity_id: /[te]mperature/
          options:
            type: custom:mushroom-template-card
            primary: '{{ states[entity].name }}'
            secondary: '{{ states(entity) | title }}'
            picture: null
            hold_action:
              action: toggle
            double_tap_action:
              action: more-info
            layout: null
            tap_action:
              action: none
            card_mod:
              style:
                mushroom-state-info$: |
                  .primary {
                     text-align: center;
                  }
                .: |
                  mushroom-shape-icon {
                    --shape-color: none !important;
                    --shape-color-disabled: none !important;
                  }
                  ha-card { 
                    background: transparent;
                    border-radius: 20px;
                    margin-left: auto;
                    margin-right: auto;
                    margin-bottom: 2px;
                    --icon-border-radius: 0;
                  }
      exclude: []
  - type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - area: Temperature Sensors
          entity_id: /[hu]midity/
          options:
            type: custom:mushroom-template-card
            primary: '{{ states[entity].name }}'
            secondary: '{{ states(entity) | title }}'
            picture: null
            hold_action:
              action: toggle
            double_tap_action:
              action: more-info
            layout: null
            tap_action:
              action: none
            card_mod:
              style:
                mushroom-state-info$: |
                  .primary {
                     text-align: center;
                  }
                .: |
                  mushroom-shape-icon {
                    --shape-color: none !important;
                    --shape-color-disabled: none !important;
                  }
                  ha-card { 
                    background: transparent;
                    border-radius: 20px;
                    margin-left: auto;
                    margin-right: auto;
                    margin-bottom: 2px;
                    --icon-border-radius: 0;
                  }
      exclude: []

Your text is longer than the width of the card…

Legend, ta.

1 Like

Oops that worked when I shrunk it.

Any idea about the box shadow of the stack-in-card? I want to keep the mushroom card shadow but not the stack-in-card

1 Like

Ohw that it’s perfect thank you

1 Like

Yeah. Kinda fixed it. But it doesn’t yet take into account if the light IS NOT an rgb light.
So, color lights works fine. But the slider cant read normal none rgb lights as they are brightness only I guess.

Looking at you @rhysb

Edit: code updated twice

code for card, two in one :D
type: horizontal-stack
cards:
  - type: custom:stack-in-card
    cards:
      - type: horizontal-stack
        cards:
          - type: vertical-stack
            cards:
              - type: custom:mushroom-light-card
                entity: light.bella_ledlight
                use_light_color: true
                show_brightness_control: false
                show_color_temp_control: false
                show_color_control: false
                collapsible_controls: false
                primary_info: none
                secondary_info: none
                fill_container: false
              - type: custom:mushroom-light-card
                entity: light.bella_ledlight
                use_light_color: true
                show_brightness_control: false
                show_color_temp_control: false
                show_color_control: false
                collapsible_controls: true
                icon_type: none
                name: RGB Light
          - type: custom:my-slider-v2
            entity: light.bella_ledlight
            vertical: true
            styles:
              card:
                - height: 113px
                - width: 35px
              container:
                - border-radius: 12px
              track:
                - background: >
                    [[[ if (entity.state == "off") return
                    "rgba(var(--mush-rgb-disabled), 0.2)";
                     else return "rgba(var(--mush-rgb-amber), 0.2)";
                    ]]]
              progress:
                - background: |
                    [[[
                      return `rgb(${entity.attributes.rgb_color})`
                    ]]]
              thumb:
                - width: 0px
            card_mod:
              style: |
                ha-card {
                  padding: 12px 12px 12px;
                }
  - type: custom:stack-in-card
    cards:
      - type: horizontal-stack
        cards:
          - type: vertical-stack
            cards:
              - type: custom:mushroom-light-card
                entity: light.vardagsrum_golvlampa_tv_soffa_light
                use_light_color: true
                show_brightness_control: false
                show_color_temp_control: false
                show_color_control: false
                collapsible_controls: false
                primary_info: none
                secondary_info: none
                fill_container: false
              - type: custom:mushroom-light-card
                entity: light.vardagsrum_golvlampa_tv_soffa_light
                use_light_color: true
                show_brightness_control: false
                show_color_temp_control: false
                show_color_control: false
                collapsible_controls: true
                icon_type: none
                name: Normal Light
          - type: custom:my-slider-v2
            entity: light.vardagsrum_golvlampa_tv_soffa_light
            vertical: true
            styles:
              card:
                - height: 113px
                - width: 35px
              container:
                - border-radius: 12px
              track:
                - background: >
                    [[[ if (entity.state == "off") return "rgba(var(--mush-rgb-disabled),
                    0.2)";
                     else return "rgba(var(--mush-rgb-amber), 0.2)";
                    ]]]
              progress:
                - background: |
                    [[[ if (entity.state == "off") return "rgb(var(--mush-rgb-disabled))";
                     else return "rgb(var(--mush-rgb-amber))";
                    ]]]      
              thumb:
                - width: 0px
            card_mod:
              style: |
                ha-card {
                  padding: 12px 12px 12px;
                }

Can you post a screenshot of what you’re seeing? Mine might be a little different I believe.

Web browser
image

Using some chrome function, Shift Ctrl “i”

Ipad
image

iPhone 12 pro
image

Yep, that’s what I have too! I see what you did with the RGB Light. Very impressive! I believe this as close as we can get to it right now but I definitely want to somehow figure out how to include these two buttons below.

Screen Shot 2022-10-21 at 5.04.52 PM

That opens the door for me to do pop-ups for individual light controls vs. more-info pop-up to change the color/temperature. Just a better design and UI experience that way.

boks

I want a border like this around the mushroom title card, with a transparent background.
How do I do this?

Where do you want them? Do a photoshop drawing and show me, and I’ll give it a try.

aad0712279e81ccefc03c184815d53954d6b05e8

This is what I’m looking for.

One compact card with a vertical slider that controls the temperature and RGB control.

Everything in a normal mushroom light card but with a vertical slider rather then a horizontal slider. All the same controls and options

4 Likes

Hi there. I was curious if you are still using the custom sidebar card for your dashboard or if you have recreated it using a stack? The custom card does indeed look slick but I am having the bottom-card-not-showing or must-refresh-to-see-sidebar issue that others are having in many other threads. I think I may be able to submit a PR for a modified sidebar card that fixes the bottomCard issue by this weekend… but I’ve thought that for the past few weekends before getting busy :slight_smile: If you are using the custom card, are you having any reliability issues? If not, would you be opposed to sharing how you built the sidebar manually?

Thanks!

@rhysb This morning I found myself thinking that with all the hundreds of customizations you’ve helped this community implement, I wonder what the latest production version of your own mobile view looks like. You had before shared your dark/light versions of the primary home card, room cards, etc., and I wonder if they have changed much over the months? My base model still uses the layout you used back in the “early days” of mushroom and I was curious if you wouldn’t mind to post a refreshed view of what you yourself use? Even if not, thanks again for all of the contribution here - it’s really awesome.

4 Likes