Resize title font on custom:vertical-stack-in-card using card_mod

aruffell · February 15, 2025, 11:44pm

I resize all my card titles because the default is way too big IMO.
This is what they look like:

However, I ran into issues when needing to stack entities and history-graph cards together as the card_mod style no longer works. After tons of searching I found the variable that allowed me to downsize the font of the title but I am stuck with a huge space between the title and the section (line).

Does anyone know how to do this properly?

The code I usually use is:

type: entities
card_mod:
  style: |
    .card-header {
      font-size: 18px;
      padding: 2px 15px 2px 15px
    }
entities:
  - type: section

This is what the stack that has an issue looks like:

This is the code for the stack shown above:

type: custom:vertical-stack-in-card
title: Grow Light & Fan
card_mod:
  style: |
    ha-card {
      --ha-card-header-font-size: 18px !important;
    }
cards:
  - type: entities
    show_header_toggle: false
    state_color: true
    entities:
      - type: section
      - type: custom:multiple-entity-row
        entity: input_boolean.grow_light
        toggle: true
        show_state: true
        entities:
          - entity: switch.top_grow_light
            name: Top
          - entity: switch.bottom_grow_light
            name: Bottom
        state_color: true
      - entity: input_select.grow_light_selection
      - entity: input_boolean.grow_light_schedule
        name: Grow Light Schedule
      - entity: input_datetime.grow_light_on_time
        name: "Turn on daily at:"
      - entity: input_datetime.grow_light_off_time
        name: "Turn off daily at:"
      - type: divider
      - entity: input_boolean.grow_fan
      - entity: switch.grow_fan_outlet
        type: simple-entity
        tap_action: none
        hold_action: none
        state_color: true
      - entity: input_boolean.grow_fan_schedule
        name: Grow Fan Schedule
        state_color: true
      - entity: input_datetime.grow_fan_on_time
        name: "Turn on daily at:"
      - entity: input_datetime.grow_fan_off_time
        name: "Turn off daily at:"
      - entity: input_button.sync_grow_schedules
      - input_boolean.grow_fan_on_off_cycle
      - entity: timer.grow_fan_timer
        type: custom:timer-bar-card
        name: Grow Fan Cycle
        bar_background: gray
        bar_radius: 5px
        state_color: true
        invert: false
      - entity: input_select.grow_fan_cycle_on
        name: Cycle On Time
      - entity: input_select.grow_fan_cycle_off
        name: Cycle Off Time
  - type: history-graph
    entities:
      - entity: switch.grow_fan_outlet
        name: Grow Fan
    hours_to_show: 24

LiQuid_cOOled · February 15, 2025, 11:56pm

The code you have should work.

type: custom:vertical-stack-in-card
title: Grow Light & Fan
card_mod:
  style: |
    ha-card {
      --ha-card-header-font-size: 50px !important;
      --ha-card-header-color: red !important;
       }

If you have card_mod v3.5 installed, that version was pulled. Install v3.4.4

aruffell · February 16, 2025, 12:00am

@LiQuid_cOOled The font does get smaller as desired but there is a large empty space between the title and the section line that is not there normally. My usual code has a “padding” too but I could not figure out how to convert that for this case.

Normal or desired spacing:

Edit: I downgraded, but no change.

LiQuid_cOOled · February 16, 2025, 12:13am

LiQuid_cOOled:

type: custom:vertical-stack-in-card
title: Grow Light & Fan
card_mod:
  style: |
    ha-card {
      --ha-card-header-font-size: 50px !important;
      --ha-card-header-color: red !important;
       }

Have you tried stack-in-card vs vertical-stack-in-card? It plays way better with card_mod

If you still want to use vertical-stack-in card

use this

type: custom:vertical-stack-in-card
title: Grow Light & Fan
card_mod:
  style: |
    ha-card {
      --ha-card-header-font-size: 30px !important;
      --ha-card-header-color: red !important;
       }
cards:
  - type: entities
    card_mod:
      style:  |
       ha-card{
         margin-top: -25px;
         }
    show_header_toggle: false
    state_color: true
    entities:

~~or use the built in styles: function~~ EDITED: no longer works beyond the UI editor

type: custom:vertical-stack-in-card
title: Grow Light & Fan
styles: 
    margin-top: -25px
cards:
  - type: entities

aruffell · February 16, 2025, 1:41am

After downgrading to 3.44 the card_mod code for the custom:vertical-stack-in-card gets removed when you go back in… Anyhow even in the editor, the -25px margin doesn’t fix the spacing issue so I upped it to -35px but that truncates the bottom of the title.

I did try other stacking cards and I opted out of stack-in-card because it hasn’t been supported since 2020 according to github. The one I am using is, but I can’t figure out how to fix the header.

aruffell · February 16, 2025, 2:23am

Apparently, downgrading to 3.4.4 made my original card_mod code work again:

type: custom:vertical-stack-in-card
cards:
  - type: entities
    card_mod:
      style: |
        .card-header {
          font-size: 18px;
          padding: 2px 15px 2px 15px
        }
    title: Grow Light & Fan
    show_header_toggle: false
    state_color: true
    entities:
      - type: section
      - type: custom:multiple-entity-row
        entity: input_boolean.grow_light
        toggle: true
        show_state: true
        entities:
          - entity: switch.top_grow_light
            name: Top
          - entity: switch.bottom_grow_light
            name: Bottom
        state_color: true
      - entity: input_select.grow_light_selection
      - entity: input_boolean.grow_light_schedule
        name: Grow Light Schedule
      - entity: input_datetime.grow_light_on_time
        name: "Turn on daily at:"
      - entity: input_datetime.grow_light_off_time
        name: "Turn off daily at:"
      - type: divider
      - entity: input_boolean.grow_fan
      - entity: switch.grow_fan_outlet
        type: simple-entity
        tap_action: none
        hold_action: none
        state_color: true
      - entity: input_boolean.grow_fan_schedule
        name: Grow Fan Schedule
        state_color: true
      - entity: input_datetime.grow_fan_on_time
        name: "Turn on daily at:"
      - entity: input_datetime.grow_fan_off_time
        name: "Turn off daily at:"
      - entity: input_button.sync_grow_schedules
      - input_boolean.grow_fan_on_off_cycle
      - entity: timer.grow_fan_timer
        type: custom:timer-bar-card
        name: Grow Fan Cycle
        bar_background: gray
        bar_radius: 5px
        state_color: true
        invert: false
      - entity: input_select.grow_fan_cycle_on
        name: Cycle On Time
      - entity: input_select.grow_fan_cycle_off
        name: Cycle Off Time
  - type: history-graph
    entities:
      - entity: switch.grow_fan_outlet
        name: Grow Fan
    hours_to_show: 24

LiQuid_cOOled · February 16, 2025, 2:33am

Why even use the title in the vertical-stack-in-card?

Shift it to the Entities card

type: custom:vertical-stack-in-card
cards:
  - type: entities
    card_mod: 
     style: |
      ha-card .card-header {
       color: yellow;
       font-size: 18px;
       line-height: 22px !important;
       padding-bottom: 10px;
        }
    title: Grow Light & Fan
    show_header_toggle: false
    state_color: true
    entities:
      - type: section

aruffell · February 16, 2025, 2:57am

@LiQuid_cOOled - I actually moved it there as it was no longer working in the entities card where it was before. The code that now works again has it inside the entities card like in your example, however I will play around with your version of the card_mod code to see if I can make that section even a tiny bit smaller, or look better.

Thanks for your help!

LiQuid_cOOled · February 16, 2025, 2:58am

You definitely can shrink it further with the Entities method.