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

      • Integrate with WooCommerce using Wordpress Plugin

        We’re thrilled to announce a powerful update to the Zoho Marketing Automation WordPress plugin with WooCommerce integration! This enhancement enables new possibilities for businesses running online stores using WooCommerce, empowering them to merge seamless
      • How do I sync multiple Google calendars?

        I'm brand new to Zoho and I figured out how to sync my business Google calendar but I would also like to sync my personal Google calendar. How can I do this so that, at the very least, when I have personal engagements like doctor's appointments, I can
      • Zoho Subscriptions -- Zoho Commerce integration

        Is there integration between Zoho Subscriptions and Zoho Commerce? I would like to create subscription plans in Zoho Subscritpions and list them for on my Zoho Commerce store.
      • Need help with importing expenses

        I'm using the template downloaded from the application. When I try to import my expenses, I get the message: Duplicate entry in the Expense Date column. Ensure it contains unique values. None of the rows will import. There are duplicate dates, but they
      • Domain already exists

        Hi, I tried to add my domain creativecolumnist.com but its showing as Domain already exist. Please release if it has already been associated with Zoho, I am the real owner of that domain.
      • Select forwarding

        For Zoho mail online on PC in web browser: I had forwarding enabled in section "Mail accounts / Forwards", and I also have some filters that send emails from some unwanted senders to Archive. But it doesn't work as intended, it forwards everything (obviously
      • Cliq iOS can't see shared screen

        Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? Regards
      • system not picking my default custom service report template

        Can you tell me why when we create a service report always pick the (standard old) template? Even when I have a custom service report selected as Default.
      • Restrict Appointment Booking to Approved Clients

        Dear Zoho Bookings Support Team, We'd like to propose a feature enhancement for managing appointments within Zoho Bookings. This feature would ensure only pre-approved clients can schedule meetings. Desired Functionality: We propose the introduction of
      • Automate Credit Card Surcharge

        Is there a way to create an automation that will add a 3.0% credit card surcharge to a subscription whenever a customer pays via credit card?
      • Product Request: Send email to Secondary email

        Guys, we should be able to send the campaign to the secondary email too.  Is this on the plans for Zoho Campaign? It looks like I can map the secondary email from the CRM to the Campaigs, but can not send the message.  
      • I have the item field and Quantity field in the sub form , on the submit of the form if the quantity is grater than inventory means show alert on submit validation only for item type goods ,

        I have the item field and Quantity field in the sub form , on the submit of the form if the quantity is grater than inventory means show alert on submit validation . Stock Check Validation only for item type goods , not for item type service . For the
      • Disappearance of all articles in the knowledge base

        Hi there! It seems like all of our articles have disappeared from the knowledge base: However, the names still appear in the "sort articles" section:
      • Logic for sending to a non-primary email address

        Hi, I have a scenario where contacts are able to sign up for emails with 2 different email addresses (example: work, personal). I've mapped both to Campaigns from Zoho CRM, but when I go to target an email only the primary email addresses are pulling in. How can I update this to look at both of the email addresses - or specifically the secondary email address in Campaigns? Thanks, Jenny
      • Composite Product (kit) - Dynamic Pricing

        I am setting up Composite Products for item kits that I sell. I also sell the items from the kit individually. Problem is when pricing changes on an individual part, the Composite Product price does not change meaning when the cost of item # 2 in the
      • Add "Reset MFA" Option for Zoho Creator Client Portal Users

        Hello Zoho Creator Team, We hope you are doing well. We would like to request an important enhancement related to Multi-Factor Authentication (MFA) for client portal users in Zoho Creator. Currently, Creator allows us to enforce MFA for portal users,
      • Tables for Europe Datacenter customers?

        It's been over a year now for the launch of Zoho Tables - and still not available für EU DC customers. When will it be available?
      • NOTAS INVISIBLES

        Siempre que abro mis notas salen invisibles, muchas no resaltan las *negritas* en la vista previa hasta que te metes en ellas y modificas algo. Pero omg con el equipo de Zoho. Les dije que las usaba mucho precisamente por la VISTA PREVIA y encontrar las
      • Does Zoho has chatroom/chatbot url feature?

        Hi Zoho community! I’m looking for a quick "Yes/No" answer for my dev team regarding Zoho’s capabilities. We currently use Zoho Desk for our Service Team and Zoho CRM for our Marketing Team to bring both functions under one platform. Our question: Does
      • One Support Email Managed By Multiple Departments

        Hello, We use one support email (support@company.com). Incoming emails come to the "Support Department" and based on what the customer is asking, we route that ticket to different departments (billing, technical support, etc.). When users in these different
      • What's New in Zoho Analytics - February 2026

        Hello Users! We're back with another round of updates for Zoho Analytics. This month's release focuses on giving you greater flexibility in how you visualize, manage, and act on your data - with new features like custom visualizations, remote MCP server,
      • Is it Possible to Modify Standard Report Urls

        Is there a way to permanently modify standard report Urls? Use case: Suppose I have a Products report. Showing list as timeline, calendar, or kanban doesn't make sense. Want to hide that from users by adding #Report:Products?zc_ShowAs=false&zc_Print=false
      • Updated font library: New font styles and custom font options in Zoho Sheet

        Zoho Sheet's font library now supports 500+ font styles in 60+ languages! The updated font library is stacked with new font styles, and some of the previously available font styles have been replaced with equivalent options. There are two ways you can
      • scope for phonebridge in CRM and phonebridge API documentation

        Hi I cannot find the scope to be used for phonebridge in CRM API V2 calls. I am getting OAUTH_SCOPE_MISMATCH for scope group ZohoCRM.modules.ALL,ZohoCRM.setttings.ALL Also I am not able to locate the documentation for the same, All I have is phonebridge
      • Does Zoho Mail Have Popout windows?

        I recently switched my work email over to Zoho and everything I read said that you can popout the draft email as you're writing, however, all the pictures or info I've seen show the typical popout arrow in the top right, which I can not for the life of
      • This domain is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details

      • Job Alerts for Candidates

        hi All, I have 2 questions relating to sharing job details with candidates. 1. is there a way to notify candidates that meet certain criteria of current jobs available? eg. I run a candidate search, and identify 50 candidates that might be suitable. Can
      • Zoho Wiki or new Zoho Learn

        We are currently evaluating if we should move off confluence. At present in Confluence we have multiple levels within our documentation but with learn it looks like you can only have Space       - Manual             - Chapter Is it possible to have levels below Chapter? Also the same question for the existing wiki, can I have more sub-levels?
      • Fix image at bottom of a page fot automatic proposal creation

        I'm working on a proposal document to automate our proposal creation process. So far it works fine, but I experience some problems with an image I want to have fixed at the bottom of the page AND above the footer. This section of the document consists
      • Can't scroll the page down unless I refresh the page

        Hello, This issue has been going on with me and a lot of other users in my organization, we can't scroll down! the scrolling side bar doesn't appear and scrolling down through mouse or keyboard keys doesn't work, it seems that the page just ends in the
      • Price List

        II want to restrict the items to display in sales, quote, etc for which custom rates are added in price list. How I can do the same in Zoho books
      • Let’s Talk Recruit: Still switching tabs to source?

        Welcome back to the Let’s Talk Recruit series. Let’s talk about how you actually source talent. Do you open multiple job boards every single time a role opens? Run the same keyword searches you ran yesterday? Download, upload, rename, and then do it again
      • Kaizen #231 - Embedding Zoho Desk Tickets in Zoho CRM

        Hello, CRM Wizards! This week, let us enhance cross-team visibility between Zoho CRM and Zoho Desk. We will use the Zoho Request Client inside a Related List widget to display open Zoho Desk tickets directly within the Contact record in Zoho CRM. This
      • Introducing a smarter, faster, and more flexible charting experience

        Hello Zoho Sheet users, We're delighted to share the latest news about a major update to charts in Zoho Sheet! The new version supports dynamic data ranges, granular styling options, faster loading, and other interesting enhancements that allow you to
      • Introducing Job Alerts

        Keeping candidates engaged beyond their first application is one of the most consistent hiring challenges. Many interested candidates simply do not revisit career sites regularly, which can result in missed opportunities and reduced re-applications. To
      • Task status - completed - other options

        I have a dumb question I know i can make custom statuses for the tasks - but is there anyway to make additional "completed" statuses like for instance if i have a task "call back customer" and i leave a vm for them to call back marking it "completed -
      • Bank feed integration First Abu Dhabi Bank (FAB) to Zoho? (UAE)

        Hello everyone, Is First Abu Dhabi Bank in the list of banks available for bank feed integration with Zoho Books? Thank you.
      • How to Export Filtered List of Contacts?

        This seems like it should be simple, but I'm stymied. I'm trying to export a filtered list of my Contacts for analysis in a spreadsheet. The use case is that I'm an ecom business based in the US. The bulk of our customers are individuals stored as Contacts.
      • Quick Create needs Client Script support

        As per the title. We need client scripts to apply at a Quick Create level. We enforce logic on the form to ensure data quality, automate field values, etc. However, all this is lost when a user attempts a "Quick Create". It is disappointing because, from
      • can we add product images in Zoho CRM Quote PDF template?

        I want to create a quotation format in Zoho CRM similar to the attached PDF, where each product is displayed in a table with rpoduct image I need the product image to appear inside the line items section of the quote. However, while checking the Quote
      • Next Page