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

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 %}  
    }
                    - 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

May you tell me how? :pray:t3:

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.

1 Like

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

image

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

For the icon use a template chip.

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

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:

Can you post the code associated with your pic?

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

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

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

Yes his message was for you :grinning: 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

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
2 Likes

image
and how to output the sensor values?

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

Thank you man!

And how I can get the Space between them smaller?

Tried allready spacing:
But no Resultat…

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

1 Like

Simple and beautiful :slight_smile: Can you please share your code? :slight_smile:

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'

Yeah, it disappears right now when all doors are closed :+1:t3::pray:t3: