Invoice template for use with DL window face envelopes

Hosted • invoicing.co | v5
1

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

2

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.

3

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
4

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

Thanks, will try! But why is there no preset like this?
Especially moving the sender address as single line above the recipient is quite arduous as no template has anything remotely like this, for example: https://www.meinhaushalt.at/wp-content/uploads/2012/04/post-fensterkuvert-adressieren-oesterreich1.jpg