Question

Forms - using CSS in the New Designer

Forms

Updated July 8, 2024

asked on July 3, 2024

I've used CSS in the Classic Designer but having trouble applying CSS to the new Forms Designer.
I'm using Forms 11 version 5. I'm not seeing enough information in the LF documentation and very little on Laserfiche Answers.

Specifically, I want to change some of the field widths, fonts, and color.

Is there documentation available on CSS related to the new Forms Designer?

0 0

Answer

SELECTED ANSWER

replied on July 5, 2024 • Show version history

It would have applied to all fields with the helptext because how the CSS is written. This line:

.FundingSection.form-q.label-left, .cf-helptext

is saying to apply the CSS to two different groups of fields:

Any element that has all three of these classes: FundingSection, form-q, and label-left.
Any element that has this class: cf-helptext

Because of that second one, it would apply to every field that has helptext.

If you only want it to apply to the helptext on the fields that have the FundingSection class, then you would need to re-write that line like this instead:

.FundingSection.form-q.label-left, .FundingSection .cf-helptext

2 0

Replies

replied on July 3, 2024 • Show version history

To change field width (can also change to width in px):

#q21 {width: 50%;}

To change input text colour:

#q21 input {color: red;}

To change input text colour for multi-line field:

#q21 textarea {color: red;}

To change field header font type:

#q21 label {font-family: calibri;}

Change 21 to whichever field ID you are trying to target.

Let me know if there's anything else you're trying to do, and I'll do my best to help!

0 0

replied on July 3, 2024 • Show version history

Hello Sarah!
Thanks for the reply.

I'm familiar with that code & using the assigned CSS class, like:
.FundingSection.form-q.label-left .cf-helptext {font-family:"Bookman Old Style";font-weight:bold;font-size:13px;color: #0033cc;font-style: italic;}

How are you applying your code?

For example, I've tried (some of your code):

#comment-container
{
  display:none;
}
&.Form.lf-form { 
  background: #cc3300 !important;
}
&.Form.lf-form { 
 .FundingSection.form-q.label-left  .cf-helptext {font-family:"Bookman Old Style";font-weight:bold;font-size:13px;color: #0033cc;font-style: italic;} 
}

Thanks

0 0

View 2 previous replies

replied on July 3, 2024

I was applying my code exactly as shown. &.Form.lf-form is not a required prefix.

When targeting classes, you may need to add an !important to each property. You should also have a comma between classes if you're targeting multiple.

For example:

.FundingSection.form-q.label-left, .cf-helptext {
  font-family:"Bookman Old Style" !important;
  font-weight:bold !important;
  font-size:13px !important;
  color: #0033cc !important;
  font-style: italic !important;
}

Hopefully that works for you!

1 0

replied on July 5, 2024

Hey Sarah!
Oddly, that changed the helptext for the all the fields that has helptext. In other words, it changed it for the entire form but you got me in the right direction with removing the previous line and adding "!important" to my CSS changes.

Thanks for your help!

0 0

SELECTED ANSWER

replied on July 5, 2024 • Show version history

It would have applied to all fields with the helptext because how the CSS is written. This line:

.FundingSection.form-q.label-left, .cf-helptext

is saying to apply the CSS to two different groups of fields:

Any element that has all three of these classes: FundingSection, form-q, and label-left.
Any element that has this class: cf-helptext

Because of that second one, it would apply to every field that has helptext.

If you only want it to apply to the helptext on the fields that have the FundingSection class, then you would need to re-write that line like this instead:

.FundingSection.form-q.label-left, .FundingSection .cf-helptext

2 0

replied on July 8, 2024

Fantastic!
Thanks for the clarification!

2 0

replied on July 8, 2024

Glad you got it sorted, and thank you Matthew for jumping in while I was off for the weekend! :)

1 0

You are not allowed to follow up in this post.

Question

Question

Forms - using CSS in the New Designer

Answer

Replies

Sign in to reply to this post.