How to design a custom template

New interface

1. Open Add-ons → Template Designer and click Add New. Enter a template name and click Create. The template is saved as custom_layout_<name>.html.
   
   
2. Click the template in the list to open the designer.
3. Under Resolution Settings, choose the screen resolution, or Custom.
   
4. On the Zones tab, turn on the zones you need. Main Content is always on; turn on Side Panel, Bottom Banner, Zone 4–6 or Marquee/Ticker as needed. For each zone, enter Width, Height, X Position and Y Position in pixels, with 0,0 at the top-left. The preview updates as you type.
   
5. Optionally, on the Styling tab, select a Background Image from your assets and add CSS. The HTML Source tab shows the generated HTML.
6. Click Save Template.
7. To use it, open a playlist, go to the Layout tab, click Change Layout and select your template. Custom templates are listed after the built-in layouts.
   

Classic interface

You can design a custom layout if the existing layouts do not meet your needs. Goto https://pisignage.com/templates and add a new custom template. It will open template design screen as shown in the screenshot.

Design a custom template using the following steps

1. Select the resolution 
2. Enable the zones you need 
   1. Main zone is the first one and always enabled
   2. You could enable side and bottom zones if you need more than one zone
   3. If you need more than 3 zones, you can enable zone4, zone5, zone6 as well
3. All these zones are positioned at absolute positions. Select the position where it will be placed with 0,0 at the left-top as the origin (css way). Enter the width and height of the zone. Repeat the same for all the enabled zones.
4. If you need a background image, upload the image to assets using Add Asset button.Then select the image for background image.
5. When ready after previewing the layout, press Save. It will be saved to your assets folder.
6. To copy an existing template, open the template and rename the file on the top menu bar left.