Pearl provides you with a range of customizable document templates that can be used to provide feedback to clients. For example, Purchase Orders, Invoices, Sales Receipts and Delivery Notes.
The templates are found in the admin site here: Documents >>> System Templates. All templates are editable.
To populate the templates with infomation from your Pearl database, you can include a range of Pearl Widgets.
Basic Techniques (Pearl Editor)
Use the Pearl editor to edit text, fonts, sizes, images and colours in exactly the same way as you would a normal word processor. The Editor provides a reasonable level of control, but for those of you who wish to get at the code, click 'Switch between HTML / designer mode' button to edit the source.
The Editor has a toolbar above the editable area which has a full range of standard rich text formatting functions, as well as some table modification buttons, and some image adding / editing buttons. The editor toolbar buttons apply changes to the HTML source, which can be edited directly by clicking the html button in the toolbar.
Additionally the editor will pull in the relevant stylesheet for the template (templates.css in the default website file). You can apply pre-configured styles from the style sheet by highlighting text and choosing the desired style to apply from the styles dropdown on the top row of the editor toolbar.
Adding text
Simply type the text you wish to add within the editor. If you are using tables, they should be set to 100% width rather than dragging the borders to the required size.
Formatting Text
Text can be fully formatted using the pearl editor. Just select the text, within the editable area, and choose the text-transformation you wish to apply from the editor toolbars.
Adding an Image to your Template
Adding images to your template is done in two simple steps.
- Upload the image: click upload images to open the image uploader pop-up; browse to your local image and upload it to Pearl. Click on the uploaded thumbnail to see the full URL path of the image. Select the URL and copy it (Ctrl "C").
- Add the image to the template document: Click the green tree icon in the template editor and enter the path (paste from clipboard with Ctrl "V").
You can also specify image dimensions here and add alternate text, which is good for improving search engine rankings.
Advanced techniques (CSS)
Use of CSS allows you to separate page content from layout data, and keep consistent styling across all your pages. Do not apply styles such as font size or colour to specific areas on a page, decide a style type (eg "main_title") and add this style to the stylesheet. Then apply the main_title style to the relevant part of your page, and should you wish to change all areas of "main title" across your website, you only need to change the CSS file.
Hiding Columns
For templates that are combined with an order (for example a quote or purchase order), the _invoiceProducts_, _orderContents_ and _packingProducts_ widgets are displayed in a table. Every row, column and cell can be uniquely identified using css classes, which allows you to hide certain columns. Add the relevant style to your templates.css stylesheet, and upload using Website->upload stylesheets->default.
For example, the following will hide the row net column.
.col-row-net-head { display:none }
.col-row-net { display:none }
Adding Colours and Borders
To add colours and borders to our template table row (tr) and cell (td) classes need to have styles applied in the style sheet.
Say we want a 2pixel bottom border to the header and all columns to have vertical lines, use the following styles:
th.col-row-gross { border-width-right:0;} // hide the right-most border.
tr.dataRow td {border-bottom:1px solid #aaa; border-right:1px solid #aaa;}
td.col-row-gross {border-width-right:0;}
PDF Templates
Pearl has the facility to render Invoices, Quotes, Purchase Orders and Delivery Notes as PDFs. Pearls PDFs are not editable, so your invoice always remains the same. PDFs are viewed using Adobe's free Acrobat Reader software.
PDFs are more 'portable' than plain html - html may vary from one email program to another so you cannot guarantee that your infomation will always reliably, where as PDFs always render the same.
How to Enable PDFs
Enable PDF document generation, by clicking: Setup -> Company Defaults -> Finance/Stock Control
Then select Send and Save Invoices as PDF
Important considerations for pdf generation.
- Tables can not be nested
- Ordered lists are currently unsupported.
- Absolute & relative positioning and floats do not work.
- The pdf generator is not particularly tolerant to poorly-formed HTML or CSS input
- Large orders can take a while to render.
- Images are rendered in the PDF as 150dpi, so upload them twice as large as you would for an HTML template.
Interested? Click here for access to the FREE demo
