A Design Customisation allows you to configure the settings for the design areas, without the need to alter the parse file or create a separate Design asset. You can choose to show, hide or modify each of the design areas. For example, you can create a hyperlink in the design for the Home page by using the Constant Button design area. You can then hide it on all other pages in the Site by creating a Design Customisation, customising the Constant Button design area and setting the print option to no.

A Design Customisation also allows you to override the associated files that have been added to the Design asset. For example, the Design may use the Squiz logo but the Design Customisation may instead use the Squiz Labs logo.

Creating a Design Customisation

To create a Design Customisation, right click on the Design asset and select Customisations. In the New Customisation section, tick the box, enter a name for the customisation in the field provided and click Commit.

The New Customisation section of the Customisations screen

The Design Customisation will be listed in the Current Customisations section, as shown in the figure below.

The Current Customisations section of the Customisation screen

The Design Customisation will also appear under the Design asset in the Asset Map. You can create more than one Design Customisation per Design by following the steps outlined above.

Creating Customisations of Customisations

You can also create a Design Customisation of a Design Customisation. In other words, you can customise the settings for the design area on the parent Design Customisation and customise them even further on the child Design Customisation. By default, the child Design Customisation will inherit the settings from the parent. An example of creating a customisation of customisation is outlined in the Examples section below.

To create a Design Customisation of a Design Customisation, right click on the Design Customisation in the Asset Map and select Customisations. In the New Customisation section, tick the box, enter a name for the customisation in the field provided and click Commit. The Design Customisation will be listed in the Current Customisations section. The Design Customisation will also appear under the DesignCustomisation asset in the Asset Map.

Customising a Design Area

Once you have created a Design Customisation asset, to customise the settings for the design areas, right click on it in the Asset Map and select Details. The design areas that have been added to the parse file will be listed in the Un-Customised list in Design Areas section, as shown in the figure below.

 The Design Areas section listing un-customised Design Areas

For each design area, the type of design area it is and its id name will be shown. This id name is set in the MySource_AREA tag of the design area in the parse file (for more information, refer to the Design Tags chapter). To customise a design area, click the Customise flag and click Commit. The design area will now be listed in the Customised List, as shown in the figure below.

The Customised Design Areas

Click on the hyperlink in the Design Area column - the Details screen of the design area will appear where you can modify its settings. For more information on the fields available on the screen for each design area, refer to the specific design area in this manual.

To delete a customisation, click the Remove Customisation box and click Commit. If you delete the design area from the parse file or change its id name, the customisation will also be deleted.

General Section on the Details Screen of a Design Area

On the Details screen of a design area, there a section called General. This section is common for all design areas. The fields available in this section are as follows:

• Print: select whether to print the design area for the Design Customisation. This allows you to show and hide areas of the design without creating a separate Design asset. For example, if you have created a hyperlink by using the Constant Button design area, you can hide for the customisation by selecting No in this field.
• Cache: select whether the design area should be cached. All design areas that are static should be cached for improved performance.
• Cache Globally?: select whether to enable global caching. If this option is enabled, the Design Area will share a common cache entry wherever it is used. This option should only be enabled on Design Areas where the content is not dynamic based on URL. Please note that the _recache URL suffix will not work for globally cached design areas; global design area cache can be cleared using the cache manager.

Tip: These options can be set in the parse file by using the print and cache argments in the MySource_AREA design tag. For more information, refer to the Design Tags chapter in this manual.

Overriding Associated Files

By default, the Design Customisation will use the associated files that have been uploaded to the Design asset. You can, however, override these files for a Design Customisation. For example, you can use a different logo or style sheet. To do this, create a file using the same name as the existing associated file (for example if the existing file under the Design asset is called logo.gif, the new file needs to be called logo.gif) and upload it to the Design Customisation. To upload the files, right click on the Design Customisation in the Asset Map and select Details. In the Customise Associated Files section, select the files to upload and click Commit. You can only upload two files at a time. Alternatively, you can create a tar archive (.tar) or gzipped tar archive (.tar.gz or .tgz) file that contains the files and upload one file instead. Squiz Matrix will extract the files and place them into the files directory. Once the files have been uploaded they will appear under the Design Customisation asset in the Asset Map.

Applying a Design Customisation

Once you have created the Design Customisation, you need to apply it to the Site or a page in the Site. To apply a Design Customisation, go to the Settings screen of the asset. In the Designs section, select the Design Customisation in the System Defined Fronted Design and click Commit (for more information on this screen, refer to the Asset Screens manual). This will apply the design that has been defined in the Design asset along with the settings that have been selected in the Design Customisation to the asset.

Examples

To understand how the Design Customisation works, consider the following example.

Overriding an Image

We currently have a design that is showing the Squiz logo on the left side of the screen, as shown in the figure below.

The Home page displaying the Squiz logo

A Design Customisation

For the Squiz Labs page, however, we want to show the Squiz Labs logo. Instead of creating a new design, a Design Customisation is created and the Squiz Labs logo is uploaded as an associated file of the customisation. The name of the file that is used is squiz-logo.gif as it is the same name as the Squiz logo file under the Design asset, as shown in the figure to the right.

The Design Customisation is applied to the Squiz Labs page. When a user views this page, the Squiz Labs logo is displayed, as shown in the figure below. For all other pages in the Site, however, the Squiz logo will be displayed, as they are using the Design asset.

The Squiz Labs page displaying the Squiz Labs logo

Hiding a Design Area and Creating a Customisation of a Customisation

We have a design that needs to show a list of the latest assets that have been published in the Site (i.e. a What's New page). Above this list, the Home page also needs to show a list of the latest news items. Two Nest Content design areas are added to the parse file, as shown in the code below (for more information on this design area, refer to the Nest Content Design Area chapter).

<MySource_AREA id_name="latest_news" design_area="nest_content" print="no">
  <MySource_SET name="type_codes" value="page" />
</MySource_AREA>

<MySource_AREA id_name="whats_new" design_area="nest_content">
  <MySource_SET name="type_codes" value="page" />
</MySource_AREA>

The first design area is for the latest news list. As this is only required for the Home page, the print argument is set to no. The second design area is for the What's New page.

Design Customisations

Two Design Customisations are created, as shown in the figure to the right. The Home Page Customisation is a child customisation of the Site Customisation. This means that the Home Page Customisation will inherit any of the settings that are changed on the Site Customisation.

On the Site Customisation, the whats_new design area is customised and the What's New page is selected on the Details screen, as shown in the figure below.

The whats_new Design Area

On the Home Page Customisation, the latest_news design area is customised. On the Details screen, the Print option is set to Yes and the Latest News page is selected, as shown in the figure below.

The latest_news Design Area

The Site Customisation is applied to the Site and its child pages and the Home Page Customisation is applied to the Home page. When the user views the Home page, the Latest News and What's New lists appear on the right hand side of the screen, as shown in the figure below.

The Home page nesting both the Latest News and What's New pages

When the user views any other page in the Site, only the What's New list will appear, as shown in the figure below.

 The Squiz Labs page nesting the What's New page