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

Share your Projects!
,
4714

hello @rhysb first of all very nice that you have made this media player very nice and handy i have adjusted it a bit to my taste now i have a question is it possible if i use my sonos for tv sound then i get black in the screen where normally the picture comes from the song would it be possible to do this based on everything the media title is on TV is this status so know it but just don’t know how to add it? thanks in advance!

type: custom:stack-in-card
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-media-player-card
        entity: media_player.sonos_beam
        icon: mdi:play
        use_media_info: true
        use_media_artwork: true
        show_volume_level: true
        media_controls:
          - play_pause_stop
          - previous
          - next
        volume_controls:
          - volume_buttons
          - volume_set
        fill_container: false
        card_mod:
          style: |
            mushroom-shape-icon {
              display: flex;
              {% set media_type = state_attr(config.entity, 'media_title') %}
              {% if media_type == 'TV' %}
                --card-mod-icon: mdi:television-classic;
                animation: flicker 1s linear infinite alternate;
              {% else %}
                --card-mod-icon: mdi:play;
              {% endif %}
            }
            @keyframes flicker {
              0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
              32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
            }
            @keyframes beat {
              0%, 60% { --icon-symbol-size: 21px; }
              5%, 17%, 57% { --icon-symbol-size: 22px; }
              10%, 20%, 51% { --icon-symbol-size: 23px; }
              25%, 45% { --icon-symbol-size: 24px; }
              30%, 39% { --icon-symbol-size: 25px; }
              33% { --icon-symbol-size: 26px; }
            }
            ha-card {
              --ha-card-border-width: 0;
            }
            ha-card:before {
              transform: translate3d(0,0,0);
              -webkit-transform: translate3d(0,0,0);
              content: "";

              background: url('/local/idle_art.png') center no-repeat;
              {% if not is_state(config.entity, 'playing') %}
                background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
              {% endif %}

              background-size: contain;
              margin: 4px 4px 16px;
              filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
              border-radius: var(--control-border-radius);

              {% set media_type = state_attr(config.entity, 'media_content_type') %}
              {% if media_type == 'TV' %}
                aspect-ratio: 16 / 9;
              {% else %}
                aspect-ratio: 1 / 1;
              {% endif %}
            }
      - type: conditional
        conditions:
          - entity: media_player.currently_playing
            state_not: 'off'
          - entity: media_player.currently_playing
            state_not: idle
        card:
          entity: media_player.currently_playing
          hide:
            icon: true
            name: true
            runtime: true
            source: true
            power: true
            state_label: true
            volume: true
            info: true
            progress: false
            controls: true
          more_info: false
          type: custom:mini-media-player
          toggle_power: false
          group: true
          card_mod:
            style:
              mmp-progress$: |
                paper-progress {
                  {{ '--paper-progress-container-color: rgba(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
                }
              .: |
                ha-card {
                  margin: 0px 12px 12px;
                  --mmp-progress-height: 12px !important;
                  height: var(--mmp-progress-height);
                  --mmp-accent-color: rgb(var(--rgb-indigo-color));
                  --mmp-border-radius: 12px !important;
                  --ha-card-border-width: 0;
                }
    card_mod:
      style: |
        ha-card:before {
          transform: translate3d(0,0,0);
          -webkit-transform: translate3d(0,0,0);
          content: "";
          position: absolute;
          height: 100%;
          width: 100%;

          background: url('/local/idle_art.png') center no-repeat;
          {% if not is_state('media_player.currently_playing', 'idle') %}
            background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
          {% endif %}

          filter: blur(150px) saturate(200%);
          background-size: 100% 100%;
        }
        ha-card {
          transform: translate3d(0,0,0);
          -webkit-transform: translate3d(0,0,0);
        }
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 58px
      margin: '-14px 0px -8px -4px;'
    cards:
      - type: custom:mushroom-media-player-card
        entity: media_player.sonos_beam
        volume_controls:
          - volume_mute
          - volume_set
          - volume_buttons
        media_controls: []
        show_volume_level: true
        use_media_info: false
        icon_type: none
        primary_info: none
        secondary_info: none
        card_mod:
          style: |
            ha-card {
              --ha-card-border-width: 0;
              box-shadow: none;
              margin-right: -8px !important;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: action
            icon: mdi:television-speaker
            alignment: end
            name: tv mode
            tap_action:
              action: call-service
              service: script.sonos_tv_mode
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-disabled), 0.2);
                  margin-top: 10px; 
                  --chip-box-shadow: none;
                  --chip-border-radius: var(--control-border-radius);
                  --chip-border-width: 0;
                  --chip-height: 42px;
                }
      - type: custom:mushroom-chips-card
        chips:
          - type: action
            icon: mdi:speaker-multiple
            alignment: end
            name: Groep sonos aan
            tap_action:
              action: call-service
              service: script.g
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-disabled), 0.2);
                  margin-top: 10px; 
                  --chip-box-shadow: none;
                  --chip-border-radius: var(--control-border-radius);
                  --chip-border-width: 0;
                  --chip-height: 42px;
                }
          - type: action
            icon: mdi:speaker
            alignment: end
            name: Groep sonos uit
            tap_action:
              action: call-service
              service: script.gv
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-disabled), 0.2);
                  margin-top: 10px; 
                  --chip-box-shadow: none;
                  --chip-border-radius: var(--control-border-radius);
                  --chip-border-width: 0;
                  --chip-height: 42px;
                }
          - type: action
            icon: mdi:shuffle-variant
            alignment: end
            name: shuffel aan
            tap_action:
              action: call-service
              service: script.sonos_shuffel_on
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-disabled), 0.2);
                  margin-top: 10px; 
                  --chip-box-shadow: none;
                  --chip-border-radius: var(--control-border-radius);
                  --chip-border-width: 0;
                  --chip-height: 42px;
                }
          - type: action
            icon: mdi:shuffle-disabled
            alignment: end
            name: shuffel uit
            tap_action:
              action: call-service
              service: script.sonos_shuffel_off
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-disabled), 0.2);
                  margin-top: 10px; 
                  --chip-box-shadow: none;
                  --chip-border-radius: var(--control-border-radius);
                  --chip-border-width: 0;
                  --chip-height: 42px;
                }
          - type: action
            icon: mdi:numeric-5-box
            alignment: end
            name: volume 5%
            tap_action:
              action: call-service
              service: script.sonos_volume_op_5
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-disabled), 0.2);
                  margin-top: 10px; 
                  --chip-box-shadow: none;
                  --chip-border-radius: var(--control-border-radius);
                  --chip-border-width: 0;
                  --chip-height: 42px;
                }
          - type: action
            icon: mdi:numeric-10-box
            alignment: end
            name: volume 10%
            tap_action:
              action: call-service
              service: script.sonos_volume_op_10
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-disabled), 0.2);
                  margin-top: 10px; 
                  --chip-box-shadow: none;
                  --chip-border-radius: var(--control-border-radius);
                  --chip-border-width: 0;
                  --chip-height: 42px;
                }
          - type: action
            icon: mdi:fast-forward-15
            alignment: end
            name: volume 15%
            tap_action:
              action: call-service
              service: script.sonos_volume_op_15
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-disabled), 0.2);
                  margin-top: 10px; 
                  --chip-box-shadow: none;
                  --chip-border-radius: var(--control-border-radius);
                  --chip-border-width: 0;
                  --chip-height: 42px;
                }
          - type: action
            icon: mdi:dice-d20
            alignment: end
            name: volume 20%
            tap_action:
              action: call-service
              service: script.sonos_volume_op_20
              data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-disabled), 0.2);
                  margin-top: 10px; 
                  --chip-box-shadow: none;
                  --chip-border-radius: var(--control-border-radius);
                  --chip-border-width: 0;
                  --chip-height: 42px;
                }
  - type: grid
    square: false
    columns: 4
    cards:
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_christmas_hits
        primary: Kerst-Hits
        secondary: ''
        icon: phu:christmas-tree
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_release_radar
        primary: R-Radar
        secondary: ''
        icon: mdi:music
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_top_50_be
        primary: Top50BE
        secondary: ''
        icon: mdi:music
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_top_50_nl
        primary: Top50NL
        secondary: ''
        icon: mdi:music
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_hot_hits_be
        primary: HothidsBE
        secondary: ''
        icon: mdi:music
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_discover_weekly
        primary: D-Weekly
        secondary: ''
        icon: mdi:music
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_party_mix_2_vm
        primary: PMix2VM
        secondary: ''
        icon: mdi:music-box-outline
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_party_mix_3_vm
        primary: PMix3VM
        secondary: ''
        icon: mdi:music-box-outline
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_party_mix_4_vm
        primary: PMix4VM
        secondary: ''
        icon: mdi:music-box-outline
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_party_mix_5_vm
        primary: PMix5VM
        secondary: ''
        icon: mdi:music-box-outline
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_nieuwste_nummers
        primary: NieuwsN
        secondary: ''
        icon: mdi:heart-circle-outline
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_music_macky_gee
        primary: MackyGee
        secondary: ''
        icon: mdi:heart-pulse
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_radio_qmusic_belguim
        primary: Qmusic
        secondary: ''
        icon: mdi:radio
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_radio_top_radio
        primary: TOPRadio
        secondary: ''
        icon: mdi:radio
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_radio_top_techno
        primary: TOPTechno
        secondary: ''
        icon: mdi:radio
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_radio_top_versuz
        primary: TOPVersuz
        secondary: ''
        icon: mdi:radio
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }
      - type: custom:mushroom-template-card
        entity: script.sonos_beam_radio_top_retroarena
        primary: TOPretroA
        secondary: ''
        icon: mdi:radio
        tap_action:
          action: toggle
        layout: vertical
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --icon-symbol-size: 32px;
              --icon-size: 64px;
            }

