Design Asset
The Design asset allows you to create a design in the system. This Design is then applied to either a Site, a section of a Site or a page and is used to display the content on the frontend. Each Design will have a parse file that contains the HTML for the design along with any required files, including CSS files and images, being stored under it in the Asset Map. There is no limit on the number of Designs that you can create in a system. Each Design should be created under the Designs Folder in the Asset Map.
Bookmarks to the headings on this page:
Once you have added a Design asset, you can configure its settings on its associated asset screens. The majority of these screens are the same or similar to those for a Standard Page and are described in the Asset Screens manual. In this chapter, we will describe the Details, Edit Parse File, Usage and Import/Export screen, which are different for a Design. The Customisation screen is described in the Design Customisations chapter in this manual.
Details Screen
The Details screen of a Design allows you to upload the parse file and associated files for the design. For more information on the Status, Future Status and Thumbnail sections, refer to the Details chapter in the Asset Screens manual.
Tip: Design assets cannot use Safe Edit. Alternatively, if you need to edit a Design, you may choose to clone or recreate it, allowing you to safely make changes before applying the Design to your assets.
Details
This section allows you to change the name of the design and configure the frame settings when the design is viewed in the Simple Edit interface.
The Details section of the Details screen
The fields available are as follows:
- Design Name: enter a name for the Design. By default, the name that was entered when the asset was first created will appear in this field.
- No frames in Simple Edit Interface: when a design is viewed in the Simple Edit interface, the tool bar and Asset Map are displayed. This field allows you to select whether or not to view these frames for the Design in the Simple Edit interface. If this field is set to Yes, only the main content frame will be displayed in Simple Edit.
Parse File
This section allows you to upload the static HTML file of the design.
The Parse File section of the Details screen
The fields available are as follows:
- Manual: check this box and click Commit if you need to manually re-parse the HTML file. You will only be able to re-parse the file if you have already uploaded it to the Design.
Tip: If the Design does not appear to be working correctly and the syntax in the parse file is correct, try to manually re-parse the file.
- Upload: this field allows you to upload the static HTML file that has been created for the design. Select the file to upload and click Commit. The HTML code will appear on the Edit Parse File screen where you can modify it.
Associated Files
This section allows you to upload the associated files for the Design. You can upload these files individually or as part of a tar archive (.tar) or gzipped tar archive (.tar.gz or .tgz).
The Associated Files section of the Details screen
To upload associated files, select the file(s) in the available selection fields and click Commit. You can upload up to two files at a time. Uploaded files will be placed in the system's file directory.
To reduce the number of uploads, you can upload a single tar file containing all the files to associate with the Design. Once you have uploaded the tar file, Squiz Matrix will extract the files from the archive before placing them into the system's file directory.
Once you have uploaded the associated files of a Design, they will appear under the Design asset in the Asset Map. You will then be able to reference these assets in the parse file of the Design. For more information on how to do this, refer to the Steps to Creating a Design chapter in this manual.
Edit Parse File Screen
By default, the Edit Parse File screen will be blank. Once you have uploaded the parse file on the Details screen, the HTML code from that file will appear in the Edit Parse File section of the screen, as shown in the figure below.
The Edit Parse File screen
To edit the HTML or to add design areas, click within the box, enter the code and click Commit.
Tip: CSS Files must be referenced in a Design via a mysource_files/ link, as shown in the figure above; the style.css CSS File has been linked within the parse file. Please note that CSS Files cannot be linked to a Design using linked_css design areas in a Design Customisation.
Tip: Keep in mind that any modifications made to a parse file can alter existing Design Customisations. Care should be taken to prevent any unintended changes to your Design.
Usage Screen
The Usage screen shows the assets in the system that are using the Design. This means that the Design is currently applied on the asset. The Schema Usage section of the Usage screen is shown in the figure below.
The Design Usage section of the Usage screen
By default, if the Design has not been applied on any assets, no information will appear on the screen, as shown in the figure above. Once the Design has been applied to an asset, the information shown in the figure below will appear.
The Usage screen listing the assets that the Design has been applied to
The top-level assets where the Design has been applied are shown, along with the number of child assets also using the Design. You can click on the name of the asset to go to its Settings screen.
Import/Export Screen
This screen allows you to export the current Design as a gzipped tar archive (.tar.gz) file or import a tar archive (.tar) or a gzipped archive (.tar.gz) file that contains the design. If you have an existing design, you can use this screen instead of uploading the parse file and associated files on the Details screen. The Import/Export screen is shown in the figure below.
Import
This section allows you to import an external file or an existing asset.
The Import section of the Import/Export screen
The fields available are as follows:
- Import File: this field allows you to import a tar archive (.tar) or a gzipped archive (.tar.gz) file that contains the design to use. Select the file to import and click Commit. The file will be added to the Current Files section.
- Existing Asset: this field allows you to import an existing asset to use as the design. Create a File asset using the tar archive (.tar) or a gzipped archive (.tar.gz) file and select it in this field. The file will be added to the Current Files section.
For more information on how to import a design, refer to the Importing and Applying a Design section in this chapter.
Export
This section allows you to export the current design and its associated files as a gzipped archive (.tar.gz) file. However, any Design Customisations that have been created for the Design will not be exported. These will need to be recreated when the file is imported into a new Design.
The Export section of the Import/Export screen
To export the design, enter a name for the file in the Export File Name field and click Commit. The file will be added to the Current Files section. To download the file, click on the Download hyperlink in the Current Files section.
Current Files
By default, no files will be listed in this section. Once you have imported or exported the design, the file will be listed in this section, as shown in the figure below.
The Current Files section
To download the file, click on the Download hyperlink. To apply the design to the Design asset, click the Apply button and click Commit. When you are applying a design, any Design Customisations and associated files that exist for the Design will be removed.
Styles Screen
This screen allows you to determine the CSS styles of the current Design that will appear on the WYSIWYG Editor and DIV Properties pop-up. These styles are determined by an associated CSS File asset, linked under the Design asset in the Asset Map. The Styles screen is shown in the figure below.
WYSIWYG Classes Definitions
This section allows you to select which style classes of the Design will be available for use on the WYSIWYG Editor’s-- select css style -- drop-down list.
The WYSIWYG Classes Definitions section of the Styles screen
The following fields are available:
- Key: enter the name of the style class that you want to use from the CSS of the Design.
- Value: enter a Short Name that will be displayed in the WYSIWYG Editor for the style class.
The WYSIWYG CSS List
For example, say the Design contained a CSS class named txt-red that makes the text red. If you set the Key field to txt-red and the Value field to Text: Red, the option Text: Red will be displayed in the list in the WYSIWYG Editor, as shown in the figure to the right. If a user then selects this option within the WYSIWYG Editor, the CSS class txt-red will be applied to the content.
When the WYSIWYG Classes Definitions fields are used, only the style classes specified will appear on the WYSIWYG Editor – all other style classes of the Design will not be available. For example, if the current Design’s CSS style sheet included the style classes float-left and float-right, entering float-left into this field would make only the float-left CSS style available in the WYSIWYG Editor. If no style classes are specified, all class definitions will be available.
DIV Container Classes Definitions
This section allows you to select which style classes of the Design will be available for use on the DIV Properties pop-up of a DIV container.
The DIV Container Classes Definitions section of the Styles screen
The following fields are available:
- Key: enter the name of the style class that you want to use from the CSS of the Design.
- Value: enter a Short Name that will be displayed in the DIV Properties pop-up for the style class.
The Class menu
For example, say the Design contained a CSS class named cnt that makes selected text centered on the page. If you set the Key field to cnt and the Value field to Center, the option Center wil be displayed in the Class list of the DIV Properties pop-up, as shown in the figure to the right. If a user then selects this option, the CSS class Center will be applied to the division.
Editing the Design
To edit the parse file of the Design, right click on it in the Asset Map and select Edit Parse File. The HTML code will appear on the right hand side of the screen. Edit the code and click Commit. The changes that you have made will automatically be applied to the assets that are currently using the Design.
Updating the Associated Files
When the associated files are uploaded to a Design, the files with the extension of .css are created as a Text File asset and files with the extensions .gif, .jpg, .jpeg or .png are created as an Image asset. To edit the .css file, go to the Edit File screen and to upload a new version of an image, go to the Details screen. For more information on these assets, refer to the Core Assets manual.
Deleting an Associated File
To delete an associated file, click on it in the Asset Map, press the Delete key on the keyboard and confirm that you want to delete it. The asset will be moved to the Trash.
Adding a New File to the Design
To add a new file to the Design, go to the Details screen of the Design, select the file in the Associated Files section and click Commit. The file will appear under the Design asset in the Asset Map.
Importing a Design
To import a design, right click on the Design and select Import/Export. Select the tar archive (.tar) or a gzipped archive (.tar.gz) file in the Import File field and click Commit. The file will be added to the Current Files section, as shown in the figure below.
The Current Files section
The imported files
In the Current Files section, click the Apply button for the file and click Commit. Squiz Matrix will extract the files and place them in the files directory. The files will also appear under the Design asset in the Asset Map, as shown in the figure to the right. The parse file for the design will appear on the Edit Parse File screen, where you can make changes.
Structure of the File to Import
When you import a design, you need to import a .tar or .tar.gz file. This file must contain the following files:
- parse.html: this file must contain the HTML code for the design. The content of this file is used as the parse file for the Design.
- associated_files.tar.gz: this file must contain the images and CSS files that are needed for the design. These files will be uploaded as associated files.