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

[nappyjim (Jim)]

Is there some way to make a search card?

I have the top bar hidden using kiosk mode and would like to keep it that way. But I would like a quick way to search for an entity I made not have specifically made a card for.

[benm7 (Ben M)]

Lovelace: A simple Search card

I have created a simple search card that makes it easy to search for entities and display them in the frontend. I thought that maybe someone else might find it useful, so I decided to publish it. Here’s a small demo: [image] It’s very basic and I will add new stuff over time. If you have any feature requests feel free to ask (or preferably write an issue on github). Enjoy!

[rhysb (Rhys)]

Having a static icon for the climate card is boring, so I decided to have it change with the mode:

type: custom:mushroom-climate-card
entity: climate.office_air_conditioner
hvac_modes:
  - heat_cool
  - heat
  - cool
  - fan_only
  - dry
show_temperature_control: true
collapsible_controls: false
name: Air Conditioner
card_mod:
  style: |
    mushroom-shape-icon {
      --card-mod-icon: 
      {% if is_state(config.entity, 'heat_cool') %}
        mdi:autorenew
      {% elif is_state(config.entity, 'heat') %}
        mdi:fire
      {% elif is_state(config.entity, 'cool') %}
        mdi:snowflake
      {% elif is_state(config.entity, 'dry') %}
        mdi:water-percent
      {% elif is_state(config.entity, 'fan_only') %}
        mdi:fan
      {% else %}
        mdi:air-conditioner 
      {% endif %};
    }

[Mosher]

This should be standard!

[Fabvero]

I would be very interested too.

[rhysb (Rhys)]

If anyone needs to modify the Mushroom Title card, it can be done with card_mod like this:

type: custom:mod-card
card:
  type: custom:mushroom-title-card
  title: I'd rather be picking
  subtitle: Mushrooms 🍄
card_mod:
  style:
    mushroom-title-card$: |
      .title {
        --primary-text-color: rgb(var(--rgb-grey));  
        --title-font-size: 20px;
        --title-font-weight: lighter;
      }
      .subtitle {
        --secondary-text-color: rgb(var(--rgb-red));  
        --subtitle-font-size: 32px;
        --subtitle-font-weight: bolder;
      }
      .header {
        --title-padding: 8px 24px 8px;
      }

[image969 (James Scialdone)]

Is no one else having this problem?

[rhysb (Rhys)]

I don’t use these myself, but you could do a Mushroom Input Select card something like this:

Compact:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: '{{ state_attr(entity, ''friendly_name'') }}'
    secondary: '{{ states(entity) }}'
    icon: mdi:audio-input-rca
    entity: input_select.amp_source
    icon_color: red
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: input_select.amp_source
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: CD
          target:
            entity_id: input_select.amp_source
        icon: fas:compact-disc
        content_info: none
      - type: entity
        entity: input_select.amp_source
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Record
          target:
            entity_id: input_select.amp_source
        icon: mdi:record-player
        content_info: none
      - type: entity
        entity: input_select.amp_source
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Cassette
          target:
            entity_id: input_select.amp_source
        icon: mdi:cassette
        content_info: none
      - type: entity
        entity: input_select.amp_source
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Radio
          target:
            entity_id: input_select.amp_source
        icon: mdi:radio
        content_info: none
    alignment: justify
    card_mod:
      style: |
        ha-card {
          margin-top: 14px;
          margin-right: 12px;
          --chip-background: rgba(var(--rgb-disabled), 0.2);
          --chip-box-shadow: none;
        }

Expanded:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: '{{ state_attr(entity, ''friendly_name'') }}'
    secondary: '{{ states(entity) }}'
    icon: mdi:audio-input-rca
    entity: input_select.amp_source
    icon_color: red
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: input_select.amp_source
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: CD
          target:
            entity_id: input_select.amp_source
        icon: fas:compact-disc
        content_info: name
        name: CD
      - type: entity
        entity: input_select.amp_source
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Record
          target:
            entity_id: input_select.amp_source
        icon: null
        content_info: name
        name: Record
      - type: entity
        entity: input_select.amp_source
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Cassette
          target:
            entity_id: input_select.amp_source
        icon: mdi:cassette
        content_info: name
        name: Cassette
      - type: entity
        entity: input_select.amp_source
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Radio
          target:
            entity_id: input_select.amp_source
        icon: mdi:radio
        content_info: name
        name: Radio
    alignment: justify
    card_mod:
      style: |
        ha-card {
          margin: 0px 12px 12px;
          --chip-background: rgba(var(--rgb-disabled), 0.15);
          --chip-box-shadow: none;
          --chip-border-radius: 10px;
          --chip-height: 42px;
          --chip-padding:10px;
        }

I have previously shared an Input Number card:

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

Here is a Mushroom Input Number card if anyone needs one. It requires stack-in-card, mushroom-card, car-mod and my-slider from my-cards. [mishroom-input_number] type: custom:stack-in-card cards: - type: custom:mushroom-template-card entity: input_number.lounge_pc_volume icon: | {% set vol_level = states(entity) | float %} {% if vol_level == 0 %} mdi:volume-mute {% elif vol_level > 0.66 %} mdi:volume-high {% elif vol_level < 0.33 %} mdi…

[rhysb (Rhys)]

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

[Danny2100]

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?

GitHub - AnthonMS/ha-slider-card: Custom Slider Card for Home Assistant

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.

[image969 (James Scialdone)]

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

[wwwryan (Ryan W)]

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

[image969 (James Scialdone)]

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.

[Airyphyla]

@rolfokevin

popup_cards:
      light.all_lights:
        title: All Lights
        card:
          type: entity-filter
          entities:
            - light.ambilight_wled
            - light.bedroom_light
            - light.cabinet_lights
            - light.entryway
            - light.front_lights
            - light.kitchen
            - light.living_room
            - light.minecraft_wled
            - light.mirrorlight
            - light.wled
            - light.office_ambient
            - light.office_led_strip
            - light.office_lights
          state_filter:
            - 'on'

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?

[rhysb (Rhys)]

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

GitHub - AnthonMS/my-cards: Bundle of my custom Lovelace cards for Home...

[rhysb (Rhys)]

Maybe. Make a good backup and try updating.

[berkans (Berkan Sezer)]

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.

[berkans (Berkan Sezer)]

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.

[rhysb (Rhys)]

Do you mean like this?

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);
    }

[image969 (James Scialdone)]

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