here are the possible if sonos is on tv source

playing	
source_list: TV
group_members: media_player.sonos_beam, media_player.sonos_ra
volume_level: 0.04
is_volume_muted: false
media_content_id: x-sonos-htastream:RINCON_48A6B83ABBD601400:spdif
media_content_type: music
media_title: TV
shuffle: false
repeat: off
queue_size: 1
icon: phu:sonos-beam
friendly_name: Sonos Beam
supported_features: 981567
source: TV
4715

Hey Jarne, what are you wanting it to do when the source is TV? Are you wanting it to display the TV episode art or just a generic TV image?

4716

So if the source TV is there will be an image of TV that I have in the www folder, so if you did that, if nothing is playing, but it won’t work, hopefully you get it now?

SONOS-Beam-Google-Assistant
SONOS-Beam-Google-Assistant800×600 35.2 KB

4717

You can add the ping animation to a big icon like this.

Mushroom Big Ping:

Mushroom Big Ping

type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
        0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-{{ config.icon_color }}), 0.7); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      }
    .: |
      mushroom-shape-icon {
        --icon-size: 76px;
        display: flex;
        margin: -20px 0px 0px -20px !important;
      }
      ha-card {
        clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
      }
5 Likes
4718

Finally got around to doing one for you.

1 Like
4719

