Change the background colour of a horizontal stack

Configuration Frontend
1

Trying to change the colour of the Horizontal stack background (NOT the card background) I have card_mod installed and that works for individule cards but cant get it working for the stack.

type: horizontal-stack
cards:
  - type: custom:mushroom-climate-card
    entity: climate.climate_bedroom_front_away
    name: Bedroom (Away)
    collapsible_controls: true
    show_temperature_control: true
  - type: custom:mushroom-climate-card
    entity: climate.downstairs_away
    name: Utility Room (Away)
    show_temperature_control: true
    collapsible_controls: true
2

The stack cards are not normal cards and I do not think they have the required CSS tags to be handled with card_mod.

3

This works, not sure why I cant get a bottom margin?

type: custom:mod-card
style:
  hui-horizontal-stack-card$: ""
  .: |
    ha-card {
      background-color: red;
    }
card:
  type: horizontal-stack
  cards:
    - type: entities
      entities:
        - sensor.backup_backup_manager_state
        - sensor.sun_next_dawn
        - sensor.sun_next_dusk
      card_mod:
        style: |
          ha-card {
            margin-left: 10px !important;
            margin-bottom: 10px !important;
            margin-top: 10px !important;
          }   
    - type: clock
      card_mod:
        style: |
          ha-card {
            margin-right: 10px !important;
            margin-bottom: 10px !important;
            margin-top: 10px !important;            

          }

image
image757×362 7.74 KB

4

What do you need margins for?
To increase “red spaces” above and below cards? Then increase paddings for the stack’s “div#root” element instead of those margins.

5

Thanks for the reply, I have looked though your examples on another thread but I have no idea how to use div#root.

Could you show me where it would go in my code?

6

Examples for div root were provided in card mod thread: 1st post - link at the bottom. - vertical/horizontal stacks

7

Sorry could not find what you suggested re div root

but ended up with this which I am very happy with.

image
image840×299 15.7 KB

Here is my code to help anyone

type: custom:mod-card
card_mod:
  style:
    hui-vertical-stack-card $: |
      .card-header {
        font-size: 16px !important;
        font-weight:bold !important;
        margin-top: -20px !important;
        margin-bottom: -15px !important;
        margin-left: -10px !important;
      }  
    hui-horizontal-stack-card$: ""
    .: |
      ha-card {
        border: 2px solid rgb(3,169,244) !important;
        padding:2px;
        background-color: rgb(235,236,240)
      }
card:
  type: vertical-stack
  title: 🔥Requests to Boiler Controller
  cards: