Help with card_mod and style formatting for resizing/positioning

DP0427 · March 23, 2025, 8:59pm

HI all,
I’m having trouble with card_mod and style formatting (learning this all for the first time) and I’m reading through a lot of docs, reddit posts etc. to figure this out but can’t seem to get it right. For the picture below, I’ve created a stack-in-card for a remote for my speakers and I’m trying to resize and reposition certain cards within this:

For the large speaker icon, that is the power button, and I’d like to cut it down to about 50-100px and my hope is that the green volume buttons that are vertically stacked to the right of that would line up with the white next track button on the bottom right edge.
I’d also want to center the yellow input button so that it lands between the play and pause buttons. And finally brind the whole card size down to not take up so much space in terms of columns. I tried adding a grid column and row section to the config below but for some reason every time I saved it, it didn’t take.

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: scene.speaker_on_off
        icon: mdi:speaker
        color: lightblue
        show_name: false
        tap_action: action:toggle
        card_mod:
          style: |
            ha-card {
              height: 100px !important;
              width: 50px;
              border: 0px blue dashed !important;
            }
      - type: vertical-stack
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                tap_action:
                  action: toggle
                hold_action:
                  action: toggle
                double_tap_action:
                  action: toggle
                entity: scene.speaker_vol_down
                icon: mdi:volume-minus
                icon_color: green
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                tap_action:
                  action: toggle
                hold_action:
                  action: toggle
                double_tap_action:
                  action: toggle
                entity: scene.speaker_vol_up
                icon: mdi:volume-plus
                icon_color: green
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        tap_action:
          action: toggle
        hold_action:
          action: toggle
        double_tap_action:
          action: toggle
        entity: scene.speaker_input
        icon: mdi:import
        icon_color: yellow
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: scene.speaker_last
        tap_action:
          action: toggle
        icon: mdi:rewind
      - type: template
        entity: scene.speaker_play
        tap_action:
          action: toggle
        icon: mdi:play-box
      - type: template
        entity: scene.speaker_pause
        tap_action:
          action: toggle
        icon: mdi:pause-box
      - type: template
        entity: scene.speaker_next
        tap_action:
          action: toggle
        icon: mdi:fast-forward

Any and all help here would be greatly appreciated!

LiQuid_cOOled · March 24, 2025, 1:43am

Test this out…

type: custom:button-card
entity: scene.speaker_on_off
icon: mdi:speaker
color: lightblue
show_name: false
tap_action: action:toggle
size: 5em
styles:
  card:
    - width: auto
    - border: none
  custom_fields:
    volume:
      - margin-top: "-160px"
      - margin-left: 55px
    input:
      - margin-left: "-80px"
      - width: 190px
custom_fields:
  volume:
    card:
      type: vertical-stack
      cards:
        - type: custom:mushroom-chips-card
          chips:
            - type: template
              tap_action:
                action: toggle
              hold_action:
                action: toggle
              double_tap_action:
                action: toggle
              entity: scene.speaker_vol_down
              icon: mdi:volume-minus
              icon_color: green
        - type: custom:mushroom-chips-card
          chips:
            - type: template
              tap_action:
                action: toggle
              hold_action:
                action: toggle
              double_tap_action:
                action: toggle
              entity: scene.speaker_vol_down
              icon: mdi:volume-minus
              icon_color: green
  input:
    card:
      type: vertical-stack
      cards:
        - type: custom:mushroom-chips-card
          chips:
            - type: template
              tap_action:
                action: toggle
              hold_action:
                action: toggle
              double_tap_action:
                action: toggle
              entity: scene.speaker_input
              icon: mdi:import
              icon_color: yellow
              card_mod:
                style: |
                  ha-card {
                   left: 70px;}
        - type: custom:mushroom-chips-card
          chips:
            - type: template
              entity: scene.speaker_last
              tap_action:
                action: toggle
              icon: mdi:rewind
            - type: template
              entity: scene.speaker_play
              tap_action:
                action: toggle
              icon: mdi:play-box
            - type: template
              entity: scene.speaker_pause
              tap_action:
                action: toggle
              icon: mdi:pause-box
            - type: template
              entity: scene.speaker_next
              tap_action:
                action: toggle
              icon: mdi:fast-forward

DP0427 · March 24, 2025, 2:36am

That worked and you taught me quite a bit about positioning with that code!

