Resources pane

The Resources pane displays the resources that affect the template and its output.

The Text Filter box at the top of the Resources pane allows to look for text in the name of resources and in the source of any text-based files: HTML (including sections, master pages, and snippets), JSON, JS and CSS.

Images, fonts, stylesheets and snippets can be dragged or copied and pasted into the Resources pane to add them to your template.

Media

Media resources define paper handling configurations for Print output (see Generating Print output and Print options) including page size and paper type. See Media for more information.

Contextual menu
  • New Media: Click to create a new Media and open its properties (Media Properties).
  • Delete: Click to delete the resource. This is the same as pressing the Delete key while the resource is selected.
  • Rename: Click to open the resource's Rename. This is the same as pressing the F2 key while the resource is selected.
  • Properties: Click to open the media properties.
  • Copy: Click to copy the selected Media to the clipboard.
  • Paste: Paste the copy into the Media folder.

Master Pages

Master Pages are layers of content that can be used by multiple Print Contexts to provide a reusable static background of content. Only one Master Page can be selected for each page position in the context. See Master Pages for more information.

Contextual menu
  • New Master Page: Click to create a new Master Page and open its properties.
  • Rename: Click to open the resource's Rename. This is the same as pressing the F2 key while the resource is selected.
  • Delete: Click to delete the resource. This is the same as pressing the Delete key while the resource is selected.
  • Properties: Click to open the Master Page properties; see Master Pages for more information.
  • Copy: Click to copy the selected Master Page to the clipboard.
  • Paste: Paste the copy into the Master Pages folder.

Contexts

Contexts hold the actual content of the template that is used to generate output. See Contexts for more information.

Contextual menu (Context folder or individual contexts)
  • New Print Context: Click to create a new Print Context with a single section.
  • New Web Page Context: Click to create a new Web Page Context with a single section.
  • New HTML Email Context: Click to create a new HTML Email context with a single section.
  • Properties... (Print and Email Contexts): Click to open the Context's properties. See Contexts for more information.
  • Paste: Paste the copied section into the Context folder.

Sections

Sections hold part of the contents within a specific context. See Sections for more information.

Contextual menu
  • Set as Default (Email and Web contexts only): Click to set the default section that is output if none is selected in the output generation.
  • New Section: Click to add a new section within the context.
  • Rename: Click to open the resource's Rename. This is the same as pressing the F2 key while the resource is selected.
  • Delete: Click to delete the resource. This is the same as pressing the Delete key while the resource is selected.
  • Properties...: Click to open the appropriate section properties: Email, Print or Web. See Section properties dialogs.
  • Includes...: Click to open the Includes dialog.
  • Finishing... (Print Sections only): Click to open the Finishing tab in the Print section properties
  • Sheet Configuration... (Print Sections Only): Click to open the Sheet Configuration dialog; see Master Pages and Media.
  • Copy: Click to copy the selected section (including its settings) to the clipboard.
  • Paste: Paste the copied section into the same Context.

Images

Images are graphical elements that can be added to the page for display, either statically or dynamically. See Images for more information.

Contextual menu
  • New Folder: Click to create a new folder to organize resources more easily.
  • Rename: Click to open the resource's Rename dialog. This is the same as pressing the F2 key while the resource is selected.
  • Delete: Click to delete the resource. This is the same as pressing the Delete key while the resource is selected.
  • Copy: Click to copy the selected file.
  • Copy Resource Location: Click to copy the relative path of the resource to the clipboard. It may then be pasted into a script.

Fonts

Font Resources included in a template are transported with it, so they can be accessed even if the template is moved to a different computer. Fonts appear in the fonts drop-down menu but they can also be set through a CSS Stylesheet.

Currently supported font types: otf, woff, ttf, svg. Fonts must be set to installable to be useable in the output.

See Fonts.

JavaScripts

JavaScripts are scripted programs that can run on Web output when added to the page header. See Using JavaScript for more information.

JavaScript files that are linked to (i.e. included in) a section show a chain icon.

Contextual menu
  • New Javascript: Click to create a new JavaScript resource.
  • New Remote Javascript: Click to add a Remote JavaScript resource. See Using JavaScript for more information.
  • New Folder: Click to create a new folder to organize resources more easily.
  • Rename: Click to open the resource's Rename. This is the same as pressing the F2 key while the resource is selected.
  • Download Resource (remote JavaScript files only): Select to download the Remote JavaScript file (see Adding a remote JavaScript file) and add the downloaded copy to the Scripts folder. The copy will have the same name as the remote script file, but its extension will be .js instead of .rjs. Any section that used the JavaScript file will from then on use the downloaded file (see Including a JavaScript file in a Web context).
  • Delete: Click to delete the resource. This is the same as pressing the Delete key while the resource is selected.

