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