You are viewing limited content. For full access, please sign in.

Question

Question

How to increase font sizes for field labels, text above field, text below field on LF Forms

asked on December 15, 2023

We are using LF Forms 11.  Our in-house ADA expert says that the font sizes of the texts above & below the field labels in the forms are too small.  The ADA expert would be fine with boosting all the font sizes up a notch or focusing on this one type of field and its associated font properties.  (Text above and below a field has the smallest font size of any form element.)  We are not using any inline CSS or JavaScript to alter the look-and-feel or business logic on this form -- to my knowledge the current font sizes all represent default settings as of right now. 

I used view source to confirm that the texts we want to enlarge are always represented in the HTML with

"class=cf-helptext ab-help"    "class=cf-helptext un-help"

can anyone coach me if there is a way to  change the definition of these classes within the form to use a larger font size?  Thanks in advance.

lf_form_li_with_text_above_and_below.PNG
0 0

Answer

SELECTED ANSWER
replied on December 15, 2023 Show version history

I can tell from your screenshot that this is the Classic Designer.  However, this is one of the few cases where this code will work on both the Classic Designer and the Modern Designer (I tested both on Version 11.0.2307.40547)

CSS:

/*This is if you want it applied to all fields.
Note that 1em is equivalent to 16px, so these function the same way,
you will only need one of them.  
Using em adjusts to different devices better than px does.*/
.cf-helptext {font-size: 1em!important;}
.cf-helptext {font-size: 16px!important;}

/*This is if you want it applied to a specific field, you can use
text like this, that only refers to fields that you have added
the largeHelpText class to.  Once again, the two lines
are effectively the same, and you only need one of them.*/
.largeHelpText .cf-helptext {font-size: 1em!important;}
.largeHelpText .cf-helptext {font-size: 16px!important;}
1 0
replied on December 15, 2023

Amazing difference from 40 characters of text, give or take, injected in the right spot!

35288_current_cdbg_processes_cf-helptext_font-size__1em_important.PNG
2 0

Replies

replied on December 15, 2023

In the modern designer you can use the Style area to increase the font size.

3 0
replied on December 21, 2023

Thanks, I'm just getting into the Modern Designer and I can see where the font sizes for each type of text can be updated.

0 0
replied on April 8

Hi Everyone,

I would like this same ability (to change font size), but don't see "view source" or anything in CSS that references helptext or FieldAboveHelp. We just upgraded to Laserfiche 11, but I am relatively new to the system and to forms. 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.