Make statistics card look like tile card

Configuration Frontend
,
1

Hi all.

I really like the simplicity and looks of tile cards. Icon, description and value. That’s it. However when value is a statistic, say monthly energy usage, I need to use the Statistic card. And that one is pretty bulky. It has a lot of padding and wastes a bit too much space imho. Also the icon isn’t on the left, but on the right.

IMG_3369
IMG_3369575×613 31.7 KB

Is there any way to change the statistic card so that it looks as clean as a tile card?

1 Like
2

It is called “customizing css” for which you will need to learn css and card-mod.

3

Thanks for the tip! After a lot of fiddling I came up with these settings, that kinda mimick the appearance. Still it would be better if the statistics card simply has a horizontal option, so it looks identical to a Tile Card. Anyways, if anyone runs into the same problem, try these settings:

type: statistic
period:
  calendar:
    period: month
stat_type: change
name: Stroom
grid_options:
  rows: ""
entity: sensor.energy_import
icon: mdi:lightning-bolt
card_mod:
  style: |
    ha-card {
    }
    .header {
      padding-top: 0px !important;
      display: flex;
      flex-direction: row-reverse;
      gap: 8px !important;
    }
    .name {
      color: #fff !important;
      font-size: 14px !important;      
      margin-left: 10px !important;
      text-align: left !important;
      flex-grow: 1 !important;
    }
    .info {
      margin-top: -21px !important;
      padding-bottom: 2px !important;
      margin-left: 42px;
    }
    .value, .measurement {
      color: #fff !important;      
      font-size: 12px !important;
    }
    .measurement {
      margin-left: -4px !important;
    }
    .icon { 
      margin-top: 5px;
    }

How it looks:

image
image503×140 6.84 KB

The first three are the modified stats, the fourth card is a real Tile Card.

1 Like