So First I have pretty much no idea what I am doing.
I would like to change the font size of these to 18 or 20…
If I check Chrome Dev tools the info is located here.
I’ve tried adding this and it’s not working (yes I know this shows 16, I was just trying to make an obvious change so that I know if it was working)
Any pointers to what I am missing?
1 Like
I have been trying the same with an entities card by using Lovelace card-mod 3 which should work but I have not had any luck. I use Firefox though and that could be a reason. So you might be able to get it to work.
jms3000
(Martin)
June 2, 2021, 7:47am
3
You wrote “vlaue” instead of “value”
hahah. Thanks good eye.
where were you 3 months ago. lol
rover1955
(Rover1955)
June 17, 2021, 9:34pm
5
I am struggling with what seems like a simple task. I have an entity card and I want to change the font size of the attribute on the card.
type: entity
entity: remote.livingroom
attribute: current_activity
card_mod:
style: |
ha-card {
color: red;
font-size: 8px;
}
.span.value {
font-size: 8px;
}
I can do it on an Entities card.
type: entities
entities:
- entity: remote.livingroom
card_mod:
style: |
:host {
font-size: 8px;
}
I have used the Developer Tool in Edge to get the information on the entity card
I need some help in how to properly interpret the CSS data and use it in the card.
Any suggestions?
Thanks
ngabor
(Gábor Nagy)
October 12, 2021, 10:00am
6
Using simply .value works for me:
2 Likes
DomoSnk
(Domo Snk)
February 17, 2022, 6:54pm
8
I have some problem with text on a single (of double) column.
It cut the font size. How can I fix it?
KTS
July 17, 2022, 9:28am
9
I can’t get the font size to change on my cards either. I have tried several things. All without success. Do you have any idea what I am doing wrong?
type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.presence_simulation
icon: mdi:robot-happy
name: Simulation
show_state: false
style: |
:host {
font-size: 8px !important;
}
or
type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.presence_simulation
icon: mdi:robot-happy
name: Simulation
show_state: false
style: |
ha-card {
font-size: 8px !important;
}
or
type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.presence_simulation
icon: mdi:robot-happy
name: Simulation
show_state: false
font-size: 80%
1 Like
This won’t work with standard button card. Use custom button card
jralph23
(Jordan)
December 29, 2022, 1:02pm
11
Hi All
Thought I’d add on to this post to see if anyone can help with my issue. I’m trying to increase the font size of a simple entity card displaying temperature. I’ve been reading and searching for something related but have now given up and decided to post my specific issue.
When I use the card-mod code to increase the font size, it just increases the spacing (see screen shots). Can someone please help?!
Screenshot 2022-12-29 235722|690x445
1 Like
Protoncek
(Pavel)
December 29, 2022, 3:47pm
12
I don’t use entity card anymore, for many things (including replacement for markdown) i use cusotm:button-card. It’s massively adaptable, has tons of functions and it’s, i think, one of most usable cards in HA.
card-mod thread → 1st post → link at the bottom → styles for Entity card
falco1717
(Falco1717)
June 1, 2023, 5:25pm
14
How would I go about changing the title font size of people at home? It appears to be under h1.card-header
bottomCard:
type: custom:layout-card
layout_type: custom:vertical-layout
layout:
max_cols: 1
cardStyle: |
:host {
width: 104% !important;
position: absolute;
bottom: 0%;
left: -2%;
}
.column.cards {
max-width: 100% !important;
}
.cards > :last-child {
margin: 0px !important;
}
column {
font-size: 10px !important;
}
cardOptions:
cards:
- type: entity-filter
entities:
- person.falco1717
state_filter:
- home
card:
type: glance
title: People at home
show_state: false
show_name: false
style: |
ha-card {
background: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 4px;
font-size: 1;
border: none;
}
- type: custom:simple-weather-card
backdrop: false
entity: weather.openweathermap
name: ' '
tap_action:
action: navigate
navigation_path: /dashboard-test/meteo
style: |
ha-card {
background: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 4px;
font-size: 1vw;
border: none;
}
- type: custom:mini-graph-card
tap_action:
action: none
show:
icon: false
legend: false
name: false
entities:
- sensor.openweathermap_temperature
font_size: 35
update_interval: 15
font_size_header: 9
hours_to_show: 24
points_per_hour: 1
icon: mdi:home-thermometer-outline
color_thresholds:
- color: '#4dd2ff'
value: 0
- color: '#ffa31a'
value: 20
- color: '#ff1a1a'
value: 0
style: |
ha-card, ha-card > div {
padding: 0px !important;
border: none;
}
ha-card > .header.flex > div, ha-card > .states.flex > div {
padding: 5px !important;
font-weight: 500;
}
ha-card > .info.flex > .info__item > .info__item__time {
display: none;
}
ha-card {
background-color: rgba(40,40,40,0);
}
.name > span {
font-weight: 500 !important;
}
I have the same problem… did you manage to fix this?
Can you please post your code?
devedsmith
(David Smith)
March 22, 2024, 12:01pm
17
More call for Dashboard style edit features in the UI me thinks. It’s long overdue.
1 Like
MortyFleem
(Jason Fortuna)
September 10, 2024, 10:40am
18
Why in the living heck is this not a standard feature?
Tomadoggy
(John Gibson)
October 9, 2024, 5:19pm
19
Not to digress this thread, but I am trying to alter the font size of the state in an entity card. Worked on this for a few days with many different tries, but unable to alter the state font size. NP altering the entity text. Any ideas very welcome. By way of example, I am trying to make the “Unlocked” text smaller.
You will see this if you scroll up a bit