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);">

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

    • Function #55: Convert multiple quotes to single SO using Custom Button

      Hello everyone, and welcome back to our series! In Zoho Books, after a quote is accepted by your customer, it can be converted into a sales order or an invoice. Often, a customer might have multiple quotes, and for easier billing or upon the customer's
    • MS Teams Meeting to Zoho CRM

      Has anyone figured out a good way to push MS Teams meeting info on a trigger of "meeting end" to Zoho CRM? We're looking for a way to take attendees of a meeting and meeting duration and push it into Zoho CRM after the meeting has ended. If I can just
    • Creating Layout Rule With Formula Field

      By The Grace Of G-D. Hi, I see that i cannot use Layout Rules to show/hide Formula Fields. Is that something you plan on adding sometime soon?
    • Combine / merge multiple invoices into master

      Good morning Zoho! Upon looking for a solution for my issue, I found many that had my similar problem...dating 13 years ago! Please, any updates on this? Merging multiple invoices on a Master Invoice would alleviate all the extra work of resending and
    • Free Webinar Alert! Productivity Hacks that you don't want to miss on June 24

      Hello Zoho Community! Want to work smarter and get more done with Zoho Mail? We’re here to help! Join our interactive webinar to explore powerful Zoho Mail features that can boost your productivity. Watch live demos, learn helpful tips, and take part
    • Web Clipper cannot save to collections

      With the recent update that added collections, i am unable to use the web clipper to save to a collection
    • Set File Upload fields as mandatory

      Currently the CRM for some reason lacks the ability to set a file upload field as mandatory So we have an issue We have a requirement that before a Deal stage is set as Deal is Won the member needs to upload a file Now for some weird reason in Zoho I
    • sort by name is always z to a

      I typically keep my notes in alphabetical order. Suddenly they are all backwards - z to a. They stay that way whether I select a to z or z to a. Is there a way to fix this?
    • Project Management Bulletin: June, 2025

      Our project management suite's representatives have been busy socializing with global customers in the USA (Zoholics) and Australia (roadshows). We also had multiple stop overs at our customer’s establishments and were glad to see the efficiency our products
    • Agenda For Zoholics Benelux & Nordics 2025

      Dear Zoho Benelux community, We are pleased to announce the agenda for Zoholics Benelux & Nordics 2025 on September 23-24 at NBC Congrescentrum in Nieuwegein. The topics of the presentations are: Zoho innovations in the region and worldwide The introduction
    • How to query Deal "Stage" "Is Open" in Analytics SQL?

      How do I query this "field" in Analytics? What is going on? It seems like there is another 'mapping' somewhere but that it is inaccessible with raw sql??? If I query "Stage" Like '%Won%' I get a wildly different number than I do when I manually filter
    • CRM notes

      I want to be able to add notes to a task that do not necessarily get rolled up into an account or contact.   For example, I tasks to work on a Court Order for John Doe divorce account.  There might be lots of updates (in the form of notes) that employees
    • Multi-Select lookup field has reached its maximum??

      Hi there, I want to create a multi-select lookup field in a module but I can't select the model I want the relationship to be with from the list. From the help page on this I see that you can only create a max of 2 relationships per module? Is that true?
    • Enhanced Candidate Portal: Now Featuring Federated Login, Passwordless Access & MFA

      You can now enhance your Candidate Portal experience with Federated Login, Password less Sign-in and Multi-Factor Authentication (MFA). These features offer greater flexibility and control—allowing seamless sign-ins through trusted platforms and adding
    • How do I edit the Calendar Invite notifications for Interviews in Recruit?

      I'm setting up the Zoho Recruit Interview Calendar system but there's some notifications I don't have any control over. I've turned off all Workflows and Automations related to the Calendar Scheduling and it seems that it's the notification that is sent
    • Important! ZipRecruiter Sponsored Posting Plan Changes in Zoho Recruit

      Greetings, We’re reaching out to inform you about an important upcoming change to the ZipRecruiter Sponsored job board integration within Zoho Recruit. What’s Changing? Starting June 1, 2025, Zoho Recruit will be updated with ZipRecruiter's latest pricing
    • WhatsApp pricing changes: Pay per message starting July 1, 2025

      Starting July 1, 2025, WhatsApp is shifting from conversation-based pricing to per-message billing. That means every business-initiated message you send will count. Not just the first one in a 24-hour window. Pricing updates on the WhatsApp Business Platform
    • Action requested: Retain your sales journey configuration in Path Finder

      Dear Customers, We hope you're well! As you might know, we're completely overhauling our journey management suite, CommandCenter, and are in the last leg of it. As a means of getting ready to go live, we will be announcing a series of requests and updates
    • Custom View and Custom Fields

      Hi We have custom fields that we need in the Sales\Customer module and we would like to have the fields available to view in the Bills module so that we can add them to a custom view, is that possible? That way we can look at the Bills screen to see what
    • Missing Fields in Lead Conversion Mapping

      I’ve been using Zoho CRM since 2013 to manage leads and convert them into contacts and jobs. When I convert a lead to a customer, I create a new contact and a job. Previously, this process automatically transferred key information from the lead to the
    • Can I write a check in Zoho Books with no associated bill?

      This currently does not seem possible, and I have a client that desperately needs this function if I am able to convert them with Quickbooks. Thank you in advance for your reply. 
    • Automation#35 : Auto-Add Comments under the Owner's Name in Tickets via Macros

      Hello Everyone, This week's custom function provides simple steps to configure a Macro for adding comments to tickets with the name of the Comment owner. When managing tickets, you can use the Comment feature to communicate internally with your team and
    • Subfrom Changes are NOT included in Audit Logs and Timeline

      In the Timeline the subform changes are not tracked We have an important custom module for Recording Pricing Information It has a subfrom, now if Changes are made to the subform fields they are not shown in the timeline, ONLY the aggregated fields This
    • Tracking Emails sent through Outlook

      All of our sales team have their Outlook 365 accounts setup with IMAP integration. We're trying to track their email activity that occurs outside the CRM. I can see the email exchanges between the sales people and the clients in the contact module. But
    • Changing Link Color

      When I create a link from a block of text, the text color changes to a color i do not want. After scrolling through the CSS and HTML files I cannot find the setting for the link color. Changing the link color word by word seems inefficient and must be a setting somewhere? Greg Aanes 2109 Queen Street Bellingha WA USA
    • Content Management System

      Is there any plan to develop a CMS application that allows us to manage all of the ZOHO services such as Writer, Sheet, and Planner? Besides that, it would be nice to manage the files and logs of WebNMS using SOA. Otherwise i'll try to make it. Thanks, Takash F
    • [Product Update] Locations module migration in Zoho Books integration with Zoho Analytics

      Dear Customers, As Zoho Books are starting to support an advance version of the Branches/Warehouses module called the Locations module, users who choose to migrate to the Locations module in Zoho Books will also be migrated in Zoho Analytics-Zoho Books
    • How do I pause or halt a running campaign?

      Hi, I set up an A/B campaign - and after testing, scheduled the campaign, I noticed an error in the subject line and had to pause or halt the campaign 'mid-flight' - could not find this, and the only option was to delete the entire campaign to halt the send (it was an emergency). Is there a campaign Pause or Stop function/button? I could not find it - am I missing something? (Thank you for your help  - I searched the resources and could not find an answer)
    • Data Integration Platform

      Hi, Is anyone aware about a data integration platform like Dell Boomi that can work with Zoho Support? Any help will be higghly appreciated. Thanks Kunal
    • Always display images from this sender – Is this feature available?

      In Zoho mail, I had my "Load external images" setting set to "Ask me", and that's fine. That's the setting I prefer. What's not fine though is I always need to tick "Display now" for each email I get, regardless if I've done that multiple times from several
    • Payroll In Canada

      Hi, When can we expect to have payroll in Canada with books 
    • Real-Time Alert or Status Indicator for WhatsApp Connection Issues in SalesIQ

      Hi Zoho Team, We’d like to request a feature enhancement in Zoho SalesIQ related to WhatsApp integration stability and visibility. Recently, we encountered a critical issue where our WhatsApp bot stopped responding to messages without any warning or alert
    • Filter Images in Work Drive

      Hi, what is the best way to be able to filter files by multiple descriptions, for example, the name of a person in the photo as well as, an item in the photo and other descriptions? With labels it looks like you can only select one label at once but this
    • Zoho Projects API 100 requests/2 min. Limit

      Hi Requesting clarification on the API documentation. "You can invoke or call an API for 100 times in a span of two minutes. If you invoke more than 100 times, the particular API request will be locked for the next 30 minutes. " Does this limit apply
    • How to delete Inactive users?

      We want to delete inactive users from our system, but went you deactivate still the names are shown at the inactive section. How to get really rid off these names? Thanks for your response! Fabian van den Barselaar
    • Marketer's Space: Bookmarks by Zoho Campaigns

      Hello Marketers, In this week's Marketer's Space, we'll look at a simple yet powerful feature that makes a big difference in your workflow: Bookmarks. Bookmarks is a built-in feature in Zoho Campaigns that enables you to create a personalized library
    • Contact Segments with multiple CRM modules

      Hello, We have a somewhat unique setup in our system involving various components: Contacts, Accounts, Deals, and a couple of custom modules named Properties and Audit Logs. We're looking to implement a notification system via SMS and Email specifically
    • Cannot reorder fields in Page Layout in Expenses and Purchase Requests

      It is very inconvenient that the custom fields in Page Layout cannot be re-ordered. The only way is to remove the fields and re-create them; however, it is impractical. This would affect the reports and dashboards we are having. Not able to re-order the
    • Having issues with creator, flow and calendar

      So I have made a creator app when engineer puts in the date and time for when they are going to out on site , this then passes the calendar data to flow and then should populate the inputed data to the calendar. So If use${system.zf_current_date_time}.
    • Problem when forwarding emails

      When I want to forward an email received through Zoho, the layout changes: Buttons are cut Pictures change size Text changes alignment (left/right/center) Is this a common problem in Zoho? Thank you, Suzannah 
    • Next Page