View source for 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 [[PDF Generation|generated in PDF]]

-       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  <code>THIS</code>  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:<syntaxhighlight lang="css" line="1">
p::first-letter{
    color: blue;
    font-size: 200%
}
</syntaxhighlight>


In order to scope the CSS declaration just to the contextual document, you would need to add the special  <code>THIS</code>  pseudo keyword as follows:<syntaxhighlight lang="css" line="1">
THIS p::first-letter{
    color: blue;
    font-size: 200%
}
</syntaxhighlight>

The  <code>THIS</code>  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  <code>THIS</code>  keyword. For more info, reach out to our support team.

=== 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

-       …

[[Category:3B Docs Features]]
[[Category:3B Docs]]