Horizontal stack - change font size

Configuration Frontend
1

How to change font-size for header in horizontal stack? (“Spot price”)

spotprice

I use this code, but it doesn’t work …

type: horizontal-stack
cards:
  - type: entities
    entities:
      - entity: input_number.battmgmt_priceplan1_priceod
        name: 'OD:'
  - type: entities
    entities:
      - entity: input_number.battmgmt_priceplan1_pricedo
        name: 'DO :'
title: Spot price
card_mod:
  style:
    hui-horizontal-stack-card $: |
      .card-header {
        font-size: 10px !important;
      }
2

The stack cards have no fonts, only other cards.
You need to change them instead.

3

you need to add mod-card, as the stack cards do not have a ha-card element, and that is what you need to mod it :wink:

type: custom:mod-card
card_mod:
  style:
    hui-horizontal-stack-card $: |
      .card-header {
        font-size: 10px !important;
      }  
card:
  type: horizontal-stack
  title: Spot price
  cards:
    - type: entities
      entities:
        - entity: input_number.active_icon_size
          name: 'OD:'
    - type: entities
      entities:
        - entity: input_number.alarm_volume
          name: 'DO :'

you probably want to set box-shadow: none;. for the embedded cards too

o and add this to the top mod-card:

      :host {
        --stack-card-gap: 0;
      }

to take out the gap between the 2 entities

but, beware, there is an easier way to mod that title:

type: custom:mod-card
card_mod: 
  style: |
      ha-card {
       --ha-card-header-color: red;
       --ha-card-header-font-size: 10px;
      }
      :host {
        --stack-card-gap: 0;
      }

also, if you have question about modding, always search the main card-mod thread in this community, and find many answers. The one about stack-cards: 🔹 Card-mod - Add css styles to any lovelace card - #1731 by Ildar_Gabdullin

just note that you might need to add the

card_mod:
  style:

to any mod, because the post was written before that became obligatory

just for the fun of it:

type: custom:mod-card
card_mod: 
  style:  |
    ha-card {
     --ha-card-header-color: red;
     --ha-card-header-font-size: 10px;
    }
    :host {
      --stack-card-gap: 0;
    }
card:
  type: horizontal-stack
  title: Spot price
  cards:
    - type: entities
      <<: &box
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
            }
      entities:
        - entity: input_number.active_icon_size
          name: 'OD:'
    - type: entities
      <<: *box
      entities:
        - entity: input_number.alarm_volume
          name: 'DO :'

will do it

1 Like