Reduce Dashboard text size and line spacing's

[zunixnuz]

I just want to reduce the size of my Dashboard cards by reducing the text size and line spacing’s from header and body.
I started to do this on ‘Entity-List’ and thought that would be easy but it seems not to be.
I suppose the only ways this can be done is by using card_mod or creating a new theme
but i am not able to find the correct styles for this.

Any hints or solutions are very welcome!
What is the best approach to reduce the size?
Maybe someone knows a size-reduced theme?

[Recte]

If you want it in general, I’d suggest creating a custom template. If it’s specific, you could consider Card-Mod.

[tom_l]

Yes indeed, card-mod is the way to do this.

card_mod:
  style:
    .: |
      #states > * {
          margin: -1px 0px !important;
      }

Without card-mod:

With card-mod:

[zunixnuz]

Thanks for your reply!
I am sorry but i don’t understand the “creating a custom template” approach for this.
Can you give me more details or an example?

[zunixnuz]

Thanks for your reply!
I will try that.
It looks like you are also using a smaller font size.
Have you done this by changing the theme or also via card-mod?
Can you also post your solution for this?

[tom_l]

Only the card title font. I use a card-mod theme for this.

themes.yaml

night:
# removed regular theme stuff from here for clarity #

  card-mod-theme: night
  card-mod-card: |

    .card-header {
      font-size: 20px;
      font-weight: 300;
      letter-spacing: 0px;
    }

[Recte]

The words I used are a bit confusing since the word template in HA is associated with the jinja scripting. I more or less meant something like layout-card but I cannot find the thing I once found but never used myself eventually.

[zunixnuz]

Thanks for help. This is my solution now for 3 test cards :

card_mod:
  style:
    .: |
      #states > * {
        margin: -8px 0px !important;
        font-size: 12px;
        --mdc-icon-size: 16px; 
      }
      .card-header {
        font-size: 20px;
        line-height: 20px;
      }

Result:

As you can see the spacing for the lines on the “Rollo” card are bigger than on the other cards
but i can’t figure out how to reduce the size/padding of the cover controls, any tips for this?
Also i would like to reduce the size of the toggle switches on the “Licht” card, any tips for this?

[zunixnuz]

Hi,
perhaps my last questions according to the screenshot where not clean, but i hope i get some hints for these:

1. How can i reduce the size/padding of the cover-controls on the “Rollo” card?
2. How can i reduce the size of the toggle-switches on the “Licht” card?
3. Is there a way to completely remove the cover-controls and toggle-switches?