[Styling Module] Sub-buttons below

[MrBearPresident]

Sub-buttons below

Version: v2025.02.0
Creator: -> MrBearPresident

Important

Unsupported cards:

• Horizontal buttons stack
• Pop-up
• Empty Column

This module adds all the necessary css to move the subbuttons below and make full use of the witdh. In meantime give the main feature and title the room to use that witdh. Only applicable when multirow sections are used.
Configure this module via the editor or in YAML, for example:

type: custom:bubble-card
card_type: button
modules:
  - subbutton_below
card_layout: large
grid_options:
  rows: 3
sub_button:
  - entity: sun.sun
    icon: mdi:numeric-0
  - entity: sun.sun
    icon: mdi:numeric-1
  - entity: sun.sun
    icon: mdi:numeric-2
  - entity: sun.sun
    icon: mdi:numeric-3
button_type: state
entity: sun.sun

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

subbutton_below:
    name: Sub-button below
    version: "v2025.02.0"
    creator: "MrBearPresident"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1291"
    description: This module adds all the necessary css to move the subbuttons below and make full use of the witdh. In meantime give the main feature and title the room to use that witdh. Only applicable when multirow sections are used. 
    unsupported:
      - horizontal-buttons-stack
      - pop-up
      - empty-column
    code: |
          :host{
            --row-size-copy: var(--row-size,1);
          }


          .large .bubble-button-card, .large .bubble-climate, .large
          .bubble-select-card,  .large .bubble-separator, .large
          .bubble-cover-card-container{
            display: grid;
            grid-template-areas:
            'i n a' 'b b b' !important;
            grid-template-columns: auto 1fr auto;
            grid-template-rows: var(--row-height,56px) 1fr;
            justify-self: start;
            justify-items: start;
            align-self: center;
            align-items: center;
            width: 100%;
            gap: 0px;
          }
          .large .bubble-cover-card-container .bubble-header {
            display: contents;
          }
          .large .bubble-cover-card-container .bubble-buttons {
            display: flex;
            align-self: center;
            grid-area: a !important;
            right:0;
            padding: 0 18px 0 0;
          }
          .large .bubble-separator.separator-container{
            grid-template-columns: auto auto 1fr;
          }
          .large .bubble-media-player{
            display: grid;
            grid-template-areas:
            'i n a1 a2 a3 a4 a5' 'b b b b b b b' !important;
            grid-template-columns: auto 1fr auto auto auto auto auto;
            grid-template-rows: var(--row-height,56px) 1fr;
            justify-self: start;
            justify-items: start;
            align-self: center;
            align-items: center;
          }
          .large .bubble-climate .bubble-button-container{
            grid-area: a;
            display: contents !important;
          }
          .large .bubble-climate .bubble-temperature-container{
            grid-area: a;
            height: calc(var(--row-height,56px) - 20px);
            width: auto;
            justify-self: center;
            margin-right: var(--gap-to-edge,7px);
          }
          .large .bubble-select-card > .bubble-dropdown-container{
            grid-area: a;
            display: contents !important;
          }
          .large .bubble-select-card .bubble-dropdown-arrow{
            grid-area: a;
          }
          .large .bubble-media-player-container .bubble-power-button{
            grid-area: a1;
            margin: 0px 6px
          }
          .large .bubble-media-player-container .bubble-previous-button{
            grid-area: a2;
            margin: 0px 6px
          }
          .large .bubble-media-player-container .bubble-next-button{
            grid-area: a3;
            margin: 0px 6px
          }
          .large .bubble-media-player-container .bubble-volume-button{
            grid-area: a4;
            margin: 0px 6px
          }
          .large .bubble-line{
            grid-area: a;
            width: 100%
          }
          .large .bubble-media-player-container  .bubble-play-pause-button {
            display: flex;
            height: 42px;
            width: 42px;
            padding: 0;
            grid-area: a5;
            align-items: center;
            justify-content: center;
            margin: 7px 7px 7px 6px;
          }
          .large .bubble-media-player-container .bubble-button-container{
            grid-area: a1;
            display: contents;
          }
          .large .bubble-name-container {
            justify-content: flex-start;
            grid-area: n;
            overflow: hidden;
            max-width: calc(100% - 2 * var(--gap-to-edge,7px));
          }
          .large .bubble-sub-button-container {
            --row-size: calc( var(--row-size-copy) - 1);
            max-width: calc(100% - 20px);
            max-height: calc(100% - 20px);
            grid-area: b;
            justify-self: center;
            align-self: center;
            justify-content: center;
            align-content: start;
            justify-items: center;
            margin: 0;
            left: 0;
            right: 0;
          }
          .large .bubble-icon-container {
            grid-area: i;
          }

---

Screenshot:

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️

[MrBearPresident]

@HyperCriSiS & @ddkedr: Here you go.