Screen rendering ignores card-mod.js changes

[814d3]

Hi there, I tried the card-mod.js addon to change the size of some entity values in Home Assistant. Accessing the dashboard with a regular browser displays the values with the new font size. But "hass-lovelace-kindle-screensaver" displays the dashboard without these changes - just normal, as there would be no card-mod.js. Is there maybe something I missed in the config.? Greetings

[sibbl]

Hey,

that's interesting as I also have card-mod running without problems. Did you try modifying something else with card-mod like some color or background color, to try whether non-font related things work and card-mod generally works at all?

It could also be some caching problem, which you could resolve by restarting the app/container.

I hope this may fix it already. Let me know if no card-mod changes work at all and maybe also write me the version you're using of card-mod and whether you've installed it via HACS or manually, so I can reproduce it on my side.

Thanks!

[814d3]

I found out, that it should be no problem of your tool, but the combination of card-mod and kiosk-mode, as I can reproduce it. Nevertheless maybe you've an idea that helps me.

I just use this code to enlarge the font of entity values: card_mod: style: | .value { font-size: 20px }

This works as long as I access the dashboard (or a view of it) without a active kiosk option. I use url query strings to hide_header (http://.../lovelace/1?hide_header). So Kiosk is not active per se. If I call this url, it ignores the card-mod settings. If I just call ...lovelace/1 it displays larger font as configured.
Same if I activate Kiosk as default. Then it ignores the card-mod changes. Just a http://.../lovelace/1?disable_km shows larger font.

I installed both plugins manual, not with HACS.

[sibbl]

I'm not sure what kiosk might do different - maybe it also adds some styles? I do have card-mod also in place and in my CSS I often had to use !important for CSS classes. Maybe this also helps in your case?

For example:

card_mod:
  style: |
    .value { font-size: 40px !important }

Again then I'd try to make any visible changes to really ensure that card-mod is being applied together with the kiosk mode.

[814d3]

Thanks for your comment. Adding "!important" didn't change anything. But I read that there could be timing/processor power? issues with card-mod, if you don't configure it in configuration.yaml but as a dashboard resource. So adding it to configuration.yml seems to work now: `frontend: extra_module_url:

• /local/card-mod.js`

I would like to send you a virtual coffee. If you don't mind, just give me a hint, how ;-)

[sibbl]

@814d3 that sounds reasonable, thanks for coming back with the solution! I can highly recommend HACS as well - it seems to take care of these things.

I deeply appreciate your kind words! If you really want, you can send me virtual drinks via https://sibbl.net/paypal Thanks ♥️