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

Minniemie · May 3, 2024, 7:17am

Hi All,

Been trying to solve this for days but haven been able to, hopefully someone else here is able to assist. I’ve used rhysb’s combo Mushroom Mini-Media-Player card here:

However, when I tried to substitute the mini-media-player card at the bottom with a notify-card (to avoid the music stopping when broadcasting a message); the artwork no longer covers the whole background, specifically the top mushroom media player card - tried many ways to edit the code but it just doesn’t work like rhyb’s example above, anyone has any ideas why?

Appreciate your kind advice.

Here is my edited code:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-media-player-card
    entity: media_player.spotify_minnieme
    name: Spotify
    icon: mdi:spotify
    use_media_artwork: true
    fill_container: true
    use_media_info: true
    show_volume_level: true
    media_controls:
      - previous
      - play_pause_stop
      - next
    collapsible_controls: true
    tap_action:
      action: toggle
    card_mod:
      style: |
        ha-card {
          padding-bottom: 0px !important;
        }
  - entity: media_player.google_speakers
    hide:
      icon: true
      name: true
      runtime: true
      source: true
      power: true
      state_label: true
      volume: true
      info: true
      progress: true
      controls: true
    more_info: false
    type: custom:notify-card
    target: google_assistant_sdk
    label: message
    toggle_power: false
    group: true
    card_mod:
      style: |
        ha-card {
          font: 12px !important;
          padding: -10px -18px -28px !important;
        }
card_mod:
  style: |
    ha-card {
      {% if not is_state('media_player.spotify_minnieme', 'standby') %}
        background: rgba(var(--rgb-card-background-color), 0.5) url( '{{ state_attr( "media_player.spotify_minnieme", "entity_picture" ) }}' ) center no-repeat;
        background-size: cover;
        background-blend-mode: overlay;
      {% endif %}  
    }

Faecon · May 3, 2024, 11:07am

                    - type: conditional
                      conditions:
                        - entity: input_boolean.airco_ventilatorsnelheid_beschikbaar
                          state_not: 'off'
                      card:
                        type: custom:stack-in-card

that is wat is working in my HA

New-Kle-Ahr · May 3, 2024, 7:20pm

May you tell me how?

Frosty · May 3, 2024, 7:51pm

I guess you already have HACs installed if not follow the docs here

once installed you should have HACs in the left side panel.

then search for Auto Entities and install.

1umnyy · May 3, 2024, 8:01pm

Help, do I want the color of the icon and numbers to change at certain values?

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Спальная комната
    alignment: center
    style: |
      ha-card {
      background: transparent;
      box-shadow: none;
          --title-padding: var(--mush-title-padding, 25px 32px 1px) !important;  
          --title-spacing: var(--mush-title-spacing, 5px) !important;
      }
    subtitle: ''
  - type: custom:mushroom-chips-card
    card_mod:
      style: |
        ha-card {
          border: 0px solid lightgrey !important;
          border-radius: 12px !important;
          box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2) !important;
          background: var(--card-background-color) !important;
          --chip-background: none;
          --chip-border: none !important;
          --chip-box-shadow: none !important;
          --chip-spacing: 2px;
        }
    alignment: center
    chips:
      - type: action
        tap_action:
          action: navigate
          navigation_path: home
        icon: mdi:home
        icon_color: blue
      - type: entity
        entity: sensor.datchik_vlazhnosti_i_temperatury_spalnia_humidity
        icon_color: indigo
      - type: entity
        entity: sensor.datchik_vlazhnosti_i_temperatury_spalnia_temperature
        icon_color: orange
      - type: entity
        entity: sensor.datchik_vozdukh_spalnia_pm25
        icon_color: gray
      - type: entity
        entity: sensor.datchik_vozdukh_spalnia_co2
        icon_color: green

dimitri.landerloos · May 3, 2024, 9:53pm

For the icon use a template chip.

For text take a look in the mushroom / card mod guide:

New-Kle-Ahr · May 3, 2024, 10:50pm

I guess we’ve misunderstood: I already managed to make it working that

Now I want to make the empty frame disappear when all doors are closed:

LiQuid_cOOled · May 4, 2024, 12:02am

Can you post the code associated with your pic?

homeassken · May 4, 2024, 12:56am

Since my last update, my icons and fonts on the top 2 cards are too close to one another. Any idea how can I move the icons up? thanks

card_mod:
  style: |
    ha-card {  
              {% if is_state('light.gameroom_fan','on') %}
                --ha-card-background: var(--lights-button-color); {% endif %}
                --card-primary-font-size: 35px;
                --icon-symbol-size: 60px;
            }

LiQuid_cOOled · May 4, 2024, 1:02am

Add --card-primary-line-height: 35px !important;

card_mod:
  style: |
    ha-card {  
              {% if is_state('light.gameroom_fan','on') %}
                --ha-card-background: var(--lights-button-color); {% endif %}
                --card-primary-font-size: 35px !important;
                --card-primary-line-height: 35px !important;
                --icon-symbol-size: 60px;
            }

1umnyy · May 4, 2024, 7:38am

Is this for me? I need to change the color of the icon and the color of the text depending on the value

LiQuid_cOOled · May 4, 2024, 8:00am

Yes his message was for you The template chip is more customizable.

      - type: template
        icon_color: |
          {{ 'red' if states(config.entity) | int <= 20 else 'orange' }}
        entity: sensor.datchik_vlazhnosti_i_temperatury_spalnia_humidity
        content: test
        icon: mdi:home
        card_mod:
          style: |
           ha-card {
            --text-color:
             {{ 'red' if states(config.entity) | int <= 20 else 'lime' }}
                }

There are several ways to address your request. Check out the chips link in his guide

Frosty · May 4, 2024, 8:15am

I didn’t miss understand, this is a mushroom cards topic. so therefore I was showing you how to use Mushroom cards with auto entities.

the entity filter uses the stock entities card.

maybe I should have made that clear.

To get rid of the empty card use

show_empty: false

insert this line under

type: entity-filter

1umnyy · May 4, 2024, 9:19am

and how to output the sensor values?

LiQuid_cOOled · May 4, 2024, 9:28am

content: |
            {{ states('sensor.your_sensor')}}%

Deninho91 · May 4, 2024, 11:06am

Thank you man!

And how I can get the Space between them smaller?

Tried allready spacing:
But no Resultat…

Frosty · May 4, 2024, 1:53pm

no problem.
take a look at alignment: justify
try changing it to start, end or center
the current “justify” will space them equally from left to right

yuval221183 · May 4, 2024, 4:05pm

Simple and beautiful Can you please share your code?

New-Kle-Ahr · May 4, 2024, 6:43pm

Here you go:

type: entity-filter
entities:
  - entity: binary_sensor.tf_w_sz_tur
    name: null
  - entity: binary_sensor.tf_w_kz_tur
    name: Léon
  - entity: binary_sensor.tf_w_sb_tur
    name: Südbalkon
  - entity: binary_sensor.tf_w_wb_tur
    name: Westbalkon
  - entity: binary_sensor.tf_k_k_tur
    name: Keller
state_color: true
state_filter:
  - 'on'

New-Kle-Ahr · May 4, 2024, 7:10pm

Yeah, it disappears right now when all doors are closed