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

Thank you. I will share, but it is not finished yet.

you were close. there’s a few issues.
I fixed the if else statement for you but take another look at your <= plus you have int so I think 4.8 would change to 4

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.kitchen_temperature
    tap_action:
      action: more-info
    name: Ph-Wert
    icon: mdi:ph
    card_mod:
      style: |
        ha-card {
          {% set state = states('sensor.kitchen_temperature') | int %}
          {% if state <= 100 %} 
            --text-color: green;
          {% elif state <= 4.8 %}
            --text-color: greenyellow;
          {% elif state <= 7.2 %}
            --text-color: yellow;
          {% elif state <= 9.6 %}
            --text-color: orange;
          {% elif state <= 12 %}
            --text-color: red;
          {% endif %}
        }

  - type: entity
    entity: sensor.pooltemperatur
    tap_action:
      action: more-info
    icon: mdi:temperature-celsius
  - type: entity
    entity: sensor.redoxwert
    tap_action:
      action: more-info
    use_entity_picture: false
alignment: justify

No, does not work. It’s still there when all the doors are closed. Like in my screenshot.

My code:

type: conditional
conditions: []
card:
  type: entity-filter
  entities:
    - entity: binary_sensor.tf_w_sz_door
      name: null
    - entity: binary_sensor.tf_w_kz_door
      name: null
  state_color: true
  state_filter:
    - 'on'

Can this implemented in a normal Entities configuration card?

I would do it like this…
install Auto Entities card from HACs
combine it with mushroom entity card.

type: custom:auto-entities
card:
  square: false
  type: grid
  columns: 2
card_param: cards
filter:
  include:
    - state: 'on'
      domain: light
      options:
        type: custom:mushroom-entity-card
        layout: horizontal
        primary_info: name
  exclude:
    - state: 'off'
    - state: unknown
show_empty: true
sort:
  method: friendly_name

you would just need to change these two state: 'on' domain: light I don’t have any door sensors to test with.
you can play around with the grid column size and mushroom layout to your liking.

1 Like

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