How to change font-size of entity card? I'm lost

[C0mmanda]

I’m trying to change the font size of an entity-card, thought it would be a simple thing…
After about one hour of try&error I have absolutely no clue what to do.

Heres my Card:

type: custom:mushroom-entity-card
entity: sensor.katha_homestatus
icon_type: entity-picture
icon: none
primary_info: name
secondary_info: state
card_mod:
  style: |
    ha-card {
      --card-primary-font-size: 14px;
      --card-secondary-font-size: 20px;
    }

I have tried a lot of different versions of “card_mod” but nothing worked.
All I get is this message (see picture) but there’s nothing changing.

Would appreciate any pushes to right direction.
Thank you.

[Nick4 (Nick)]

Hi, have a look at this: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #49 by piitaya

[C0mmanda]

Thank you for that.
I‘m sorry, but… I dont get it?!

First of all Mushroom Themes should be part of HA since 2022.11 and I don‘t want to change the whole Theme, just the font-size of a single card…

Who am I overlooking?

[Nick4 (Nick)]

In that example from Kabala, he is changing the font size for the state.
Here’s another example: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #811 by pedolsky

[C0mmanda]

Oh, sorry for that, now I’ve seen it.
My problem remains the same… nothing changes…
Even the Error message stays the same…

[boheme61]

add this in either theme, or in card ( via card_mod )

mush-card-primary-font-size: 14px;
mush-card-secondary-font-size: 12px;
mush-card-primary-font-weight: bold;
mush-card-secondary-font-weight: bolder;

[Nick4 (Nick)]

This works:

type: custom:mushroom-entity-card
entity: person.nick
card_mod:
   style: |
     ha-card {
        font-family: "Lucida Handwriting";
        --card-primary-font-size: 50px
     }

[boheme61]

type: custom:mushroom-entity-card
entity: sensor.battery_porch
card_mod:
   style: |
      :host {
        --mush-card-primary-font-size: 24px;
        --mush-card-secondary-font-size: 22px;
        --mush-card-primary-font-weight: lighter;
        --mush-card-secondary-font-weight: bolder;
      }

[C0mmanda]

Thank you very much for your help guys…
But everything remains the same…nothing changes.
There must be something wrong… How can I find the problem?
Whats about the error message?

I’m on the very newest Home Assistant & Mushroom (2.6.1).

[Nick4 (Nick)]

What if you try this:

type: custom:mushroom-entity-card
entity: sensor.katha_homestatus
card_mod:
   style: |
     ha-card {
        font-family: "Lucida Handwriting";
        --card-primary-font-size: 50px
     }

Can’t help you with that error but you could ask your question in the ‘mushroom topic’.

Just try with this code to see if this works on your system and gradually modify it to your needs so maybe you find the reason for that error yourself.

[boheme61]

@C0mmanda

How can I find the problem?

Do you have problems with card_mod: everywhere, or does it work in some Views ?

1. make sure card_mod, in your your views “resources”
2. make sure you use “TAB” and not 2 “dash’s” when you make “intends”
   3, the “WARNINGS” you get is not necessarily “wrong” you have to look at the pic to the right, or click save to see the outcome … The Warning is as it say “”" Du Kannst deine Konfiguration weiterhin in YAML bearbeiten. … YOU WILL almost everytime get this, when you edit in YAML in a card

PS: you get this “warning” … after … /style: /styles: /card_mod: … so obviously it’s here the “key” is, either you do something wrong here "should be a “line-break” (return-key] … and then a “TAB”
Or, you have a keyboard with a “configured/customized” Key

PS: This view you are working in, how did you create this ?
… also, in future Please show the code and the WHOLE code of the card , no picture, beside showing the outcome ( which you btw also dont show )

ABOVE is vital for further help

PS2: FWIW your initial code in first post, works just fine ! , i copied/pasted in 1 of my views , NoProblem

If i was you i would

