Setting background

[luixal]

Hi,

I'm using layout-card to "join" two different cards in one, one next to each other. This is my config (without card content to make it more readable):

type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - type: custom:mushroom-template-card
    ...
  - type: custom:paper-buttons-row
    ...
layout:
  grid-template-columns: 60% 40%
  place-items: center stretch

Everything works well and gives me a card like this one (it's a dashboard for an irrigation system):

The only problem I'm facing is setting this card's background. I want to make it white with rounded borders. Using the browser's console I can achieve this in two ways:

• Applying this css to the layout-card element:

background: var(--ha-card-background,var(--card-background-color,#fff));
border-radius: var(--ha-card-border-radius,12px);

• Applying the same css to the div with id root element and removing the margin:

background: var(--ha-card-background,var(--card-background-color,#fff));
border-radius: var(--ha-card-border-radius,12px);
margin: 0;

but I can't find a way to apply a custom style to the layout-card itself.

Is there any way to apply css to the whole layout-card?

Thanks!

[dnestico]

Did you ever figure this out? Looking to do the same kinda.

[nyffchanium]

You can use card-mod to achieve this. Wrap the card in a mod-card:

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      background: var(--ha-card-background,var(--card-background-color,#fff));
      box-shadow: var(--ha-card-box-shadow,none);
      box-sizing: border-box;
      border-radius: var(--ha-card-border-radius,12px);
      border-width: var(--ha-card-border-width,1px);
      border-style: solid;
      border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
      color: var(--primary-text-color);
      display: block;
      transition: all 0.3s ease-out 0s;
      position: relative;
    }
card:
  type: custom:layout-card
  layout_type: custom:grid-layout
  cards:
    - type: custom:mushroom-template-card
      ...
    - type: custom:paper-buttons-row
      ...
  layout:
    grid-template-columns: 60% 40%
    place-items: center stretch

[luixal]

I ended up using button-card because its features were handy to achieve other things I needed (js templates, reusable, etc.)