Fusion:Style Pack

Introduction

A Fusion Style Pack is a collection of Skins and Templates, all in the same compressed file. Usually, the Style Pack will group Skins and Templates that have been designed in a way to be compatible with each other and to provide an unified look on the screen. The Style Pack can also be used to include the custom fonts used inside the Skins and Templates.

A Style Pack can only be created within Elementi X or HMD Professional.

Style Pack upload into Fusion

Uploading Template pack

To upload a Style Pack into Fusion, follow these steps:

1. Open the Settings page.
2. Select the "Templates" tab or the "Skins" tab.
3. Click on the Add button, choose your Style Pack archive and confirm the upload. (Three icons will be shown next to the Add button to confirm the upload.)

Using Elementi X

Style Pack creation

To create a new Style Pack, follow these steps:

1. Click on the "New Project/Document" icon in the toolbar.
   • Or click on the "Menu" icon in the toolbar, then select "Projects".
   • Or right-click inside the Browse panel.
2. Select the "New Style Pack..." option. A pop-up window appears.
3. Enter the name of the Style Pack in the pop-up window.
4. Click on the "OK" button.

A new Style Pack is created, containing by default the following structure:

1. files - in this collection, you will add the content of the Style Pack.
   • By default, the following inner collections are automatically created:
     1. scripts - contains the scripts (and possibly other media files) used by the Skins and / or the Templates of the Style Pack.
     2. skins - contains all the Skins of the Style Pack. For more details, see the full article on how to create a Fusion Skin.
     3. templates - contains all the Templates of the Style Pack. For more details, see the full article on how to create a Fusion Template.
   • Other collections can be added as well - for instance, you could add one called "media" to group all the media files shared by the Skins and Templates inside the Style Pack.
2. fonts - in this collection, you can add the custom fonts used by the Skins and / or the Templates of the Style Pack.
3. publish - in this collection, the player will retrieve external content using Pull mode, so normally you shouldn't add anything into this (unless you want to test upfront your Skins / Templates using such type of content).

Style Pack archiving

For a Style Pack to be used in Fusion you have to export it from Elementi as a 7zip archive.

To do this follow these steps:

1. Select the "Archive..." option by one of the following methods:
   • Right-click on the Style Pack icon (if you are on the "Projects" tab),
   • Click on the "Menu" icon in the toolbar, then select "Projects".
2. Browse to the location where you want to save the Style Pack archive.
3. Click on the "Save" button.

Using HMD Professional

Style Pack creation

You can create a new Style Pack from My Fusion Elements workspace, by following these steps:

1. Open My Fusion Elements workspace.
2. Right-click on the browsing window and select New Template Pack.
3. Set the name of your Style Pack and then click on the "OK" button.

Style Pack default structure

A new Style Pack is created, containing by default the following four collections:

1. fonts - contains the custom fonts used by the Skins and / or the Templates of the Style Pack.
2. scripts - contains the scripts (and possibly other media files) used by the Skins and / or the Templates of the Style Pack. See also the Global options section for details about the layouttheme.js file.
3. skins - contains all the Skins of the Style Pack. For more details, see the full article on how to create a Fusion Skin.
4. templates - contains all the Templates of the Style Pack. For more details, see the full article on how to create a Fusion Template.

Note: Other collections can be added inside the Style Pack as well - for instance, you could add one called "media" to group all the media files shared by the Skins and Templates inside the Style Pack.

Style Pack export

Export option in HMD

For a Style Pack to be used in Fusion you have to Export it from HMD:

1. Open My Fusion Elements collection within HMD.
2. Find the Style Pack you wish to export.
3. Right click on the Style Pack icon and select Update metadata to make sure that all previews are generated before exporting the Style Pack.
4. Right click on the Style Pack icon and select the Export option.
5. In the next dialogue window, select the destination of the 7z file (the archive of the Style Pack).
6. Press the "Save" button.

Notes:

• The "Export" option is only available for Style Packs - is not present for Skins or Templates collections.
• Do not use the Archive option, because the resulting 7z file has a slightly different structure and Fusion will not recognize it as a Style Pack.
• To import a Style Pack in HMD, simply drag & drop the 7z file into the "My Fusion Elements" workspace.

Custom fonts

See Installing custom fonts section for more details on this subject.

To add custom fonts on an HMP running Fusion, create a Style Pack with the desired fonts files. Once this Style Pack is uploaded into Fusion, the custom fonts become available for the uploaded Skins and Templates.

• Note that the HMD is not adding the custom font specified like this on its font selection box (this is a known issue), therefore you need to specify the custom font directly in the SVG code of your Skin or Template (using the XML Tree View for instance).