1. reinstall Card_Mod ( if you installed it at all )
2. reboot you host
3. create a new view /take ownership (clean view)

If you still have problems
try another keyboard, and/or another browser

And Please NOTE: i haven’t used the word “ERROR” anywhere, as i haven’t seen it either

[boheme61]

@C0mmanda

Who am I overlooking?

after style: | styles: | card_mod: YOU use 1-2 dashes, instead of line-break(direct) `? … maybe

[C0mmanda]

@boheme61

Do you have problems with card_mod: everywhere, or does it work in some Views ?

1. make sure card_mod, in your your views “resources”
2. make sure you use “TAB” and not 2 “dash’s” when you make “intends”
   3, the “WARNINGS” you get is not necessarily “wrong” you have to look at the pic to the right, or click save to see the outcome … The Warning is as it say “”" Du Kannst deine Konfiguration weiterhin in YAML bearbeiten. … YOU WILL almost everytime get this, when you edit in YAML in a card

If i was you i would

1. reinstall Card_Mod ( if you installed it at all )
2. reboot you host
3. create a new view /take ownership (clean view)

Thank you so much! It’s working now.

First of all: I didn’t knew that card_mod needs to be installed! (Yes, not very smart from my side).
But for a little excuse, I did not read anywhere that it needs any install.
Anyway… my bad! Sorry for this.

I didn’t knew that this is the point to use TAB instead of dashes… It works both (tested) but I have changed to TAB, just to be sure!

PS: you get this “warning” … after … /style: /styles: /card_mod: … so obviously it’s here the “key” is, either you do something wrong here "should be a “line-break” (return-key] … and then a “TAB”
Or, you have a keyboard with a “configured/customized” Key

Yes, you’re right. I guessed that card_mod should be the problem, that’s the reason I’ve posted the Warning.

PS: This view you are working in, how did you create this ?
… also, in future Please show the code and the WHOLE code of the card , no picture, beside showing the outcome ( which you btw also dont show )

The View I’m working in is just the Mushroom Entity-Card,
“Edit Dashboard” → “Edit Card” → “Code-Editor”.

Sorry, my bad! I’ve posted pics instead the whole code because want to point mainly to the warning, not to the (simple) code. Noted for future problems.

And Please NOTE: i haven’t used the word “ERROR” anywhere, as i haven’t seen it either

Noted
You’re right, it’s just a warning, no error.
BUT: The warning is gone as well!

Thank you VERY much for your help.
I’m very new to Home Assistant and everything is just overwhelming if you try to set anything up.

[boheme61]

@C0mmanda

I’m very new to Home Assistant and everything is just overwhelming if you try to set anything up.

Yeah, there is alot to learn in here, even for experience IT-knowledge persons

YAML you get use to eventually, sometimes it helps to " back_tap ", until warnings/errors and ODD behavior, vanish ( mostly such errors/warnings that occur during Copy/Paste … which is very(most) common way of learning here

[projectdimpreza]

Im also in the same situation… i dont know how to fix… all i want to do is make the text of my entity card bigger… so it will display the time with bigger numbers…

[Ollijung]

I also would like to know how to display the time in bigger letters.

[Constapel]

Same problem here. Why is this so damm difficult? I just want create a larger fontsize! Work all routines with card_mod (reinstall etc,)

I can not figure out how to simply create a nice style.
I can not find any working examples on this forum.
Thanks in advance

[boheme61]

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.5.4 and Card Mod Version 3.4.3 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.9). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …

I guess above url is a good place to start, that is if non of the 3 latest posters haven’t figure out how to use the search function in top right corner

PS: There are a few other Card_mod Topics, which also might be of help

[LiQuid_cOOled]

To start, your card mod is formatted incorrectly. style: | needs to be indented

card_mod:
  style: |

[LeiChat (Richard)]

Thanks for sharing these. Are similar classes available for the default Lovelace cards, please?

I have been using card mod (a brilliant HACS integration) but would prefer to set some global font sizes in a custom theme.