I ended up tweaking it as I realized my play and pause button were the same IR signal so I made it one button and made everything tighter with this code:

type: custom:button-card
entity: scene.speaker_on_off
icon: mdi:speaker
color: lightblue
show_name: false
tap_action: 
  action: toggle
size: 5em
styles:
  card:
    - width: auto
    - border: none
  custom_fields:
    volume:
      - margin-top: "-160px"
      - margin-left: 10px
    input:
      - margin-left: "-80px"
      - width: 135px
custom_fields:
  volume:
    card:
      type: vertical-stack
      cards:
        - type: custom:mushroom-chips-card
          chips:
            - type: template
              tap_action:
                action: toggle
              hold_action:
                action: toggle
              double_tap_action:
                action: toggle
              entity: scene.speaker_vol_up
              icon: mdi:volume-plus
              icon_color: green
        - type: custom:mushroom-chips-card
          chips:
            - type: template
              tap_action:
                action: toggle
              hold_action:
                action: toggle
              double_tap_action:
                action: toggle
              entity: scene.speaker_vol_down
              icon: mdi:volume-minus
              icon_color: green
  input:
    card:
      type: vertical-stack
      cards:
        - type: custom:mushroom-chips-card
          chips:
            - type: template
              tap_action:
                action: toggle
              hold_action:
                action: toggle
              double_tap_action:
                action: toggle
              entity: scene.speaker_input
              icon: mdi:import
              icon_color: yellow
              card_mod:
                style: |
                  ha-card {
                   left: 46px;}
        - type: custom:mushroom-chips-card
          chips:
            - type: template
              entity: scene.speaker_last
              tap_action:
                action: toggle
              icon: mdi:rewind
            - type: template
              entity: scene.speaker_play
              tap_action:
                action: toggle
              icon: mdi:play-pause
            - type: template
              entity: scene.speaker_next
              tap_action:
                action: toggle
              icon: mdi:fast-forward

I guess my only follow up would be what becomes of all that dead space to the right of the card? If you were to overlap another card onto it, would it interfere with button presses?

LiQuid_cOOled · March 24, 2025, 2:38am

The space marked with the red line?

DP0427 · March 24, 2025, 2:46am

Yup that’s it. It doesn’t seem like cards naturally slide into that spot even using Sections

LiQuid_cOOled · March 24, 2025, 2:56am

I generally use type: custom:layout-card grid option

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: 1fr 1fr 1fr
  margin: 0px 0px 0px 10px
