Need help with card-mod and glance cards

Configuration Frontend
1

Hello,

I don’t really understand how to use card-mod when there are shadow roots involved so I have to rely on tutorials for anything.

Currently I’m trying to style a glance card. I want to have a custom font size in the title and also a custom background color. I found a solution for the font size but I don’t know how to integrate that with the example for the background color.

Current code:

card_mod:
  style: 
    $: |
      .card-header {
          font-size: 15px !important;
          font-weight: bold;          
          padding: 0px 0px 0px 20px !important;
          line-height: 10px;
      }

On github, there is an explanation for styling the background color:

card_mod:
  style: |
    ha-card {
      background-color: red;
    }

How can i put those together? I tried different things but nothing worked, mainly because the pipe character | is in a different position.

2

Like this ?

settings exaggerated for the example

card_mod:
  style: 
    $: |
      .card-header {
          font-size: 45px !important;
          font-weight: bold !important;;        
          color: red !important;
          }
      :host { 
       background: grey !important;
          }

image
image766×354 9.62 KB

3

That works. Thanks!

4

Please mark the post above as the Solution to close out this thread and assist others who have a similar issue.