Quite often I need to adjust the font size of some text - my vision is less than perfect and I'm just using normal tablets, not jumbotrons. It always results in hours of banging my head against a wall. Half the time nothing works. It's my biggest pain point with HA currently. Current case: It seems with custom:button-card, styles/name/font-size works, but if you add template: card_generic, it stops working. Looking at card_generic.yaml on https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_generic/#usage I don't see it doing anything with font-size so I don't know why - suppose I have to find the JS. Haven't been able to target it with card_mod either, the styles show up in the HTML below the whole card. What would you recommend that I do?
#Font size
spice panther
flint ether
If you are using the HA Companion App, you can activate the two-finger-zoom or set the page zoom factor, so everything looks bigger.
The setting is in Settings - Companion app - Page zoom (or Pinch-to-zoom if you prefer that).
spice panther
Sorry, I should have said this is just using tablets and browsers.
flint ether
Don't you use the tablets with the Companion App?
Browsers usually can be set to a certain zoom as well.
spice panther
On the Android tablets I do, yes. But it's not everything that needs enlarged, just parts.
jovial goblet
When using templates with the custom:button-card and you define a block, but then subsequently define the same block again in the card, it is only going to show what is defined in the card.
Can you post your card and template YAML so I can take a look at it?
spice panther
title: "Test"
path: "test-dash"
cards:
- type: "custom:button-card"
template: card_generic
entity: sensor.ontario_beach_water_temperature
variables:
ulm_card_generic_name: "Beach Water Temp"
styles:
card:
- background-color: green # works
name: # works w/o card_generic, not with
- background-color: orange
- font-size: 36px
- color: blue
label: # does not work
- background-color: purple
- font-size: 12px
- color: red
formatting messed up in discord
jovial goblet
I see you're running MinimalistUI. Here's the thing: Minimalist is designed to "just work"; it is not intended to be tinkered with. It is very difficult to make changes because of the amount of templating and design that has gone into it. There are so many layers of complexity that make simple changes near impossible. I'm looking at the code for the templates, and can't even figure out how to write out on here what the issue is.
The reason the name and label styling don't work is because they're actually contained in another custom:button-card embedded within the card itself. To add to it, there are more cards within that... (It's the Item2 custom_field within the Item1 custom_field.) That's what you have to target the styling to...
But, honestly, I don't know if you can apply styling at the uppermost card and be able to "get it into" the lower name/label fields.
(This is honestly making my brain hurt trying to figure out a solution without just saying that it can't be done.)
spice panther
Is it more feasible to do the tweaks I need with the Mushroom cards?
nimble drum
Is it only the font-size that is important for you? A search in the MinimalistUI GitHub repo for "font-size" gives me 68 hits. So you should be able to find the one that you need to change rather quickly.
spice panther
Are you suggesting that I modify the theme JS file UI/custom_components/ui_lovelace_minimalist/cards/button-card/button-card.js to modify ha-card.button-card-main/font-size?
nimble drum
No, I am not sure what cards you are using and which of them are problematic. But this way you can easily locate the code in the card(s) you need to change. Can well be that you also need to change the theme and/or a CSS file. I haven’t checked for this.
spice panther
I tried to get at it with card_mod, but none of this works. As I read it the $ should match all the shadow-roots under the ha-card. There's only one div id="label" in there, so "#label" ought to work - doesn't. Not even the "green" works.
nimble drum
I still don’t understand why you try to change the font size or any other element of a button-card with card mod. You don’t need card mod for button cards. Just alter the respective template of the card that you use in your dashboard. So, if you prefer a font size of 20px instead of 12px just change it in the source code of the template.
spice panther
How does one "alter the template"? Wherever it is, will I have to redo that alteration every time there is an update to Minimalist?
jovial goblet
The card mod is not going to work unless you can figure out how to target the specific child object.
Like coasting suggested, I would make a copy of the generic_card template and modify the styling on that one.
nimble drum
I don’t use Minimalist in my setup, but I know that this theme is based on button card templates. They must be in some folder on your HA instance. I don’t know how often Minimalist is updated, but yes, if you make changes to the original templates they will be reversed when you update. However, you can copy your changed templates and turn them into custom templates.
jovial goblet
How does one "alter the template"? Wherever it is, will I have to redo that alte...
That may be something that you would have to keep an eye on to see if any changes have happened to that specific template. The rest should be fine.
I'll play with it a bit more when I get home from work. Was just thinking about this and wanted to mention it and y'all were already taking about it.
nimble drum
I tried to get at it with card_mod, but none of this works. As I read it the $ s...
One thing you could try with card mod is to add !important to each parameter. For example: color: blue !important; The addition of important shall ensure that this parameter is permanent and not changed by another style. But as mentioned before, correct way would be to change the source.
jovial goblet
I tried with card mod. It is not going to work because of the nested custom:button-cards. It only modified the uppermost card and not the child cards. I don't know enough to target them properly. It is not a simple ha-card usage.
jovial goblet
Hoping back on this thread. MinimalistUI's files are located at \\10.10.10.2\config\custom_components\ui_lovelace_minimalist\lovelace\ulm_templates\card_templates\cards\card_generic.yaml (with your appropriate IP address). I would copy this card into a new file, perhaps card_generic_high_viz.yaml. This is the file that you will make modifications to in order to get the high visibility options (and set the card to use this template). Changing this file (and not the original) will ensure an update doesn't overwrite your modifications (though an update with another template could break your modification; you'd have to compare the new original file to your modified file.)
I'll try to get your modifications integrated later this evening and report back.