Skip to main content
All CollectionsSalesBilling configuration
Customise existing templates
Customise existing templates

Highlight the identity of your business by modifying the basic HTML of the templates available to you.

Camilla avatar
Written by Camilla
Updated over a month ago

Holded allows you to adapt the available templates according to the vision, personality and style of your business. Edit the basic parameters of the HTML code, as well as the layout and style, and create documents tailored to your requirements and approach.

Access the HTML editor

  1. Open the Menu in the top right corner

  2. Select the template you want to customise

  3. Go to Advanced Options and click on Customise HTML code

  4. Select the option I want to customise the HTML code of the template

  5. Open the HTML editor by clicking on the > icon

Edit the margins

To edit the header, footer and margin settings to suit your needs click on the View margin settings button:

The header and footer are modified within the following sections in the body of the document:

 INSERT CODE HERE  INSERT CODE HERE


The parts of

must always be kept in the code, otherwise the pdf of the document will not be generated correctly.

Customise the table of your documents

To align the texts inside the table, you can use these properties, which you should insert as if it were a comment inside .

  • /* {prop:prop-th-th-name-align:left} */
    /* {prop:prop-td-name-align:left} */

  • /* {prop:prop-th-th-desc-align:left} */
    /* {prop:prop-th-td-desc-align:left} */

  • /* {prop:prop-th-th-sku-align:left} */
    /* {prop:prop-th-td-sku-align:left} */

  • /* {prop:prop-th-th-price-align:right} */
    /* {prop:prop-th-td-price-align:right} */

  • /* {prop:prop-th-th-units-align:right} */
    /* {prop:prop-th-td-units-align:right} */

  • /* {prop:prop:prop-th-th-weight-align:right} */
    /* {prop:prop-th-td-weight-align:right} */

  • /* {prop:prop:prop-th-th-totalweight-align:right} */
    /* {prop:prop-th-totalweight-align:right} */

  • /* {prop:prop:prop-th-th-discount-align:right} */
    /* {prop:prop-th-d-discount-align:right} */

  • /* {prop:prop-th-th-subtotal-align:right} */
    /* {prop:prop-th-td-subtotal-align:right} */

  • /* {prop:prop-th-th-tax-align:right} */
    /* {prop:prop-th-td-tax-align:right} */

  • /* {prop:prop-th-th-total-align:right} */
    /* {prop:prop-th-td-total-align:right} */

  • /* {prop:prop:prop-th-photo-align:left} */
    /* {prop:prop-td-photo-align:left} */

Example of an alignment:

To change the size and font within a table, use these elements as if they were a comment within :

  • .item-td-photo { font-size: 15pt;}

  • .item-td-sku{ font-size: 15pt;}

  • .item-td-name{ font-size: 15pt;}

  • .item-text-desc{ font-size: 15pt;}

  • .item-td-price{ font-size: 15pt;}

  • .item-td-tax{ font-size: 15pt;}

  • .item-td-subtotal{ font-size: 15pt;}

  • .item-td-discount{ font-size: 15pt;}

  • .item-td-total{ font-size: 15pt;}

  • .item-td-units{ font-size: 15pt;}

  • .item-td-weight{ font-size: 15pt;}

  • .item-td-totalweight{ font-size: 15pt;}

Example of a font customisation:

These classes do not modify the table titles.


Apply variables

Find below all the variables available to include dynamic elements in your template.

Contact details

%C_NAME% %C_NAME% %C_NAME% %C_NAME% %C_NAME

Contact name

%C_IDNUM% CONTACT'S

NIF or CIF of the contact

%CLIENTADDRESS% CONTACT'S ADDRESS

Contact's address

%C_EMAIL% CONTACT'S EMAIL ADDRESS

Contact's email address

%C_PHONE% CONTACT'S PHONE NUMBER

Contact's telephone number

%C_REFERENCE% CONTACT'S AUXILIARY ID %C_REFERENCE% CONTACT'S AUXILIARY ID

Contact's auxiliary ID

%C_TRADENAME% CONTACT'S BUSINESS NAME

Contact's business name

Your company details

%NAME% COMPANY NAME

Company name

%IDNUM% COMPANY

Company Tax ID or VAT number

%ADDRESS% COMPANY ADDRESS

Address of the company

%ADDRESSLINE% COMPANY ADDRESS IN ONE LINE

Company address in one line

%EMAIL% COMPANY EMAIL ADDRESS

Company e-mail address

PHONE% COMPANY'S PHONE NUMBER

Company telephone number

%MOBILE% COMPANY MOBILE NUMBER

Company mobile number

Document details

%TAC%TAC%TAC%TAC%TAC%TAC%TAC%TAC%TAC

Terms and conditions

%DOCTYPE%DOCTYPE%DOCTYPE%DOCTYPE%DOCTYPE%DOCTYPE

Document type

%DOCNUM% DOCUMENT NUMBER

Document number

%DOCTYPELOW% DOCUMENT TITLE IN LOWER CASE

Document title in lower case

%DOCTYPELOW% DOCUMENT TITLE IN LOWER CASE %DOCTYPELOW% DOCUMENT TITLE IN LOWER CASE

Type of contact

%SHIPPINGADDRESS% %DOCTO% TYPE OF CONTACT %DOCTO% TYPE OF CONTACT

Shipping address

