Solution for setting up header and footer in a template

Solution for setting up header and footer in a template

Hi all,

Emon need for business, I have long searched the forum and also how to put in my quote and my bills a header and a footer.
And finally, I have an other working stream elements allowing me to meet my needs ...

Given the number of people seeking the same thing as me, I say it might be good to share my discovery.

It's simple and easy to implement

First, start by adding the beginning of your HTML the following:

  1. <style>
  2. html {margin: 0;}
  3.  body {margin: 0;}
  4.  div # printhead {
  5. display: block;
  6.  position: fixed;
  7.  top: 0;
  8.  left: 0;
  9.  width: 100%;
  10. font-family: arial;
  11.  height: 2em;
  12. }
  13.   div # {fdiv
  14. position: fixed;
  15.    width: 100%;
  16.    bottom: 0;
  17.    left: 0;
  18.   text-align: right;
  19. font-family: arial;
  20. }
  21.  # ftrspan span {
  22. display: none;
  23. }
  24.   # pnoinftr span: after {
  25. counter-increment: Fpage0;
  26.   content: counter (Fpage0);
  27. }
  28.  div # {myCONTENT
  29. position: relative;
  30. top: 220;
  31. left: 0;
  32. width: 100%;
  33. height: 2em;
  34. font-family: arial;
  35. font-size: 12pt;
  36. color: black;
  37.  }
  38. div # {mymarge
  39. padding-left: 40pt; padding-right: 40pt; font-family: arial; font-size: 12pt; color: black;
  40.  }
  41. </ Style>



So here for an explanation:

  • div # header block corresponds to the printhead
  • div # fdiv corresponds to footer
  • # pnoinftr span: after correpsond numéroi to display the current page
  • div # myCONTENT correpsond to content


Just in the header, this element should be located immediately after the style elements defined above:

