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

Have you tested in different browsers? Does it do this in incognito mode?

Thank you!!

It looks like the my-slider card has been archived.

I wonder if there are alternatives? The 2 forks haven’t been updated since 2021 either. Does your card still work and which one are you using?

I have a lot of options for one of the input_selects. I wonder if there is a way to get the drop-down with all of the selects integrated into a mushroom card? The entities card looks unappealing and is huge.

A ton of wasted space on the right of the option text box.

I’m just using the app from my iPhone.
I’ve cleared the cache and all that. I’ve never had this problem with any other card. Until I just updated mushroom and started using the Climat card a few days ago

Does anyone know of a way to leverage a folded stack of mushroom entity cards? (Similar to the Lovelace Fold Entity Row)

1 Like

I’m still in 22.5. Could this be why? I don’t like updating stuff u less I hav to . AlwYs scares me that something I’m using might not work.

I too dont get how to make this. This shows the current lights on when you press on a sensor that details n-lights-on. Where do you place this code?

1 Like

It is the same slider that Minimalist UI currently uses. Have a look here:

1 Like

Maybe. Make a good backup and try updating.

So I am about to finish my all lights and switches page.

Only the devices that has “On” status is being displayed in the are below. When I click any of the device a new light control window opens. I can also turn them of with a single click from this area.

Top bar which has room cards gets activated automatically when any of the relevant light turns on. It also displays the number of currently turned on switch and lights together.

They are 4 color wheels int the page. All of them are controlled from the chips below.

Whenever I want to use another light group color wheel I only click the chip to get it on screen.

I am also going to build a section to the bottom of the page containing non active light and switches. They will all be grayed out and would be turned on individually from there.

2 Likes

Hi Rhysb

Is it possible to use a light control slider inside a mushroom template card ?

I managed to do so with some methods but they were uneffective.

type: custom:mushroom-template-card
primary: Sarkıt Sağ
picture: /local/png2/sarkitsag.png
icon: null
entity: light.hue_color_lamp_1
tap_action:
  action: toggle
double_tap_action:
  action: call-service
  service: script.turn_on
  data: {}
  target:
    entity_id: script.browser_sarkt_sag
fill_container: false
layout: vertical
multiline_secondary: false
card_mod:
  style: |
    :host([dark-mode]) {
      background: rgba(var(--rgb-primary-background-color), 0.5);                                   
    } 
    :host {
      background: rgba(var(--rgb-primary-text-color), 0.025);
      --mush-icon-size: 68px;
      margin-left: 5px !important;
    }
    mushroom-card {
      background-size: 55px 40px;
      {% if is_state('light.hue_color_lamp_1', 'on') %}
      {% else %}
        filter: grayscale(100%);
      {% endif %} 
    }
    mushroom-shape-icon {
      --shape-color: none !important;
    }
    ha-card {
      background: rgba(var(--rgb-primary-background-color), 0.5);
                                      }

It will be so cool if I can manage to do that.

Ekran Resmi 2022-08-03 02.15.17

Do you mean like this?

Pendant Lamp

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Sarkıt Sağ
    picture: /local/png2/sarkitsag.png
    entity: light.hue_color_lamp_1
    tap_action:
      action: toggle
    double_tap_action:
      action: call-service
      service: script.turn_on
      data: {}
      target:
        entity_id: script.browser_sarkt_sag
    fill_container: false
    layout: vertical
    multiline_secondary: false
    card_mod:
      style: |
        ha-card {
          --icon-size: 68px;
          background-size: 55px 40px;
          {% if is_state(config.entity, 'on') %}
          {% else %}
            filter: grayscale(100%);
          {% endif %}        
        }
  - type: custom:my-slider
    entity: light.hue_color_lamp_1
    radius: 12px
    height: 42px
    thumbHorizontalPadding: 0px
    thumbVerticalPadding: 0px
    thumbWidth: 0px
    mainSliderColor: rgb(var(--mush-rgb-state-light))
    secondarySliderColor: rgba(var(--mush-rgb-state-light), 0.2)
    mainSliderColorOff: rgb(var(--mush-rgb-disabled))
    secondarySliderColorOff: rgba(var(--mush-rgb-disabled), 0.2)
    card_mod:
      style: |
        ha-card {
          padding: 0px 11px 11px;
          --mush-rgb-disabled: 189,189,189;
          --mush-rgb-state-light: 255, 152, 0;
        }
card_mod:
  style: |
    ha-card {
      background: rgba(var(--rgb-primary-text-color), 0.025);
    }
2 Likes

Nah didn’t help. Have to pull to refresh to get it to look right. Only the new climate card. So weird . I’ll live with it I guess

Been struggling to find a solution to this, but does anyone know how to set a custom font-family globally across lovelace? Ideally something from Google Fonts or a TFF that I can upload to HA somewhere. I know you can do card mod on some components but it doesn’t work everywhere, only seems to work on a small number of fonts, and would also be incredibly tedious to go through every card like this. Thanks!

@rhysb

I used part of your config as dashboard.
is it possible to remove the line at the bottom, or make it 1 whole? that the window continues.

You can remove the box-shadow of the stack-in-card with card-mod at the bottom like this:

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

If that doesn’t make any sense, post your code.

4 Likes

thank you very much, it worked!
is there an option to make it fit for any resolution?

1 Like

Looks like an official mushroom input number card may be on the way

1 Like

Is this the sort of thing you wanted?

Mushroom Folded Entities:

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 42px
      margin: '-4px -4px -8px -4px;'
    cards:
      - type: custom:mushroom-light-card
        entity: light.lounge_light
        layout: horizontal
        show_brightness_control: true
        card_mod:
          style: |
            ha-card {
              background: none;
              --ha-card-box-shadow: 0px;
            }
      - type: custom:mushroom-template-card
        entity: input_boolean.lounge_lights_dropdown
        primary: ''
        secondary: ''
        icon: >-
          {{ 'mdi:chevron-up' if is_state(entity, 'on') else 'mdi:chevron-down'
          }}
        icon_color: disabled
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card {
              align-items: flex-end;
              background: none;
              --ha-card-box-shadow: 0px;
            }
            mushroom-shape-icon {
              --shape-color: none !important;
            }  
  - type: conditional
    conditions:
      - entity: input_boolean.lounge_lights_dropdown
        state: 'on'
    card:
      type: custom:auto-entities
      filter:
        include:
          - area: Lounge            
            domain: light
            options:
              type: custom:mushroom-light-card
              show_brightness_control: true
              layout: horizontal
              tap_action:
                action: toggle
              use_light_color: true
              card_mod:
                style: |
                  ha-card {
                    background: none;
                    padding: 4px 16px !important;
                    --ha-card-box-shadow: 0px;
                  }
      card:
        type: custom:layout-card
        cards: []
        layout_type: masonry
      sort:
        method: friendly_name
17 Likes

@rhysb is there anyway to customize the mushroom title card font type, font size, font color?

The font type or size does not match the rest of the mushroom cards. At least to me they don’t look the same. It would be great if it was possible to make them match with card-mod or in the future get them to match natively.

Yes exactly this!! However I already tried that but as far as I know, my slider card does not have a light color state property. So I switched to mushroom light card. Thank you very much.

1 Like