Never mind what I have written below, I needed to add px after the font size, then it works.
I have a custom button card for my boat that’s almost finished. It is related to fishing depth, and I have different colors all down. Green when the depth under the gear is more than enough, yellow when it’s a bit sketchy and red when I need to raise the gear. I want the numbers as large as the screen will allow, for easy reading during fishing action. Only one problem left: When the depth goes above 100 meters, so I have three digits, the font size needs to be reduced. I have a custom field called “dypriggbunnavstand”, so “downrigger distance to bottom”, and I thought I could do the font size the same way as I did the background and font colors (after help here on the forum). But it doesn’t do anything, the font size isn’t registered at all. Could anybody please tell me where the error lies?
The variables ending with _bakgrunn is the background colors I use.
The ones ending with _skrift are the ones I’m trying to get to work for font size.
type: custom:button-card
variables:
rød_bakgrunn: red
grønn_bakgrunn: green
gul_bakgrunn: yellow
hvit_bakgrunn: white
hvit_skrift: white
svart_skrift: black
stor_skrift: 250
liten_skrift: 150
dypriggdybde: '[[[ return states[''sensor.dypriggdybde'']?.state; ]]]'
dypriggbunnavstand: '[[[ return states[''sensor.dypriggbunnavstand'']?.state; ]]]'
custom_fields:
dypriggbunnavstand: |
[[[
return `<span style="align: center;">${ Math.round(states['sensor.dypriggbunnavstand'].state) }</span> `
]]]
show_icon: false
show_name: false
styles:
card:
- border-style: none
- background-color: >
[[[ if ((variables.dypriggdybde == 0)) return variables.hvit_bakgrunn;
if ((variables.dypriggdybde != 0) && (variables.dypriggbunnavstand <=
5)) return variables.rød_bakgrunn; if ((variables.dypriggdybde != 0) &&
(variables.dypriggbunnavstand >= 10)) return variables.grønn_bakgrunn;
if ((variables.dypriggdybde != 0) && (5 < variables.dypriggbunnavstand <
10)) return variables.gul_bakgrunn; ]]]
- height: 385px
grid:
- grid-template-areas: '"dypriggbunnavstand"'
- height: 390px
custom_fields:
dypriggbunnavstand:
- color: >
[[[ if ((variables.dypriggdybde != 0) && (variables.dypriggbunnavstand
<= 5)) return variables.hvit_skrift; if ((variables.dypriggdybde !=
0) && (variables.dypriggbunnavstand > 10)) return
variables.hvit_skrift;
if ((variables.dypriggdybde != 0) && (5 > variables.dypriggbunnavstand < 10)) return variables.svart_skrift;
if ((variables.dypriggdybde == 0)) return variables.hvit_skrift;
]]]
- font-size: >
[[[ if (variables.dypriggbunnavstand > 100) return
variables.liten_skrift; if (variables.dypriggbunnavstand < 100) return
variables.stor_skrift; ]]]
If I put in font-size: 300px after align: center in the custom field “dypriggbunnavstand”, I get the large font, but without that it goes to a very small font.
