Advanced Document Editing: html & CSS

[Caleb Alvarez]

Dibcase is a native cloud based application that uses your browser to render documents. As such, your documents are written in .html and styled with CSS formatting. Therefore, all of you documents and templates can be edited visually and in a "code view" for advanced users.

Figure 1: Document Template Editor Normal View

Figure 2: Document Template Editor Code View Enabled

 

Using code view you can use advanced editing functions such as:

Force a page break

<div style="page-break-after: always;"><span style="display: none;">&nbsp;</span></div>

This will force a page break in a multi-page document.

 

Change the spacing of a paragraph

You can use the visual editor to change paragraph spacing but you can also change it via code.

Example: Change the paragraph spacing of a document header

<div style="text-align: center; line-height: 10px;">{COMPANY_PIC}
    <br>{COMPANY_MAIL1} {COMPANY_MAIL_CITY}, {COMPANY_MAIL_STATE} {COMPANY_MAIL_ZIP}
    <br>{COMPANY_PHYS_ADDR1}&nbsp;{COMPANY_PHYS_CITY}, {COMPANY_PHYS_STATE} {COMPANY_PHYS_ZIP}
    <br>P: {COMPANY_PHONE} F: {COMPANY_PRIMARY_FAX}
    <br>{COMPANY_WEB_ADDR}
    <br>
    <br>
</div>

You would change the "line-height: 10px" to a larger number to increase the spacing of your header

Adding a line to a document

Example code:

<div style="float:left; width:100%;text-align:center;padding:5px 0;border-bottom:1px solid #000;font-size:11px;"><strong><span style="font-size: 14px;">Information &nbsp;About You, the Representative</span></strong></div>

This example creates centered text with a line beneath it. To make a line that goes 50% of the way across the screen, just the "width" from 100% to 50%

To add a line to the top and bottom of text just the follow to the previous code example:

border-top:1px solid #000;

The new code example would now create centered text that was 100% wide and that has a line at the top and bottom of the text.

<div style="float:left; width:100%;text-align:center;padding:5px 0;border-bottom:1px solid #000;border-top:1px solid #000;font-size:11px;"><strong><span style="font-size: 14px;">Information &nbsp;About You, the Representative</span></strong></div>

Figure 4: Centered text with lines above and below

 

To create boxes with top, bottom, and sides, use the "border" commands such as:

border-bottom:1px solid #000;

border-left:1px solid #000;

border-right:1px solid #000;

border-top:1px solid #000;

This code snippets will create a box with four solid sides

for more information about the CSS border options, see: https://www.w3schools.com/css/css_border.asp

Inserting a checkbox

The following code will add a checkbox to your document:

<input checked="checked" value="on" type="checkbox">

You can toggle the default value from checked to unchecked by removing the code checked="checked" to toggle it off.

...