%BODY% WILL BE VISIBLE WHEN ACTIVATING DETAILED DESCRIPTION FROM OPTIONS

Will be visible when activating Detailed description from Options

%ITEMS% %ITEMS% %ITEMS% %ITEMS% %ITEMS% %ITEMS

Elements

%CUSTOMFIELDS% CUSTOM FIELDS

Custom fields

%CFK% CUSTOM FIELDS

Custom Field Name

%CFV% CUSTOM FIELD NAME

Value of the custom field

%TOTAL% TOTAL %CFK% CUSTOM FIELD NAME %CFV% CUSTOM FIELD VALUE

Total

%TOTALSHTML%

Move the total to where you want it

%SIMPLETOTAL% TOTAL

Total without breakdown

%TAXBASE% TAX BASE

Taxable base

%NOTES% NOTES

Notes

%PM% METHOD OF PAYMENT

Method of payment

%MERCREGISTRY% %MERCREGISTRY

Commercial register

%FOOTER% %FOOTER

Footer

Template design

%LOGOSIZE% LOGO SIZE

Logo size

%FONTCOLOR% FONT COLOUR

Font colour

%COLOR2% SECONDARY COLOUR

Secondary colour

%SECIMG% SECONDARY IMAGE

Secondary image

If you prefer, you can also modify colour and typography through the text editor.


Integrating dynamic text

Please refer to the table below to find out what each available dynamic text element corresponds to. The corresponding words will be displayed according to the language configured in your Holded account.

{LANG_address}

Address

{LANG_amount}

Amount

{LANG_bankinfo}

Bank information

{LANG_billingaddress}

Billing address

{LANG_boxes}

Packages

{LANG_boxes2}

Boxes

{LANG_buyer}

Buyer

{LANG_client}

Customer

{LANG_code}

Code

{LANG_contact}

Contact

{LANG_creditnote}

Corrective Invoice

{LANG_customer}

Customer

{LANG_date}

Date

{LANG_days}

Days

{LANG_deliveryaddress}

Delivery address

{LANG_deliverydate}

Delivery date

{LANG_deliverydate2}

Delivery date

{LANG_deliverydate3}

Delivery due

{LANG_deliverydue3}

Delivery due date

{LANG_description}

Description

{LANG_destination

Destination

{LANG_discount}

Discount

{LANG_discountlines}

Item discount

{LANG_discount}

Discount

{LANG_duedate}

Expiration

{LANG_estimate}

Budget

{LANG_estimate}

Budget contact

{LANG_hours}

Hours

{LANG_invoice}

Invoice

{LANG_invoice}

Contact invoice

{LANG_invoicing}

Invoicing

{LANG_month1}

January

{LANG_month10}

October

{LANG_month11}

November

{LANG_month12}

December

{LANG_month2}

February

{LANG_month3}

March

{LANG_month4}

April

{LANG_month5}

May

{LANG_month6}

June

{LANG_month7}

July

{LANG_month8}

August

{LANG_month9}

September

{LANG_monthly}

Monthly

{LANG_multiduedates}

Due dates

{LANG_name}

Name

{LANG_number}

Number

{LANG_numitems}

No. of units

{LANG_observations

Observations

{LANG_order}

Order

{LANG_orderinvoice}

Purchase invoice

{LANG_orderinvoiceto}

Purchase contact

{LANG_orderinvoice}

Supplier

{LANG_page}

Page

{LANG_paymentdate}

Payment

{LANG_paymentterms}

Payment terms

{LANG_phone}

Phone

{LANG_pickupdate}

Pick-up date

{LANG_pm}

Payment method

{LANG_pricehour}

Price/h

{LANG_product}

Concept

{LANG_proform}

Proforma

{LANG_proformto}

Proforma contact

{LANG_purchasenote}

Proforma purchase invoice

{LANG_receiptnote}

Simple invoice rectifying purchase invoice

{LANG_requestedby}

Requested by

{LANG_salesorder}

Sales Order

{LANG_salesreceipt}

Simplified invoice

{LANG_shipping}

Shipping

{LANG_shippingaddress}

Shipping address

{LANG_shippingcompany}

Shipping company

{LANG_supplier}

Supplier

{LANG_tac}

Terms and conditions

{LANG_taxable}

Taxable base

{LANG_taxableabb}

Price

{LANG_taxamount}

Total tax

{LANG_taxesincluded}

VAT included

{LANG_taxesnotincluded}

VAT not included

{LANG_taxitem}

Tax

{LANG_taxname}

Tax name

{LANG_taxtype}

Tax type

{LANG_total}

Total

{LANG_totaliva}

Total VAT

{LANG_totalsupplied}

Supplements

{LANG_totaltax}

Total tax

{LANG_totaltaxable}

Subtotal

{LANG_totalunits}

Total units

{LANG_totalweight}

Total weight

{LANG_units}

Units

{LANG_viewestimate}

View estimate

{LANG_viewinvoice}

View invoice

{LANG_vieworder}

View order

{LANG_viewproform}

View proforma

{LANG_waybill}

Delivery note

{LANG_waybill}

Contact delivery note

{LANG_weight}

Weight

{LANG_weightunit}

Weight / Unit

{LANG_yearly}

Annual

{LANG_UNITS}

reports the word in capital letters (e.g.: UNITS and not units)

Did this answer your question?