The font size for the login labels and text is really small! Same goes for the hover labels, legends and key in charts. Could someone provide a CSS example that identifies the elements to edit the font sizes?
Worth bearing in mind that font size is an accessibility issue so should be more of a priority in menu editing options than even colour. (Will make a feature request)
Many thanks!
Yes exactly! But also chart labels including the hover label
You can use the following CSS to change the text size of the input labels for the Login screen.
//For the Email field
input[type="email"]::-webkit-input-placeholder {
font-size: 25px;
}
//For the password field
input[type="password"]::-webkit-input-placeholder {
font-size: 25px;
}
To change the various text sizes for the chart component you can use the following javaScript. Please use in the screen JS under developer options. This will be applied to all charts on the page. I have mentioned inside the snippet below which line refers to which part of the chart.
Fliplet.Hooks.on('beforeChartRender', function(options) {
//change font size for hover tooltip
_.set(options.chartOptions.tooltip, 'style.fontSize', 16);
//change font size for hover tooltip header
_.set(
options.chartOptions.tooltip,
'headerFormat',
'<span style="font-size: 16px">{point.key}</span><br/>'
);
//change font size for legend
_.set(options.chartOptions.legend, 'itemStyle.fontSize', 25);
//change font size of data labels
_.set(options.chartOptions.plotOptions.pie.dataLabels, 'style.fontSize', 25);
});
Works great, however - the text above the login fields is also quite small - could I get an id or solution for this also? Many thanks!
For that text you can use the following CSS:
.instruction{
font-size: 25px;
}
This doesn’t work. The text entry when typing in fields is still far too small, in both login screen and form.