Yes, you can apply it to a chip like this.

Mushroom Chip Progress Bar:

Mushroom Chip Progress Bar

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: input_number.lounge_pc_volume
    icon: mdi:volume-high
    icon_color: blue
    card_mod:
      style: |
        ha-card {
          background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-cyan)) {{ (states(config.entity) |float * 100) | round(0) }}% 0%, var(--card-background-color) 0% 100%) !important;
        }
6 Likes
4720

Try to put this part in the template section to see how it evaluates in your system.

And you can have this DRY

mdi:television{{ '-off' if is_state('media_player.sony_bravia_tv','off') }}
4721

with the template card this is working but not with an entity cards

4722

That is correct, as the only mushroom card (that I’m aware of) where you can use templates (jinja-code) is the template-card

1 Like
4723

I have a pop-up with a mushroom card with a couple of entities, like so:

- type: custom:mushroom-entity-card
          entity: switch.game_pc
          tap_action:
            action: toggle

The problem is that those entities are PC’s, so when clicked they don’t turn on immediately.
Is it possible to, when clicked, show a loader until it’s on (or off)?

I have a SVG already located at: /local/loader.svg.

4724

Hey all,

I know it has been written somewhere, but I can’t find it anymore :frowning:
Currently I have the issue with the “borders” appearing.

At the moment, I am using the built in default theme and then select via the UI whether I want it to be Auto, Light or Dark. How can I remove these borders easiest and do I have to do in multiple places as I am using both Web, Android and iOS devices?

