Custom Styling Templates & Documents

Intro

3B Docs adds the capability to add your own custom CSS styling to a template through the usage of the Template Style object. The added custom styling will apply within the template builder and the generated document.

Usage

Adding custom CSS styles allows you to achieve the following (and much more):

-       Adding your company’s custom font style, color, spacing or other font related properties

-       Adding support for emojis, custom glyphicons and other icons

-       Customizing the way the document is generated in PDF [TODO: Reference link to PDF Generation]

-       Extending the application interface to brand it or white-label it

How To

In order to add custom CSS, you need to create a Template Style record, which you can access from the 3B Docs Application (or simply search for “Template Styles” in the app launcher drop down).

When you have navigated to the object list view, you can click on the “New” button which will display the new record form. The important field here is “Body” where you will be entering the CSS custom styles that you want to be applied to a document.

Once you have created a new Template Style, you can use it on any Template, new and old. To apply a Template Style to a Template, navigate to the “Styles” icon within the Template editor. This will show you a pop-up with a drop-down that is allowing you to select the newly created Template Style record.

The “THIS” Keyword

When creating a new custom Template Style record, you may want to use the pseudo keyword THIS  in front of your style declarations in order to scope the styles only to the rendered document.

So, for example, if you want to make the first letter of a new paragraph distinctively different, you would usually use the following CSS:

p::first-letter{
    color: blue;
    font-size: 200%
}

In order to scope the CSS declaration just to the contextual document, you would need to add the special THIS pseudo keyword as follows:

THIS p::first-letter{
    color: blue;
    font-size: 200%
}

The THIS keyword is powerful – it ensures that no CSS declarations spill over to the rest of the application interface.

Tips & Tricks

Longer CSS Stylesheets

You are limited with the number of characters that you can add to the Body field of a Template Style record, if you need to add longer custom stylesheets, you may want to use the @import CSS declarative and import CSS stylesheets from external sources (say Static Resources/other CDN).

Custom Branding Generated Documents

You can add your company logo to the top navigation bar by adding a CSS declarative that does not implement the THIS keyword. For more info, reach out to our support team [TODO: Reference link to support page].

Version Control

When creating Template Styles, we recommend that you append “vX” at the end of the name of the style you are creating in order to have some sort of version control of the Template Style records you have in the system. This comes especially handy when you are working on a new template with a variation of the base Template Style.

So, you would name your Template Style Records as follows:

-       My Custom Template Style v1

-       My Custom Template Style v2

-       My New Custom Template Style v1

-       …