Changing card background and card-header with card-mod

Configuration Frontend
1

Hello!

I’m trying to give some color to my cards, but I can’t seem to make it work.
I found the individual styling that I can add separately to my card and it works like a charm, but I dont know how to combine them so that they both work.

The first one changes the card-header:

type: custom:mod-card
card_mod:
  style:
    hui-vertical-stack-card:
      $: |
        .card-header {
          color: gray;
          text-align:  center !important;
          padding: 0.1em 0.1em 0.8em !important;
          --ha-card-header-font-size: 30px;
          font-weight: bold !important;
          font-size: 18px !important;
        }

The second one is the card itself:

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      background: orange;
      box-shadow: none;
    }

So individually they work, but if I try to combine them, they don’t or its just one of the two.

How can I make this work?

2

Allready found an answer:

type: custom:mod-card
card_mod:
  style:
    hui-vertical-stack-card:
      $: |
        .card-header {
          color: white !important;
          font-weight: bold !important;
          text-align: center !important;
          font-size: 16.8px !important;
          padding: 0 !important;
        }
    .: |
      ha-card {
        padding: 0 15px 15px;
        background-color: #020024;
      }
1 Like