image

Thanks :slight_smile:

4725

Try the Mushroom Shadow theme.

1 Like
4726

I’ve done a search on this topic, and I was looking for a way to implement Entities Card Configuration - header toggle for the group? Is this possible?

4727

Literally search this topic for “borders”

4728

What does that even mean?

1 Like
4729

I just repeat the mushroom light card with different options enabled/disabled. (Using lovelace_gen to pass in the light entity-id, and a self-defined type:

# lovelace_gen
title: "{{ name }}"
{% if state == 'off' %}
right_button: "Aan"
right_button_action:
  service: light.turn_on
  data:
    entity_id: "{{ entity }}"
{% else %}
right_button: "Uit"
right_button_action:
  service: light.turn_off
  data:
    entity_id: "{{ entity }}"
{% endif %}
dismissable: true
size: normal
style: |
  --popup-min-width: 360px;
  --popup-max-width: 540px;
  --popup-border-width: var(--ha-card-border-width, 2px);
  --popup-border-color: var(--ha-card-border-color, var(--divider-color, #eee));
  --popup-border-radius: 28px;
  --popup-background-color: var(--primary-background-color);
  --popup-padding-x: 0px;
  --popup-padding-y: 0px;
card_mod:
  style:
    ha-dialog$: |
      div.mdc-dialog div.mdc-dialog__scrim {
        {{ "{%" }} set r = state_attr('{{ entity }}', 'rgb_color')[0] {{ "%}" }}
        {{ "{%" }} set g = state_attr('{{ entity }}', 'rgb_color')[1] {{ "%}" }}
        {{ "{%" }} set b = state_attr('{{ entity }}', 'rgb_color')[2] {{ "%}" }}
        background: rgba({{ "{{" }}r{{ "}}" }}, {{ "{{" }}g{{ "}}" }}, {{ "{{" }}b{{ "}}" }},0.8);
      }
content:
  type: custom:vertical-stack-in-card
  card_mod:
    class: invisible
  cards:
    - entity: "{{ entity }}"
      type: custom:light-entity-card
      shorten_cards: false
      consolidate_entities: true
      child_card: true
      hide_header: true
      color_wheel: true
      persist_features: true
      brightness: false
      color_temp: false
      white_value: false
      color_picker: true
      smooth_color_wheel: true
      speed: false
      intensity: false
      force_features: false
      effects_list: false
      card_mod:
        class: invisible
    #   style: |
    #     ha-card {
    #       padding: -15px;
    #       background: rgba(var(--rgb-primary-background-color), 0.1);
    #       }
{% if type != 'onoff' %}
    - type: custom:mushroom-light-card
      entity: "{{ entity }}"
      fill_container: true
      layout: horizontal
      primary_info: none
      secondary_info: none
      icon_type: icon
      icon: hue:scene-bright
      show_brightness_control: true
      use_light_color: true
      show_color_temp_control: false
      collapsible_controls: false
      card_mod:
        class: invisible
{% if type != 'dimmable' %}
{% if type != 'rgb' %}
    - type: custom:mushroom-light-card
      entity: "{{ entity }}"
      fill_container: true
      layout: horizontal
      primary_info: none
      secondary_info: none
      icon_type: icon
      icon: mdi:theme-light-dark
      show_brightness_control: false
      use_light_color: true
      show_color_temp_control: true
      collapsible_controls: false
      card_mod:
        class: invisible
{% endif %}
{% endif %}
{% endif %}

light_popup_closet_ceiling
light_popup_closet_ceiling576×1280 58.6 KB
light_popup_diningroom_ceiling
light_popup_diningroom_ceiling576×1280 66.3 KB

If you leave out the lovelace_gen logic and just repeat the card, the slider will not be visible if the light doesn’t support it. (allthough the icon might still show).

EDIT: took some inspiration from yours and colored outside of the popup with the rgb color of the light, screenshots don’t show it. 2 layers of jinja because of lovelace_gen & card_mod :slight_smile:

6 Likes
4730

SOLVED
quote from from FB-post by Andrew Doenau:
“Swipe-card just allows you to swipe across between cards, it doesn’t make the chip-card (or any other card) any wider than it already is. So perhaps just break your chips in to two separate chip-cards within the swipe-card and you can swipe between them.”

Issue:
Is there a way to have a row of mushroom-chips-cards within a swipe-card - and keep it on “one line” ?

I have quite a few status-chips I’d like to have on one line, with the most important ones to the left and less and less important to the right (some conditional, so variable number of chips showing)
when putting the chips-card-cards within the swipe-card it drops to two lines whenever there are more than suitable for “one screen-width”.

Anyone with a workaround or config-examples that works??

1 Like
4731

Awesome work thank you for sharing.
Could you please explain how you managed to stick the chips to the bottom of the screen? I only managed it at the top.

1 Like
4732

I use a panel view, with a vertical stack, landscape gets the top chips card sticky and a grid layout card beneath. Portrait also has a footer chips card below that:

view:

# lovelace_gen
{% for view in _global.views %}
{% if view.name != 'main' %}
- type: panel
  path: {{ view.name }}
  subview: true
  cards:
    - type: custom:mod-card
      card_mod:
        class: invisible
        style: |
          ha-card {
            border-radius: 0px !important;
            border-width: 0px !important;
            {{ "{%" }} if state_attr( "media_player.global", "entity_picture" ) != none {{ "%}" }}
            background: center / cover no-repeat fixed url( '{{ "{{" }} state_attr( "media_player.global", "entity_picture" ) {{ "}}" }}' );
            {{ "{%" }} endif {{ "%}" }}
          }
      card:
        type: custom:state-switch
        entity: mediaquery
        states:
          '(orientation: landscape)':
            type: vertical-stack
            cards:
              - !include
                - .cards/sticky.yaml
                - view: {{ view.name }}
                  position: both
              - type: custom:layout-card
                layout_type: custom:grid-layout
                layout: !include .cards/layout.yaml
                cards: !include .cards/{{ view.name }}.yaml
          '(orientation: portrait)':
            type: vertical-stack
            cards:
              - !include
                - .cards/sticky.yaml
                - view: {{ view.name }}
                  position: header
              - type: custom:layout-card
                layout_type: custom:grid-layout
                layout: !include .cards/layout.yaml
                cards: !include .cards/{{ view.name }}.yaml
              - !include
                - .cards/sticky.yaml
                - view: {{ view.name }}
                  position: footer
{% endif %}
{% endfor %}

grid layout layout.yaml:

height: calc(100vh - 58px)
margin: -58px 0 0 0 !important
padding: 62px 0 0 0 !important
reflow: true
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))
grid-gap: 0
grid-template-rows: masonry
grid-auto-flow: dense
place-content: start center
place-items: start stretch

sticky.yaml (header/footer/combined chip card definition):

# lovelace_gen
type: custom:mushroom-chips-card
alignment: justify
card_mod:
  class: sticky
  style: |  
    :host {
      z-index: 999;
      position: sticky;
      position: -webkit-sticky;
      {% if position == "footer" %}
      bottom: 0;
      {% else %}
      top: 0;
      {% endif %}
    }         
    ha-card {
      background: none;
      {% if position == "footer" %}
      margin: 0 4px 4px 4px;
      {% else %}
      margin: 4px 4px 0 4px;
      {% endif %}
      --ha-card-border-width: 0 !important;
      --chip-border-width: 1px;
      --chip-height: 48px; 
      --chip-border-radius: 24px;
    }
chips:
  {% for headerview in _global.views %}
  {% if (headerview.position == position) or (position == "both") %}
  {% if headerview.name == view %}
  {% if view == "main" %}
  - type: action
    icon: mdi:tablet-dashboard
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: script.start_url
        data:
          browser_id: THIS
  {% else %}
  - type: back
  {% endif %} 
  {% else %}
  - tap_action:
      action: navigate
      navigation_path: /lovelace/{{ headerview.name }}
    {% for key in headerview.chip|list %}
    {{ key }}: {{ headerview.chip[key]|tojson }}
    {% endfor %}
  {% endif %}
  {% endif %}
  {% endfor %}

if not using lovelace_gen ignore most of the weird stuff and focus on the card_mod css & the card structure.

1 Like
4733 
    card_mod:
      style: |
        ha-card {
        border: solid 0px ;
        }```