YAML formatting for popup card

Configuration Frontend
1

Can someone help me with the formatting for this? I’ve honestly been trying for ages and just cant nail it.

Thanks!

type: custom:mushroom-entity-card
entity: switch.harmonyhub_watch_tv
name: Watch TV
layout: vertical
icon: mdi:television
hold_action:
  action: toggle
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      browser_id: THIS
      dismissable: true
      content:
        type: vertical-stack
        cards:
      - type: horizontal-stack
        cards:
        -show_name: false
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: script.freeview1
          target: {}
          icon: mdi:numeric-1-box
        - show_name: false
          show_icon: true
          type: button
          tap_action:
            action: call-service
            service: '2'
            target: {}
            icon: mdi:numeric-2-box
          - show_name: false
            show_icon: true
            type: button
              tap_action:
              action: call-service
              service: script.freeview3
              target: {}
              icon: mdi:numeric-3-box
            - show_name: false
              show_icon: true
              type: button
                tap_action:
                action: call-service
                service: script.freeview4
                target: {}
                icon: mdi:numeric-4-box
      - type: horizontal-stack
        cards:
      - show_name: false
        show_icon: true
        type: button
          tap_action:
          action: call-service
          service: '5'
          target: {}
          icon: mdi:numeric-5-box
        - show_name: false
          show_icon: true
          type: button
            tap_action:
            action: call-service
            service: script.freeview6
            target: {}
            icon: mdi:numeric-6-box
          - show_name: false
            show_icon: true
            type: button
              tap_action:
              action: call-service
              service: script.freeview7
              target: {}
              icon: mdi:numeric-7-box
            - show_name: true
              show_icon: true
              type: button
                tap_action:
                action: call-service
                service: script.freeview8
                target: {}
                icon: mdi:numeric-8-box
      - type: horizontal-stack
        cards:
      - show_name: false
        show_icon: true
        type: button
          tap_action:
          action: call-service
          service: script.freeview9
          target: {}
          icon: mdi:numeric-9-box
        - show_name: false
          show_icon: true
          type: button
            tap_action:
            action: call-service
            service: script.freeview0
            target: {}
            icon: mdi:numeric-0-box
          - show_name: false
            show_icon: true
            type: button
              tap_action:
              action: call-service
              service: script.digistar_info
              target: {}
              icon: mdi:alpha-i-circle
            - show_name: false
              show_icon: true
              type: button
                tap_action:
                action: call-service
                service: script.pioneer_mute
                target: {}
                icon: mdi:volume-mute
      - type: horizontal-stack
        cards:
      - show_name: false
        show_icon: true
        type: button
          tap_action:
          action: call-service
          service: script.pioneer_volumeup
          target: {}
          icon: mdi:volume-plus
        - show_name: false
          show_icon: true
          type: button
            tap_action:
            action: call-service
            service: script.pioneer_volumedown
            target: {}
            icon: mdi:volume-minus
          - show_name: false
            show_icon: true
            type: button
              tap_action:
              action: call-service
              service: script.channeldown
              target: {}
              icon: mdi:arrow-down-bold
            - show_name: false
              show_icon: true
              type: button
                tap_action:
                action: call-service
                service: script.channelup
                target: {}
                icon: mdi:arrow-up-bold
      - type: horizontal-stack
        cards:
      - show_name: false
        show_icon: true
        type: button
          tap_action:
          action: call-service
          service: script.digistar_menu
          target: {}
          icon: mdi:menu
        - show_name: false
          show_icon: true
          type: button
            tap_action:
            action: call-service
            service: script.digistar_pageup
            target: {}
            icon: mdi:arrow-up-bold
          - show_name: false
            show_icon: true
            type: button
              tap_action:
              action: call-service
              service: script.digistar_exit
              target: {}
              icon: mdi:exit-to-app
      - type: horizontal-stack
    cards:
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: script.digistar_menuleft
          target: {}
        icon: mdi:arrow-left-bold
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: script.digistar_select
          target: {}
        icon: mdi:image-filter-center-focus-strong
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: script.digistar_menuright
          target: {}
        icon: mdi:arrow-right-bold
  - type: horizontal-stack
    cards:
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: script.digistar_guide
          target: {}
        icon: mdi:television-guide
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: script.digistar_pagedown
          target: {}
        icon: mdi:arrow-down-bold
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: script.digistarpowertoggle
          target: {}
        icon: mdi:power
2

Anyone? Please.

3

Does anything in that yaml work? There appears to be far more than just a ‘popup card’.
A quick look and I see several things with the formatting, in particular under the.

cards:

Sections.

You should probably start with something simpler than what you have there.

4

Im trying to display that card in a popup window.

5

Fox example,

this works.

show_name: true
show_icon: true
type: button
entity: switch.a8_light1
name: Living Room
icon: mdi:sofa-outline
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      browser_id: THIS
      dismissable: true
      content:
        type: vertical-stack
        cards:
          - type: custom:mushroom-title-card
            title: Lighting & Security
            subtitle: ''
            alignment: center
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-light-card
                entity: light.topwalllights
                name: Top Wall Lights
                layout: vertical
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: custom:mushroom-light-card
                layout: vertical
                entity: light.topstairlights
                name: Top Stair Lights
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: custom:mushroom-light-card
                entity: light.top_deck_pir_1_top_deck_lights
                show_brightness_control: true
                name: Deck
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
6

Yes, see how you have the card types listed and aligned under cards:. The alignment and formatting of yaml is very important, if this is not done correctly for all items in yaml, not just card types, it will fail.
YAML - Home Assistant

Screenshot_20230906_050222_Chrome~2
Screenshot_20230906_050222_Chrome~2916×1572 164 KB