cards:
  - type: custom:button-card
    entity: scene.speaker_on_off
    icon: mdi:speaker
    color: lightblue
    show_name: false
    tap_action:
      action: toggle
    size: 5em
    styles:
      card:
        - width: auto
        - border: none
      custom_fields:
        volume:
          - margin-top: "-160px"
          - margin-left: 10px
        input:
          - margin-left: "-80px"
          - width: 135px
    custom_fields:
      volume:
        card:
          type: vertical-stack
          cards:
            - type: custom:mushroom-chips-card
              chips:
                - type: template
                  tap_action:
                    action: toggle
                  hold_action:
                    action: toggle
                  double_tap_action:
                    action: toggle
                  entity: scene.speaker_vol_up
                  icon: mdi:volume-plus
                  icon_color: green
            - type: custom:mushroom-chips-card
              chips:
                - type: template
                  tap_action:
                    action: toggle
                  hold_action:
                    action: toggle
                  double_tap_action:
                    action: toggle
                  entity: scene.speaker_vol_down
                  icon: mdi:volume-minus
                  icon_color: green
      input:
        card:
          type: vertical-stack
          cards:
            - type: custom:mushroom-chips-card
              chips:
                - type: template
                  tap_action:
                    action: toggle
                  hold_action:
                    action: toggle
                  double_tap_action:
                    action: toggle
                  entity: scene.speaker_input
                  icon: mdi:import
                  icon_color: yellow
                  card_mod:
                    style: |
                      ha-card {
                       left: 46px;}
            - type: custom:mushroom-chips-card
              chips:
                - type: template
                  entity: scene.speaker_last
                  tap_action:
                    action: toggle
                  icon: mdi:rewind
                - type: template
                  entity: scene.speaker_play
                  tap_action:
                    action: toggle
                  icon: mdi:play-pause
                - type: template
                  entity: scene.speaker_next
                  tap_action:
                    action: toggle
                  icon: mdi:fast-forward
  - type: custom:button-card
    entity: scene.speaker_on_off
    icon: mdi:speaker
    color: lightblue
    show_name: false
    tap_action:
      action: toggle
    size: 5em
    styles:
      card:
        - width: auto
        - border: none
      custom_fields:
        volume:
          - margin-top: "-160px"
          - margin-left: 10px
        input:
          - margin-left: "-80px"
          - width: 135px
    custom_fields:
      volume:
        card:
          type: vertical-stack
          cards:
            - type: custom:mushroom-chips-card
              chips:
                - type: template
                  tap_action:
                    action: toggle
                  hold_action:
                    action: toggle
                  double_tap_action:
                    action: toggle
                  entity: scene.speaker_vol_up
                  icon: mdi:volume-plus
                  icon_color: green
            - type: custom:mushroom-chips-card
              chips:
                - type: template
                  tap_action:
                    action: toggle
                  hold_action:
                    action: toggle
                  double_tap_action:
                    action: toggle
                  entity: scene.speaker_vol_down
                  icon: mdi:volume-minus
                  icon_color: green
      input:
        card:
          type: vertical-stack
          cards:
            - type: custom:mushroom-chips-card
              chips:
                - type: template
                  tap_action:
                    action: toggle
                  hold_action:
                    action: toggle
                  double_tap_action:
                    action: toggle
                  entity: scene.speaker_input
                  icon: mdi:import
                  icon_color: yellow
                  card_mod:
                    style: |
                      ha-card {
                       left: 46px;}
            - type: custom:mushroom-chips-card
              chips:
                - type: template
                  entity: scene.speaker_last
                  tap_action:
                    action: toggle
                  icon: mdi:rewind
                - type: template
                  entity: scene.speaker_play
                  tap_action:
                    action: toggle
                  icon: mdi:play-pause
                - type: template
                  entity: scene.speaker_next
                  tap_action:
                    action: toggle
                  icon: mdi:fast-forward
  - type: custom:button-card
    entity: scene.speaker_on_off
    icon: mdi:speaker
    color: lightblue
    show_name: false
    tap_action:
      action: toggle
    size: 5em
    styles:
      card:
        - width: auto
        - border: none
      custom_fields:
        volume:
          - margin-top: "-160px"
          - margin-left: 10px
        input:
          - margin-left: "-80px"
          - width: 135px
    custom_fields:
      volume:
        card:
          type: vertical-stack
          cards:
            - type: custom:mushroom-chips-card
              chips:
                - type: template
                  tap_action:
                    action: toggle
                  hold_action:
                    action: toggle
                  double_tap_action:
                    action: toggle
                  entity: scene.speaker_vol_up
                  icon: mdi:volume-plus
                  icon_color: green
            - type: custom:mushroom-chips-card
              chips:
                - type: template
                  tap_action:
                    action: toggle
                  hold_action:
                    action: toggle
                  double_tap_action:
                    action: toggle
                  entity: scene.speaker_vol_down
                  icon: mdi:volume-minus
                  icon_color: green
      input:
        card:
          type: vertical-stack
          cards:
            - type: custom:mushroom-chips-card
              chips:
                - type: template
                  tap_action:
                    action: toggle
                  hold_action:
                    action: toggle
                  double_tap_action:
                    action: toggle
                  entity: scene.speaker_input
                  icon: mdi:import
                  icon_color: yellow
                  card_mod:
                    style: |
                      ha-card {
                       left: 46px;}
            - type: custom:mushroom-chips-card
              chips:
                - type: template
                  entity: scene.speaker_last
                  tap_action:
                    action: toggle
                  icon: mdi:rewind
                - type: template
                  entity: scene.speaker_play
                  tap_action:
                    action: toggle
                  icon: mdi:play-pause
                - type: template
                  entity: scene.speaker_next
                  tap_action:
                    action: toggle
                  icon: mdi:fast-forward

This will allow you to control column sizes

grid-template-columns: 1fr 1fr 1fr you can use % as well
grid-template-columns: 40% 60%

DP0427 · March 29, 2025, 3:33am

I ended up playing around with that grid layout and tweaking it when adding in different buttons because I was noticing the speaker remote I made got kind of distorted on Mobile View etc based on how many things were on the same level as it. So I added in some lighting control buttons and lined them up so that they are on 2 lines and doesn’t look half bad: