Jump to content

Advanced Document Editing: html & CSS

Caleb Alvarez

Recommended Posts

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}

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.




Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...