edoras
(Jiri Mares)
1
How to change font-size for header in horizontal stack? (“Spot price”)
![spotprice](https://community-assets.home-assistant.io/original/4X/2/6/e/26e089ad49f0f6b2ef61061e5edb434e975b2a67.png)
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;
}
WallyR
(Wally)
2
The stack cards have no fonts, only other cards.
You need to change them instead.
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: :wink:](https://community.home-assistant.io/images/emoji/twitter/wink.png?v=12)
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