Mine correpsond this:

  1. <div id="printhead">
  2. <table border="0" width="100%" cellpadding="0" cellspacing="0">
  3. <tbody>
  4. <tr>
  5. <td width="100%" height="40pt" valign="top" colspan="2" style="background-color: rgb(53, 57, 68);">

  7. </ Td>
  8. </ Tr>
  9. <tr>
  10. <td width="70%" valign="middle" style="background-color: rgb(53, 57, 68);padding-left:40pt;">
  11. <img src="https://crm.zoho.com/crm/viewCompanyLogo?fileId=2569181000000018003&zgId=23830819" align="left">
  12. </ Td>
  13. <Td width = "30%" valign = "middle" style = "background-color: rgb (53, 57, 68), border-style: none none none solid; border-left-color: white; border-left- width: 1pt; padding-left: 10pt; color: white; font-size: 18pt ">
  14. <b> Organization.Organization $ {Name} </ b> </ br>
  15. <span style="font-size: 9pt;"> Organization.Street} $ {</ br> $ {Organization.Zip Code} $ {$ {} Organization.City Organization.Country} </ br>
  16. Tel: Organization.Phone} $ {</ span>
  17. </ Td>
  18. </ Tr>
  19. <tr>
  20. <td width="100%" height="10pt" valign="top" colspan="2" style="background-color: rgb(53, 57, 68);">
  21. </ Td>
  22. </ Tr>
  23. <tr>
  24. <td width="100%" height="10pt" valign="top" colspan="2" style="background-color: rgb(0,188,205);">
  25. </ Td>
  26. </ Tr>
  27. <tr>
  28. <td width="100%" valign="middle" colspan="2" style="background-color: rgb(0,188,205); padding-left:40pt;color:white;font-size: 30pt;">
  29. QUOTE No Quotes.Numéro $ {Quote}
  30. </ Td>
  31. </ Tr>
  32. <tr>
  33. <td width="100%" height="10pt" valign="top" colspan="2" style="background-color: rgb(0,188,205);">
  34. </ Td>
  35. </ Tr>
  36. </ Tbody>
  37. </ Table>
  38. </ Div>

I just put in my header the information that I wanted to appear on each page including:
  •  An image
  •  The name of my company
  •  Its address
  •  His phone
  •  The number of quotes
 
 Turn now to the footer, it should be placed in any end of your HTML file
 
 Mine is this:
 
  1. <div id="fdiv">
  2. <table border="0" width="100%" cellpadding="0" cellspacing="0">
  3. <tbody>
  4. <tr>
  5. <td width="100%" height="10pt" valign="top" colspan="3" style="background-color: rgb(0,188,205);">
  6. </ Td>
  7. </ Tr>
  8. <tr>
  9. <td width="30%" valign="top" style="background-color: rgb(0,188,205); padding-left:40pt;color:white;font-size: 9pt;">
  10. SARL with capital of € xxxxxxxxx </ br>
  11. SIREN: xxx xxx xxx </ br>
  12. EPA: xxxxx </ br>
  13. VAT: xxxxxxxx
  14. </ Td>
  15. <td width="50%" align="center" valign="top" style="background-color: rgb(0,188,205); padding-left:40pt;color:white;font-size: 9pt;">
  16. <span style="valign:top;"> A Group Company </ span>
  17. <img src="https://crm.zoho.com/crm/viewCompanyLogo?fileId=2569181000000018004&zgId=23830819" valign="top">
  18. </ Td>
  19. <td width="20%" align="right" valign="top" style="background-color: rgb(0,188,205); padding-right:40pt;color:white;font-size: 9pt;">
  20. $ {Quote} Quotes.Numéro Quote </ br>
  21. Page <span id="pnoinftr"> </ span>
  22. </ Td>
  23. </ Tr>
  24. <tr>
  25. <td width="100%" height="40pt" valign="top" colspan="3" style="background-color: rgb(0,188,205);">
  26. </ Td>
  27. </ Tr>
  28. </ Tbody>
  29. </ Table>
  30. </ Div>

I just put in my footer the information that I wanted to appear on each page including:
  • Legal Information
  • The name of the parent company
  • The number of quotes
  • The number ela current page
 
 Content for now to put between the header and footer, it makes sense but it costs nothing to be redefined.
 Attention, clarification, we will have a little play with the pages ie control your content.
 You'll probably spend a bit of time before this end, for my part, I have done so:
  •  First page:
    •  Customer Information
    •  Information on the estimate
    •  Information on the composition of the estimate
    •  Terms of payment
  •   2nd page:
    • Information on the parts
  •   3rd page:
    • Presentation of draft
  •   Fourth and following pages: 
    • Terms and Conditions
  
  
  The content of the first page will be found in the div and said:
  1. <div id="mycontent">
  2. Content of my first page
  3. </ Div>

The other pages will be found in the div which reads:
  1. <div id="mycontent" style="page-break-before: always;">
  2. Content of my second page
  3. </ Div>

Style = "page-break-before: always;" will allow you to skip a page before the contents of the div and therefore reproduce in this new web page header and your footer.


I hope I have been able to provide answers to this issue
Do not hesitate to get back to me if you encounter problems with the proposed solution

Here are just attached the complete HTML code of my quote ;)



        • Recent Topics

        • Allow syncing Activities from other applications

          Marketing Automation could be a much more powerful platform if you were able to sync activities into the platform (e.g. purchase, donation, etc) outside of a user doing something on your website. I'd love it if you could sync Custom CRM Modules as activities,

        • Create static subforms in Zoho CRM: streamline data entry with pre-defined values

          Last modified on (9 July, 2025): This feature was available in early access and is currently being rolled out to customers in phases. Currently available for users in the the AU, CA, and SA DCs. It will be enabled for the remaining DCs in the next couple

        • Global Sets for Multi-Select pick lists

          When is this feature coming to Zoho CRM? It would be very useful now we have got used to having it for the normal pick lists.

        • Introducing Profile Summary: Faster Candidate Insights with Zia

          We’re excited to launch Profile Summary, a powerful new feature in Zoho Recruit that transforms how you review candidate profiles. What used to take minutes of resume scanning can now be assessed in seconds—thanks to Zia. A Quick Example Say you’re hiring

        • Integración Books para cumplir la ley Crea y Crece y Ley Antifraude (VeriFactu)

          Hola: En principio, en julio de 2025, entra en vigor la ley Crea y Crece y Ley Antifraude (VeriFactu). ¿Sabéis si Zoho va a cumplir con la ley para cumplir con la facturación electrónica conectada a Hacienda? Gracias

        • Ask the Experts #1

          Hello everyone! It’s time to transform how you manage projects. Define the processes. Automate the tasks. Streamline the workflows. Let us dive into automation in Zoho Projects — from configuring workflows and custom functions to building triggers, using

        • Option to Customize Career Site URL Without “/jobs/Careers”

          Dear Zoho Recruit Team, I hope you are doing well. We would like to request an enhancement to the Career Site URL structure in Zoho Recruit. In the old version of the career site, our URL was simply: 👉 https://jobs.domain.com However, after moving to

        • How to overcome Zoho Deluge's time limit?

          I have built a function according to the following scheme: pages = {1,2,3,4,5,6,7,8,9,10}; for each page in pages { entriesPerPage = zoho.crm.getRecords("Accounts",page,200); for each entry in entriesPerPage { … } } Unfortunately, we have too many entries

        • Zoho Sheet - Printing - Page Breaks and Printing Customization

          I think the title is descriptive enough in that I cannot find help documentation on a simple task of adding in page brakes for separating pages on print. Thanks

        • Checking if Creator has Change History

          Like zForms - whenever an entry was updated there's an option to attached change history to email notif. Trigger -> Successful form submission

        • Zoho Sheet - Desktop App or Offline

          Since Zoho Docs is now available as a desktop app and offline, when is a realistic ETA for Sheet to have the same functionality?I am surprised this was not laucned at the same time as Docs.

        • Zoho sites header

          Good day, Im stuck with this situation. I choose a template for my website creation. I have tweaked every instance of the visual editor, regarding the header, I have created created customize fonts presets... I have followed every single step. and my

        • Your bot just got smarter: AI-Powered routing that reads between the lines

          What if your bot could tell the difference? Between a visitor who just needs a quick answer, someone actively comparing options, and a frustrated customer one click away from leaving? Most bots can't. They deliver the same response to everyone, missing

        • Kaizen #152 - Client Script Support for the new Canvas Record Forms

          Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved

        • Unable to create embed code for resource of workdrive using API

          Hello Team, I am trying to create embed code for a resource using workdrive api in powershell, however facing some issues with injecting data in body. Followed Doc: https://workdrive.zoho.com/apidocs/v1/filefoldersharing/shareeveryone Please help, below

        • Adding contact role to a specific deal js sdk malfunctioning

          i was trying to add the contact role to a specific deal contact but repeatedly i am getting this error: { "code": "SUCCESS", "details": { "statusMessage": { "code": "INVALID_DATA", "details": { "expected_data_type": "jsonobject" }, "message": "body",

        • Q3 Updates from Bigin!

          Hey Biginners, Hope you’re doing great! As we approach the end of 2025, we truly hope Bigin has been a part of helping you build your dream business this year! We've been busy working behind the scenes to bring you features that make running your business

        • New Series Announcement - Ecommerce Marketing Tips

          Running an online business is more than just having a website. It’s about getting the right customers to discover you, trust you, and keep coming back. To support your growth journey, we’re launching a weekly Marketing Tips series right here on Zoho Commerce

        • Client Script | Update - Introducing Subform Events and Actions

          Are you making the most of your subforms in Zoho CRM? Do you wish you could automate subform interactions and enhance user experience effortlessly? What if you had Client APIs and events specifically designed for subforms? We are thrilled to introduce

        • {"errors":[{"id":"500","title":"Servlet execution threw an exception"}]}

          Here's the call to move a file to trash. The resource_id is accurate and the file is present. header = Map(); header.put("Accept","application/vnd.api+json"); data = Map(); data_param1 = Map(); att_param1 = Map(); att_param1.put("status",51); data_param1.put("attributes",att_param1);

        • Converting Sales Order to Invoice via API; Problem with decimal places tax

          We are having problems converting a Sales Order to an Invoice via API Call. The cause of the issue is, that the Tax value in a Sales Order is sometimes calculated with up to 16 decimal places (e.g. 0.8730000000000001). The max decimal places allowed in

        • Zoho Canvas - Custom templates for related lists

          Hi, I see that the example pages load always one of our related lists in a custom template, but I dont know how to work with that:  1) How can i make my own custom templates for related lists?  2) Where and how can i check out existing custom templates?

        • Kaizen #147 - Frequently Asked Questions on Zoho CRM Widgets

          Heya! It's Kaizen time again, folks! This week, we aim to address common queries about Zoho CRM Widgets through frequently asked questions from our developer forum. Take a quick glance at these FAQs and learn from your peers' inquiries. 1. Where can I

        • open word file in zoho writer desktop version

          "How can I open a Microsoft Word (.doc or .docx) file in Zoho Writer if I only have the file saved on my computer and Zoho Writer doesn't appear as an option when I try 'Open with'? Is there a way to directly open the .doc file in Zoho Writer?"

        • How to invite friends on other social media platforms to one of my group chats in arattai?

          Hello, I have formed chat groups in arattai. I want to invite my friends on other social media platforms like WhatsApp/ FB to one of my groups. Different friends would be invited to different groups. How to share an invite link of one of my groups to

        • Zoho PDF editor has a lot of issues.

          Zoho PDF editor needs a lot of work. It hangs and glitches a lot. Deletes annotations and clearings randomly.

        • Enable Password Import option in ulaa browser

          Dear Ulaa Team, I noticed that the Ulaa Password Manager currently offers an option to export passwords, but not to import them. This limitation poses a challenge for users like me who have stored numerous credentials in browsers like Chrome. Manually

        • Zoho Sheet for Desktop

          Does Zoho plans to develop a Desktop version of Sheet that installs on the computer like was done with Writer?

        • Workdrive on Android - Gallery Photo Backups

          Hello, Is there any way of backing up the photos on my android phone directly to a specific folder on Workdrive? Assuming i have the workdrive app installed on the phone in question. Emma

        • Market cap

          Market cap formula?? Kaise nikale

        • stock

          bom/bse : stock details or price =STOCK(C14;"price") not showing issue is #N/A! kindly resolve this problem

        • Zoho sheet desktop version

          Hi Zoho team Where can I access desktop version of zoho sheets? It is important as web version is slow and requires one to be online all the time to do even basic work. If it is available, please guide me to the same.

        • ZOHO SHEETS

          Where can I access desktop version of zoho sheets? It is important to do basic work If it is available, please guide me to the same

        • Zoho Books - France

          L’équipe de Zoho France reçoit régulièrement des questions sur la conformité de ses applications de finances (Zoho Books/ Zoho Invoice) pour le marché français. Voici quelques points pour clarifier la question : Zoho Books est un logiciel de comptabilité

        • Using Zoho Flow to create sales orders from won deal in Zoho CRM

          Hi there, We are using Zoho Flow to create sales orders automatically when a deal is won in Zoho CRM. However, the sales order requires "Product Details" to be passed in "jsonobject", and is resulting in this error: Zoho CRM says "Invalid input for invalid

        • Is Zoho Sheet available for Linux ?

          Is Zoho Sheet available for Linux ?

        • Bharat

          a

        • how to disable staff selection Zoho Booking integrated to SalesIQ?

          currently there is only one Consultant in my Zoho Bookings like this I integrate Zoho Bookings into Zoho SalesIQ to create a chatbot. Unfortunately, even though I only have one consultant for a consultation, the user have to pick the consultant. It will

        • Zoho Bookings No Sync with Outlook

          Zoho Bookings appointments are showing on my Outlook Calendar but Outlook events are not showing on Zoho Bookings. How do I fix this?

        • End Date in Zoho Bookings

          When I give my appointments a 30 minutes time I would expect the software not to even show the End Time.  But it actually makes the user pick an End Time.  Did I just miss a setting?  

        • Next Page