Stylesheets

Style sheets control how contents appears on the page. They define spacing, color, size and other properties of elements on the page. See Styling templates with CSS files for more information.

In case the CSS file has references to specific images, you can drag/drop or copy/paste those images into the Stylesheets folder as well.

Style sheets that are linked to (i.e. included in) a section show a chain icon. See Applying a style sheet to a section.

Contextual menu
  • New Stylesheet: Click to create a new Stylesheet resource. Adding a new stylesheet will automatically include it in the currently active section.
  • New Remote Stylesheet: Click to add a Remote Stylesheet resource. See Styling templates with CSS files for more information.
  • New SCSS file: Click to add a new, empty Sass file to the Resources (extension: .scss). Sass is a CSS Preprocessor integrated in Connect. For more information about Sass, see: Sass website.

    • When the name of Sass file begins with an underscore, it is considered a partial .scss file (e.g. _mySass.scss). Partial files are typically imported in a base .scss file. They may include Sass variables or other directives declared in the base file, and they cannot be compiled.

  • New Remote SCSS file: Click to add a Remote Sass file to the Resources.
  • Compile (.scss files only): Select to compile the Sass (.scss) file into a Stylesheet which can then be applied to a section.
    The compiled style sheet will have the same name as the Sass file, but with the extension .css.
    Compiled CSS files can be recognized by their first line: /* Compiled by https://sass-lang.com/libsass */.
    Compiler options can be set in the Preferences; see Editing preferences.
    Re-compiling a .scss file overwrites any manual changes made to the .css file.
    Partial .scss files cannot be compiled.
  • New Folder: Click to create a new folder to organize resources more easily.
  • Rename: Click to open the resource's Rename. This is the same as pressing the F2 key while the resource is selected.
  • Download Resource (remote style sheets only): Select to download the Remote Stylesheet (see Using a remote style sheet) and add the downloaded copy to the Stylesheets folder. The copy will have the same name as the remote style sheet, but its extension will be .css instead of .rcss. Any section that used the remote style sheet will from then on use the downloaded style sheet (see Applying a style sheet to a section).
  • Delete: Click to delete the resource. This is the same as pressing the Delete key while the resource is selected.

Snippets

A snippet is a small, ready-to-use piece of content in a file. Snippets can be re-used within the same template, in all contexts, sections and scripts.

Contextual menu
  • New HTML Snippet: Click to create a new HTML Snippet resource; see Snippets.
  • New JSON Snippet: Click to create a new JSON Snippet resource; see JSON snippets.
  • New Handlebars template: Click to create a new Handlebars template; see Handlebars templates.
  • New Folder: Click to create a new folder to organize resources more easily.
  • Rename: Click to open the resource's Rename. This is the same as pressing the F2 key while the resource is selected.
  • Delete: Click to delete the resource. This is the same as pressing the Delete key while the resource is selected.
  • Copy: Click to copy the selected file.
  • Copy Resource Location: Click to copy the relative path of the resource to the clipboard. It may then be pasted into a script.

Translations

A PO file holds translated texts for the template in one language. Each PO file has an entry by which OL Connect recognizes the target language.
PO files can be stored in the Translations folder.

See Translating templates and Importing translations (.po) for more information.

Contextual menu
  • New Translation:
    • PO files...: Select a PO file to import it into the template.
    • Remote PO file: Enter the URL Click to add a remote PO file. See Using JavaScript for more information.
  • New Folder: Click to create a new folder to organize resources more easily.
  • Rename: Click to open the resource's Rename. This is the same as pressing the F2 key while the resource is selected.
  • Download Resource (remote JavaScript files only): Select to download the Remote JavaScript file (see Adding a remote JavaScript file) and add the downloaded copy to the Scripts folder. The copy will have the same name as the remote script file, but its extension will be .js instead of .rjs. Any section that used the JavaScript file will from then on use the downloaded file (see Including a JavaScript file in a Web context).
  • Delete: Click to delete the resource. This is the same as pressing the Delete key while the resource is selected.