Question

Laserfiche Cloud

Centering Form Title and Logo in Form Header

Laserfiche Cloud Forms

Updated January 16

asked on January 15

I'm using the modern form designer in Laserfiche cloud, and I'm using the following CSS code to center the form title in my form header:

.form-header {
text-align: center;
}

This works well until I try to add a left aligned logo to the form header as well. Then it pushes the form title text to the right.

Does anyone know a CSS code or a work around for this? If I shrink the logo, the title starts coming back towards the center, but then the logo becomes too small.

I thought about combining the form title with the logo before uploading the logo image, but I may need to change the form title several times, and I also want to use this logo for a saved theme.

Thank you!

0 0

Answer

SELECTED ANSWER

replied on January 16

For vertical text alignment, I use the following CSS and adjust based on the title itself (size of font, one line or two lines, etc.):

.form-title {
  margin-top: 35px!important;
  margin-bottom: 13px!important;
}

Adjust the top and bottom margins as needed.

I have not encountered issues with the logo not being vertically centered, but I'd imagine you could use the same idea with that, just targeting the logo instead.

1 0

Replies

replied on January 15

I haven't figured this out yet, but I tried taking out the "text-align: center" and adding this code instead:

.form-header {
text-indent: 65px !important; /* Adjust the pixel value as needed */
}

This moves the form title text towards the center and it does look better.

I noticed that both the form title and the logo are not centered vertically in the form header, however?

0 0

SELECTED ANSWER

replied on January 16

For vertical text alignment, I use the following CSS and adjust based on the title itself (size of font, one line or two lines, etc.):

.form-title {
  margin-top: 35px!important;
  margin-bottom: 13px!important;
}

Adjust the top and bottom margins as needed.

I have not encountered issues with the logo not being vertically centered, but I'd imagine you could use the same idea with that, just targeting the logo instead.

1 0

replied on January 16

Yes - I added that formula to the logo ".form-logo" and then adjusted the top and bottom pixels where I wanted them, and now my logo and form title are exactly where I want them on the form header. Thank you Shuana!

1 0

You are not allowed to follow up in this post.

Question

Question

Centering Form Title and Logo in Form Header

Answer

Replies

Sign in to reply to this post.