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

[Mattia2399]

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

[Mattia2399]

[robinmull112 (Robin)]

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!

[tischer.s (Sebastian Tischer)]

Thanks a lot - now I got it…
The entity in the chip card was missing too - now perfect

[rhysb (Rhys)]

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: "";
.
.
.

[rhysb (Rhys)]

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.

[rhysb (Rhys)]

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

Lovelace: Mini Media Player

Mini Media Player A minimalistic yet customizable media player card for Home Assistant Lovelace UI. Inspired by Custom UI: Mini media player and custom-lovelace. NEW - Support for Sonos group arrangement [Preview Image] Instructions Please visit the GitHub repository for installation and usage instructions. Inspiration @ciotlosm - custom-lovelace @c727 - Custom UI: Mini media player Let me know if you have any questions, issues or suggestions!

or card-mod thread:

Card-mod - Add css styles to any lovelace card

This is not a custom card. Instead it’s a plugin which changes the way all other cards work How about this? type: entities style: | ha-card { color: red; } entities: - light.bed_light - light.ceiling_lights - light.kitchen_lights [51] Not a custom: in sight. Or this? [mov] (Please click this gif to open it. It seems to be prone to artifacting when compressed) Or how about changing what happens when you click the name or icon in an entities-card? FANTASTIC POST BY ILDAR…

[GeorgeCastanza]

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)

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?

[Jarne_Roussard]

yes man waze

[Mattia2399]

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

[weppa]

Hey @rhysb, how does one apply the radial-gradient to the mushroom-shape-icon for the media card? 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);
      }

[Mwdouble (Willem)]

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:

[weppa]

Try:

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

[Mwdouble (Willem)]

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

[rhysb (Rhys)]

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

[weppa]

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

[Mwdouble (Willem)]

still not working unfortunately…

[Mwdouble (Willem)]

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?

[rhysb (Rhys)]

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

[Mwdouble (Willem)]

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