Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

Hey @rhysb, why is my top bar always transparent? :frowning:

Screen_Recording_20230329_200736_Home Assistant

1 Like

Hello everyone,

I have read this topic and I have gained a lot of inspiration from it!

Iā€™m having a problem with a card that I have build. Itā€™s a card to start my favourite radio stations via a script on one of my Sonos speakers. It works, but itā€™s not visually pleasing. As you can see, there are still some borders and lines that I wish to hide. So I want to create a single card without borders with the information / scripts / volume sliders in it. I guess it is possible via mushroom cards / card mods, but I donā€™t know how. Can anyone please help me?

This is the code that I have used:

cards:
  - cards:
      - entity: media_player.sonos_move_keuken
        type: media-control
        tap_action:
          action: more-info
      - entity: media_player.sonos_move_keuken
        hide:
          icon: true
          info: true
          mute: true
          power: true
          source: true
          volume: true
          name: true
          controls: true
        mini-media-player-progress-height: 1px
        progress: true
        shortcuts:
          buttons:
            - data:
                entity_id: script.new_script
              image: /local/SLAM-MM.png
              id: script.turn_on
              name: null
              type: service
            - data:
                entity_id: script.new_script_2
              image: /local/SLAM40!.png
              id: script.turn_on
              name: null
              type: service
            - data:
                entity_id: script.new_script_3
              image: /local/SLAM Hardstyle.png
              id: script.turn_on
              name: null
              type: service
            - data:
                entity_id: script.new_script_4
              image: /local/SLAMFM.png
              id: script.turn_on
              name: null
              type: service
            - data:
                entity_id: script.new_script_5
              image: /local/Radio 538.png
              id: script.turn_on
              name: null
              type: service
            - data:
                entity_id: script.new_script_6
              image: /local/Radio 538 DD.png
              id: script.turn_on
              name: null
              type: service
          columns: 3
        show_group_count: true
        show_progress: true
        type: custom:mini-media-player
        volume_stateless: true
      - entity: media_player.sonos_move_keuken
        hide:
          controls: true
          icon: true
          info: true
          max_volume: 100
          min_volume: 0
          name: hide
          play_pause: true
          power: true
          progress: true
          source: true
        type: custom:mini-media-player
    type: vertical-stack
mode: vertical
type: custom:stack-in-card

Thanks a lot!

Thanks a lot - now I got itā€¦ :smiley:
The entity in the chip card was missing too - now perfect :slight_smile:

1 Like

Thatā€™s handled by the pseudo element on the header. have you copied all the code? In particular the bit starting with this:

    /* Pseudo element for background & other card styling */
    ha-card:before {
      content: "";
.
.
.

Youā€™ve left off the closing %} here:

+ (expand(states.cover.volets_maison) | selectattr( 'state', 'eq', 'open') | list | count)  %}

To change weather providers, just change the weather entity to weather.whatever.

For help styling the mini-media-player card, you will get a better response posting in the Mini Media Player thread:

or card-mod thread:

2 Likes

Iā€™ve been using these dashboards so much recently. I appreciate all the work gone into them.

Iā€™ve been using the chips card for a Sonos speaker. Touch to play, touch to pause etc. (In green below)

image

This is the code:

 - type: conditional
        conditions:
          - entity: media_player.office
            state_not: playing
        chip:
          type: template
          entity: media_player.office
          icon: mdi:speaker
          icon_color: grey
          tap_action:
            action: call-service
            service: sonos.play_queue
            data: {}
            target:
              device_id: 9b3c43e40824141046b290a01ee7f962

Iā€™ve recently expanded my Sonos, and cant figure out where to get the device_id for the new Sonos speaker? Any suggestions?

yes man waze

Hey @rhysb, this time I propose a very difficult challenge:

  • animate the mdi:sony-playstation icon like the original animation

p.s. I could buy you a dinner :wink: :wink:

Hey @rhysb, how does one apply the radial-gradient to the mushroom-shape-icon for the media card? :confused: Plan to use it to display the media progress. Thanks in advance brother from another mother.

type: custom:mushroom-media-player-card
entity: media_player.plex_plex_for_apple_tv_apple_tv
use_media_info: true
volume_controls: []
media_controls:
  - previous
  - play_pause_stop
show_volume_level: false
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
            background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (states('sensor.bens_iphone_battery_level')) }}% 0%, var(--card-background-color) 0% 100%);
        }
      .shape:after {
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        border-radius: var(--icon-border-radius);
        background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
      }

I want to remove the border of the mushroom chip card. when i set the border in the console on 0 the border is gone, but not when i set the style in this example.
- type: custom:mushroom-chips-card card_mod: style: | ha-card { border-width: 0; } chips:

Try:

        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0;
            } 

didnā€™t work this is my code:

type: horizontal-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-person-card
        entity: person.willem
        fill_container: true
        layout: vertical
      - type: custom:mushroom-chips-card
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0;
            } 

config.icon_color is messing it up. Try like this dude from another brood.

type: custom:mushroom-media-player-card
entity: media_player.plex_plex_for_apple_tv_apple_tv
use_media_info: true
volume_controls: []
media_controls:
  - previous
  - play_pause_stop
show_volume_level: false
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--icon-color) {{ (states('sensor.bens_iphone_battery_level')) }}% 0%, var(--card-background-color) 0% 100%);
      }
      .shape:after {
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        border-radius: var(--icon-border-radius);
        background: var(--shape-color);
      }
2 Likes

Try:

type: horizontal-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-person-card
        entity: person.willem
        fill_container: true
        layout: vertical
      - type: custom:mushroom-chips-card
        card_mod:
          style: |
            ha-card {
              --ha-card-border-width: 0;
            }

still not working unfortunatelyā€¦

type: horizontal-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-person-card
        entity: person.willem
        fill_container: true
        layout: vertical
      - type: custom:mushroom-chips-card
        card_mod:
          style: |
            ha-card {
              --ha-card-border-width: 0;
            }
        chips:
          - type: entity
            entity: sensor.iphone_van_willem_battery_level
            icon_color: blue

Or is the ha-card set on a wrong place?

You first example was incomplete. Try like this:

type: horizontal-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-person-card
        entity: person.willem
        fill_container: true
        layout: vertical
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.iphone_van_willem_battery_level
            icon_color: blue
            card_mod:
              style: |
                ha-card {
                  --chip-border-width: 0;
                  --chip-box-shadow: none;
                } 

I dont know what is going on, but the border is still visible :dizzy_face: