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

cant you use card_mod on the title card styles? or in the theme?, making your own theme, and apply that to your fridge.

# Title
mush-title-padding: 24px 12px 16px
mush-title-spacing: 12px
mush-title-font-size: 24px
mush-title-font-weight: normal
mush-title-line-height: 1.2

I used these to change the spacing and padding to remove space, and have that nicely on my family hub too.
image

3 Likes

Itā€™s posible to have the entity-filter card functionality with the mushroom card UI?

Iā€™ve failed at the first hurdle on this. I go to HACS, click on the frontend tab, click on the blue ā€œExplore and add repositoriesā€ button and search. No results found :frowning:

were you code please

Are you sure you havenā€™t installed it already? I have and donā€™t get it as a result again.

image

ā€¦and then scroll down to the installed frontend stuff.

Nope. Not there either

1 Like

Maybe a HACS problem as I noticed the update process if different cards wasnā€™t working since yesterday evening.

Have you tried the manuel way is decribed in the repo:

Not yet. I restarted HA a few minutes ago and HACS now comes up with an error saying that the integration canā€™t be found. So Iā€™m abandoning until later/over the weekend

Hi @SpookyAwol
Just a very small question :slight_smile: , what yellow color name did you use in the chip ā€œ434 wā€? When i use ā€œyellowā€ , itā€™s much more light yellow. Your yellow is more darker (as used in the standard HA active entity states).
Schermafbeelding 2022-05-27 om 12.14.25
Thx

you can use any color from the palette, not necesserily the ones that are define

Check Color Picker (anywhere on Google)
example:

'#ebcc34'

image

1 Like

Many thanks. I thought that was only available for template chips. But it works also for entity chips. :+1:t2:

1 Like

HI :slight_smile:

can you share your yaml ?

thanks in advance!

Sure, which part ?

for me media card with playlist, dziękuje.

Iā€™;m using Spotcast Integration for the Spotcast Playlist - GitHub - fondberg/spotcast: Home assistant custom component to start Spotify playback on an idle chromecast device as well as control spotify connect devices

this is the first thing you need to setup if you want SPotify Playlist
Below you will see scripts and Lovelace yaml, of course you can also play things other than spotify
I realize that some part of the code might be written better / shorter but I;m learning all the time :wink:

scripts:

start_playlist1:
  alias: 'Start Playlist1'
  sequence:
    - service: media_player.volume_mute
      data:
        entity_id: media_player.gh_mini
        is_volume_muted: true
    - service: spotcast.start
      data:
        device_name: 'Salon'
        uri: 'spotify:track:5V3b2UB9tCAHuqXj2b2EP7'  # track with 1 second of silence 
    - service: media_player.volume_mute
      data:
        entity_id: media_player.gh_mini
        is_volume_muted: false
    - service: media_player.volume_set  #setting the volume is optional ofcourse
      data:
        entity_id: media_player.gh_mini
        volume_level: 0.2
    - service: spotcast.start
      data_template:
        device_name: 'Salon'
        uri: "spotify:track:37i9dQZF1E35FyXHJpj3u1"
        random_song: true
        shuffle: true


start_playlist2:
  alias: 'Start Playlist2'
  sequence:
    - service: media_player.volume_mute
      data:
        entity_id: media_player.gh_mini
        is_volume_muted: true
    - service: spotcast.start
      data:
        device_name: 'Salon'
        uri: 'spotify:track:5V3b2UB9tCAHuqXj2b2EP7'  # track with 1 second of silence 
    - service: media_player.volume_mute
      data:
        entity_id: media_player.gh_mini
        is_volume_muted: false
    - service: media_player.volume_set  #setting the volume is optional ofcourse
      data:
        entity_id: media_player.gh_mini
        volume_level: 0.2
    - service: spotcast.start
      data_template:
        device_name: 'Salon'
        uri: "spotify:track:37i9dQZF1E38ILZ1cci2pk"
        random_song: true
        shuffle: true
        
start_playlist3:
  alias: 'Start Playlist3'
  sequence:
    - service: media_player.volume_mute
      data:
        entity_id: media_player.gh_mini
        is_volume_muted: true
    - service: spotcast.start
      data:
        device_name: 'Salon'
        uri: 'spotify:track:5V3b2UB9tCAHuqXj2b2EP7'  # track with 1 second of silence 
    - service: media_player.volume_mute
      data:
        entity_id: media_player.gh_mini
        is_volume_muted: false
    - service: media_player.volume_set  #setting the volume is optional ofcourse
      data:
        entity_id: media_player.gh_mini
        volume_level: 0.2
    - service: spotcast.start
      data_template:
        device_name: 'Salon'
        uri: "spotify:track:37i9dQZEVXcFlQcqIHQijs"
        random_song: true
        shuffle: true

UI:

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: back
  - type: custom:layout-card
    layout_type: grid
    layout:
      width: 100%
      grid-template-columns: 61% 39%
      grid-template-rows: auto
    cards:
      - type: custom:mushroom-media-player-card
        entity: media_player.gh_mini
        layout: horizontal
        tap_action:
          action: toggle
        hold_action:
          action: more-info
        use_media_artwork: true
        style: |
          ha-card {
            box-shadow: 0px 0px;
      - type: conditional
        conditions:
          - entity: media_player.gh_mini
            state_not: 'off'
        card:
          type: vertical-stack
          cards:
            - type: horizontal-stack
              cards:
                - type: custom:mushroom-chips-card
                  chips:
                    - type: template
                      icon: mdi:play
                      show_icon: false
                      name: test
                      tap_action:
                        action: call-service
                        service: media_player.media_play
                        service_data:
                          entity_id: media_player.gh_mini
                      card_mod: null
                      style: |
                        ha-card {
                            box-shadow: 0px 0px;
                        }
                    - type: template
                      icon: mdi:pause
                      tap_action:
                        action: call-service
                        service: media_player.media_pause
                        service_data:
                          entity_id: media_player.gh_mini
                      card_mod: null
                      style: |
                        ha-card {
                            box-shadow: 0px 0px;
                        }
                    - type: template
                      icon: mdi:stop
                      tap_action:
                        action: call-service
                        service: media_player.media_stop
                        service_data:
                          entity_id: media_player.gh_mini
                      card_mod: null
                      style: |
                        ha-card {
                            box-shadow: 0px 0px;
                        }
                    - type: template
                      icon: mdi:skip-forward
                      tap_action:
                        action: call-service
                        service: media_player.media_next_track
                        service_data:
                          entity_id: media_player.gh_mini
                      card_mod: null
                      style: |
                        ha-card {
                            box-shadow: 0px 0px;
                        }
                  alignment: center
            - type: horizontal-stack
              cards:
                - type: custom:mushroom-chips-card
                  chips:
                    - type: template
                      icon: mdi:plus
                      tap_action:
                        action: call-service
                        service: media_player.volume_up
                        service_data:
                          entity_id: media_player.gh_mini
                      card_mod: null
                      style: |
                        ha-card {
                            box-shadow: 0px 0px;
                        }
                    - type: template
                      card_mod: null
                      content: >-
                        {{ state_attr('media_player.gh_mini', 'volume_level') |
                        round(2,default="0") }}
                      style: |
                        ha-card {
                            box-shadow: 0px 0px;
                        }
                    - type: template
                      icon: mdi:minus
                      tap_action:
                        action: call-service
                        service: media_player.volume_down
                        service_data:
                          entity_id: media_player.gh_mini
                      card_mod: null
                      style: |
                        ha-card {
                            box-shadow: 0px 0px;
                        }
                  alignment: center
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:playlist-star
        icon_color: '#6f42f5'
        primary: Daily Mix 1
        vertical: true
        tap_action:
          action: call-service
          service: script.start_playlist1
      - type: custom:mushroom-template-card
        icon: mdi:playlist-check
        icon_color: '#6f42f5'
        vertical: true
        primary: Daily Mix 2
        tap_action:
          action: call-service
          service: script.start_playlist2
      - type: custom:mushroom-template-card
        icon: mdi:playlist-edit
        vertical: true
        icon_color: '#6f42f5'
        primary: Weekly
        tap_action:
          action: call-service
          service: script.start_playlist3
2 Likes

Mushroom is sooo cool, but i cant find a solution this this:

Using a chip, i would like to navigate to another page within the current dashboard.
Whatā€™s the best way of achieving that?


tap_action:
  action: navigate
  navigation_path: /lovelace/szenen # example path

You find the right path by clicking/tapping your browserā€™s ip field.

Sometimes its just that easy, thanks!

ouchā€¦ only chromecast, im looking for volumio solutionā€¦ anybody ?

hey,
can anyone help to change the color of the slider in the light-card?

I use the custom button card so that I can design the border around the card in my light color.
I would now like to change the color of the slider.
that works with card-modā€¦ but i just canā€™t find the right place

1 Like