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

[Pulpyy]

Simply use

relative_time(here.timestamp)

[coolhand]

Thanks for that @rhysb. But in my case, I would prefer to use the paper-item-icon-active-color that is already defined by the user-selected theme. I don’t want to explicitly define any color in particular, but rather just use the theme’s color. To be totally clear, I am not a css expert, so I might be missing something very simple. I guess maybe there must be a way to convert the already-defined paper-item-icon-active-color from a HEX to RGB so I can use the rgba function to adjust the opacity of the shape color, or perhaps there is already a mechanism in place to use the user-selected theme colors? Am I overthinking this, or is there no simple way to do this?

[image969 (James Scialdone)]

Anyone else having this issue with the climate cards? I just finally updated mushroom when I realized these are available, and if I pull down to refresh they work fine. But when I first open up HA, the card always looks like this.

[Mobiledude (Ronin)]

follow the thread of this guy above. heposted an example of what you want Mushroom Cards - Build a beautiful dashboard easily 🍄 - #1730 by berkans I managed to do it as well.

[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.