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

Question

Question

Custom Forms Headers with logo's and Pagination

Forms
Updated November 22, 2017
asked on November 20, 2017 • Show version history

Customers has a graphics header that they would prefer to use that are easier rather than trying to recreate the text and graphics in forms.

I thought about removing the Title Block and just using an HTML field, but I have Page Break Pagination which does not display when the Title Block is turned off.

When I import the logo, the Pagination Tabs make it big enough to fill the width of the page, the pagination tabs gets shoved off to the side.

Can someone offer some CSS to correct the pagination formatting issue

0 0

Answer

SELECTED ANSWER
replied on November 21, 2017

Hi Steve,

No problem, I'm happy to provide better documentation on my suggestion. If you follow the steps listed below (screenshots included), you should be good to go.

Here's a screenshot of what the setup will look like in Forms:

Here's the CSS:

.myBanner {
  width: 760px;
}

Here's the complete JavaScript:

$(document).ready(function() {   
  $('div#cf-formtitle').prepend('<img src="https://is6movd9rl-flywheel.netdna-ssl.com/wp-content/uploads/2017/05/LF-Laserfiche-Logo-2x.png" class="myBanner" />');
});

The only things you will need to change are:

  1. The image source. Optimally, your client will have a copy of this banner online somewhere. This is necessary since we don't know who will be accessing these forms on what workstation, so the reference shouldn't be local. Work with your client to get a copy put up online.

    The "https://"  is just part of the image source URL--it doesn't impact our setup. Your client if free to host the image using http or https.
     
  2. The CSS width for the .myBanner class. Change "760px" to "740px", or whatever makes it look best to you and your client. You can also play around with padding, etc., if you want, but what I've provided should more or less do the trick.

 

Let me know if I can clarify any of the above. The snippets should be ready to copy/paste into the relevant text areas, per the screenshot.

~Rob

3 0

Replies

replied on November 20, 2017

Ok, I think I might have something more amenable to your client's needs.

If your goal is to add a large banner on top of the pagination tabs, I think you can accomplish this with some jQuery and probably some CSS tweaks:

As you can see in the screenshot, I executed a jQuery expression in the console to confirm that my approach would work. The expression I executed was:

$('div#cf-formtitle').prepend('<img src="https://is6movd9rl-flywheel.netdna-ssl.com/wp-content/uploads/2017/05/LF-Laserfiche-Logo-2x.png" width="1000px" />');

Simply replace the src value with a URL to the banner in question.

You will still most likely have to play with styling the image. To make this easier, you can add a class attribute to the <img /> tag, so you can easily change its styling in the "CSS" pane of the Forms designer.

~Rob

2 0
View 4 previous replies
replied on November 20, 2017 • Show version history

Thanks Rob, I'm JQuery Pre-school.

The code just shows up red in the JS pane

Where do I need to put the file and how do I point the Source to it?

Your example is using https:// so I expect it has to be in the proper place to be accessed?

I dropped the logo into Chrome to get the path and it looks like this.

file:///C:/Program%20Files/Laserfiche/Laserfiche%20Forms/Forms/img/Theme/Logo/GCALogo.PNG

Thanks

0 0
SELECTED ANSWER
replied on November 21, 2017

Hi Steve,

No problem, I'm happy to provide better documentation on my suggestion. If you follow the steps listed below (screenshots included), you should be good to go.

Here's a screenshot of what the setup will look like in Forms:

Here's the CSS:

.myBanner {
  width: 760px;
}

Here's the complete JavaScript:

$(document).ready(function() {   
  $('div#cf-formtitle').prepend('<img src="https://is6movd9rl-flywheel.netdna-ssl.com/wp-content/uploads/2017/05/LF-Laserfiche-Logo-2x.png" class="myBanner" />');
});

The only things you will need to change are:

  1. The image source. Optimally, your client will have a copy of this banner online somewhere. This is necessary since we don't know who will be accessing these forms on what workstation, so the reference shouldn't be local. Work with your client to get a copy put up online.

    The "https://"  is just part of the image source URL--it doesn't impact our setup. Your client if free to host the image using http or https.
     
  2. The CSS width for the .myBanner class. Change "760px" to "740px", or whatever makes it look best to you and your client. You can also play around with padding, etc., if you want, but what I've provided should more or less do the trick.

 

Let me know if I can clarify any of the above. The snippets should be ready to copy/paste into the relevant text areas, per the screenshot.

~Rob

3 0
replied on November 21, 2017

Hi Rob, this worked great, Thank you.

FYI, for the logo, I uploaded the logo through the Themes menu and then attached it as normal, then previewed the file. In Chrome I right clicked on the logo and went to inspect which showed me the path to the logo which I copied. Then deleted the logo from the Themes layout and used the path in your code and it popped right in. In themes I played around with the Title height to get the pagination bar the right distance from the logo, In my case it was 0.

Greatly appreciate your help.

0 0
replied on November 21, 2017

Great, I'm glad it worked! Please mark my reply as the answer! Thank you!

0 0
replied on November 22, 2017

Hi Steve--sorry to beat a dead horse, but please mark my answer as the answer, to help other community members in the future. Thank you!

0 0
replied on November 22, 2017

Hi Rob, The Mark this as the Answer feature is not showing as an option for this post. 

1 0
replied on November 22, 2017

Bummer--thank you for trying!

1 0
replied on November 20, 2017

Hi Steve,

Does the solution need to involve CSS? Would the client have a problem if you made the form wider, like so:

~Rob

0 0
replied on November 20, 2017 • Show version history

Thanks for the suggestion Rob but they have a very stylized Header for their web pages and they want there online forms to have the same look and feel. Changing the width of the form does not meet this requirement.

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

Sign in to reply to this post.

Details
Related Posts
Loading ...