Styling area card with custom CSS

Configuration Frontend
1

Hey,

I want to style the area card (type: area; hui-area-card). I know that I can use card-mod but I do not want to copy the CSS to all of my area cards since Ive got 20+ of them :smiley:

So I followed some instructions here in the forum and tried to integrate a custom css file:

  1. I have put the CSS file at ./www/custom.css (from the root directory of my home assistant installation)
  2. I have added it to the resources list of my dashboard:
    image
    image667Ă—701 63 KB

The problem I have now is that all the CSS attritbues I add are simply ignored,
e.g. I have just used

body {
  background-color: lightblue;
}

but it is not applied.

Currently my dashboard looks like this on my mobile device (and this is the platform for which I want to optimize the look and feel):
image

image
image497Ă—551 56.5 KB

Anyhow I am even failing to customize the look and feel with card-mod:

card_mod:
  style: |
    .bottom {
      font-size: 10px important!;
    }
    .name {
      font-size: 10px important!;
    }
    ha-card {
      font-size: 12px important!;
    }
    .sensors {
      font-size: 10px important!;
    }

image

I want to change the font sizes and maybe icon sizes so that the text and icons are not overlapping.

What am I doing wrong? Can you please help me!

Thank you! :slight_smile:

2

Both in yaml-mode of a dashboard & storage-mode you can use “card-mod reuse” technics, described here: main card-mod thread → 1st post → link at the bottom titled “fantastic” → others → how to reuse.

Suggest to ask all card-mod-related questions in that main card-mod thread.

1 Like
3

Thank you - I think I found what you have talked about.

Like this comment of you Card-mod - apply identical card-mod to multiple items? - #4 by Ildar_Gabdullin :slight_smile:

4

Kind of. More details were provided in the link I gave you above.

1 Like
5

Found it - this one: 🔹 Card-mod - Add css styles to any lovelace card - #1396 by Ildar_Gabdullin :slight_smile:

Also great job made by you! Thank you very much!

1 Like
6

Anybody trying to solve the same issue than me, here is my solution:

I have a custom theme at themes/custom/theme.yaml which I am using.

There I have added the following card mod theme:

  # Card mod theme
  card-mod-theme: "custom"
  card-mod-card-yaml: |
     .: |
      ha-card {
        .alerts {
          display: none;
        }
        .bottom {
          height: 100%;
        }
        .bottom div {
          height: 100%
        }
        .bottom .name {
          font-size: 14px;
          height: auto;
        }
        .bottom .sensors {
          font-size: 12px;
          --mdc-icon-size: 12px;
          height: auto;
          position: absolute;
          bottom: 10px;
        }
        .buttons {
          display: none;
        }
      }

Note: I have also remove the alerts section and the buttons on the area card since I dont need them.

That’s it. Result:
image