Add a new template

To create an HTML template that can be edited and previewed directly in XTRF, perform the following steps:

1. Go to the Configuration menu > → Templates > → Document Templates > → Templates tab.

   

2. Click the Add HTML-based Template button. You will be directed to the Templates page.

   Image RemovedImage Added

   To create a new template based on the existing one, open it in edit mode and click the Copy button in the top right-hand corner.

3. Provide the Template Name.

4. Select the Template Type from the drop-down list.

5. Click the Add Template button. You will be directed to the newly created template's page.

6. In the Template details card, decide whether the new template should be:

   1. Active and thus selectable

   2. a Default one.

      Image RemovedImage Added

7. In the Template designer card:

   Image RemovedImage Added

   1. Select the language versions for this template:

      1. Click the to open the language menu and add the desired languages. To close the language menu, click the icon again.

      2. Click the icon next to the language to open a menu of applicable actions.

   2. (Optional) Edit the standard template in the Editor section:

      1. Select a different Theme from the drop-down list. To learn how to add a custom theme, see the section below.

      2. Change the formatting using the editor tools.
         Please keep in mind that pasting the copied text in the 'Simple' editor will also paste the text styling, which may cause problems for some values (e.g. when checking if the text is equal to other text or when entering Custom Fields "Key" names).

      3. (Optional) Switch to the HTML editor to edit the HTML code directly.

         Image RemovedImage Added

      4. Add or change the template's XTRF tags. Put the cursor in the desired place of the template and click the icon to open the list of applicable tags. Locate the desired tag and click on it to add it to the template.

         Image RemovedImage Added

   3. (Optional) Preview the document.

      1. On top of the right-hand pane, select the desired Theme from the drop-down list.

      2. Select a corresponding item in the search-as-you-type field.The preview will appear below.
         The item depends on the selected Template Type, e.g., for a Client Project Confirmation, you can select a project; for Vendor Purchase Order - a job, etc.

         Image RemovedImage Added

   4. Click the Save button in the top right-hand corner.

Add a custom theme

To create a custom theme for HTML document templates, perform the following steps:

1. Go to the Configuration menu > → Templates > → Document Templates > → Themes tab.

   Image RemovedImage Added

2. Click the Add New Theme button. You will be directed to the Themes page.

   Image RemovedImage Added

   To create a new theme based on the existing one, open it in edit mode and click the Copy button in the top right-hand corner.

3. Give the new theme a name.

4. Click the Add Theme button. You will be directed to the newly created theme's page.

5. In the Theme details card, decide whether the new template should be

   1. Active and thus selectable

   2. a Default one.

      Image RemovedImage Added

6. In the Theme designer card:

   Image RemovedImage Added

   1. Select the language versions for this theme:

      1. Click the icon to open the language menu and add the desired languages. To close the language menu, click the icon again.

   2. Click the on next to the language to open a menu of applicable actions.
      If you want to use one theme for all language versions of a certain template, add only one default language. You can add other languages on the template level. 

7. Create the theme in the Editor section:

   1. In the Theme tab, create the desired elements. To add XTRF tags, click the icon. To edit the HTML code directly, switch to the HTML editor.

      Image RemovedImage Added

      Please keep in mind that pasting the copied text in the ‘Simple’ editor will also paste the text styling, which may cause problems for some values (e.g. when checking if the text is equal to other text or when entering Custom Fields "Key" names).

   2. (Optional) In the Styles tab, you can edit the CSS settings for this theme.

      1. (Optional) In the Options tab, you can select custom fonts and background images for this theme. To learn how to add custom fonts and backgrounds, see the following sections of this guide.

         Image RemovedImage Added

      2. Select a font from the Custom Font drop-down list and decide whether you want to set it for the whole page.

      3. Click on a background image and select whether it should be resized or repeated.

8. Check the results in the Preview section. Click the icon to display the theme or applied changes.
   💡 This section is equipped with has several options like , such as pagination, scaling, page-turning, rotating, etc., available in the menu.

9. Click the Save button in the top right-hand corner.

Add a custom font

To add a custom font to use in document templates' themes, go to the Configuration menu > → Templates > → Document Templates > → Fonts tab and click the Select File button.

---

Add a custom background

To add an image that will be used as background in document templates' themes, go to the Configuration menu > → Templates > → Document Templates > → Background tab and click the Select File button.

Panel
panelIconId 1f4a1 panelIcon :bulb: panelIconText 💡 bgColor #E3FCEF
You can also drop the image file into the framed area.

Image RemovedImage Added