Invoice template for use with DL window face envelopes

Hi, I have a pro account.

I’m hoping to find an invoice template that positions an address block to be visible in a standard DL windowface envelope (without exposing other data like email/phone etc). Anyone seen/got one of these?

Where do people go for help with designing better invoices?

Cheers!

Stef

Hi,

It should be possible to adjust the layout using a custom design.

If you have specific questions about implementing it we can try to help.

The best layout to start with is “Clean”. Then you might want to

  • create a client-wrapper around client-details
  • move the entity-details table out of the header-wrapper and into the newly created client-wrapper
  • maybe change
    <div id="client-details"></div>
    to
    <div id="client-details">
    <p style="font-size: 75%">$company.name $company.custom1, $company.address1, $company.postal_code $company.city, $company.country</p><br>
    </div>

Client info (like client contact’s phone, client contact’s email, client’s VAT number) are contained in client-details. I have resorted to not printing client contact info on my invoices, because you either see it in the window or it gets very hard or looks ugly. I have requested moving the VAT number out of the client-details and into the entity-details table, but …

1 Like

Here is a complete diff

*** body.orig   Tue Feb  8 04:40:28 2022
--- body        Tue Feb  8 04:42:46 2022
***************
*** 1,13 ****
  <div id="body">
                 <div class="header-wrapper">
-                   <div id="company-details"></div>
                    <div id="company-address"></div>
                    <div>
                       <img class="company-logo" src="$company.logo" alt="$company.name logo">
-                      <table id="entity-details" cellspacing="0" dir="$dir"></table>
                    </div>
                 </div>
!                <div id="client-details"></div>
                 <table id="product-table" cellspacing="0" data-ref="table"></table>
                 <table id="task-table" cellspacing="0" data-ref="table"></table>
                 <table id="delivery-note-table" cellspacing="0" data-ref="table"></table>
--- 1,33 ----
  <div id="body">
      <div class="header-wrapper">
          <div id="company-address"></div>
  
          <div>
+             <p data-ref="company_details-company.email">Email: $company.email</p>
+             <p data-ref="company_details-company.phone">Phone: $company.phone</p>
+             <p data-ref="company_details-company.website">Web: $company.website</p>
+             <p data-ref="company_details-company.vat_number">VAT ID: $company.vat_number</p>
+         </div>
+ 
+         <div>
              <img class="company-logo" src="$company.logo" alt="$company.name logo">
          </div>
      </div>
! 
!     <div class="client-wrapper">
!         <div id="client-details">
!             <p style="font-size: 75%">$company.name $company.custom1, $company.address1, $company.postal_code $company.city, $company.country</p><br>
!         </div>
! 
!         <div>
!             <p class="entity-label">$entity_label</p>
!             <table id="entity-details" cellspacing="0"><tr>
!                 <th data-ref="entity_details-client.vat_number_label">Client VAT ID</th>
!                 <th data-ref="entity_details-client.vat_number">$client.vat_number</th>
!             </tr></table>
!         </div>
!     </div>
! 
      <table id="product-table" cellspacing="0" data-ref="table"></table>
  
      <table id="task-table" cellspacing="0" data-ref="table"></table>
*** includes.orig       Tue Feb  8 04:41:33 2022
--- includes    Tue Feb  8 04:43:39 2022
***************
*** 41,64 ****
          line-height: var(--line-height);
      }
  
!     .header-wrapper #entity-details {
          margin-top: 1.5rem;
          text-align: left;
          width: 100%;
      }
  
!     .header-wrapper #entity-details > tr,
!     .header-wrapper #entity-details th {
          font-weight: normal;
!         padding-left: 0.9rem;
          padding-top: 0.3rem;
          padding-bottom: 0.3rem;
      }
  
!     .header-wrapper
      #entity-details
      [data-element='entity-balance-due-label'],
!     .header-wrapper
      #entity-details
      [data-element='entity-balance-due'] {
          background-color: #e6e6e6;
--- 42,71 ----
          line-height: var(--line-height);
      }
  
!     .client-wrapper {
!         display: grid;
!         grid-template-columns: 2fr 1fr;
!         line-height: var(--line-height);
!     }
! 
!     .client-wrapper #entity-details {
          margin-top: 1.5rem;
          text-align: left;
          width: 100%;
      }
  
!     .client-wrapper #entity-details > tr,
!     .client-wrapper #entity-details th {
          font-weight: normal;
!         padding-left: 0rem;
          padding-top: 0.3rem;
          padding-bottom: 0.3rem;
      }
  
!     .client-wrapper
      #entity-details
      [data-element='entity-balance-due-label'],
!     .client-wrapper
      #entity-details
      [data-element='entity-balance-due'] {
          background-color: #e6e6e6;
***************
*** 70,75 ****
--- 77,89 ----
          line-height: var(--line-height);
      }
  
+     .entity-label {
+         text-transform: uppercase;
+         font-size: 2rem;
+         font-weight: bold;
+         margin-top: -0.5rem;
+     }
+ 
      [data-ref="table"] {
          min-width: 100%;
          table-layout: fixed;