Designs

What is a Design?

A design is a container of sorts. It contains a loose association of stylesheets and templates. It allows managing all of the stylesheets and templates required to implement a look and feel. Designs can be exported to a single file be shared, and imported from a single file.

Each content page that renders HTML is associated with a design to determine which stylesheets are to be used, and their order. Additionally, each content page that renders HTML is associated with a template; though the template does not need to be associated with the specified design.

Templates and stylesheets do not need to be associated with a design, however, only the templates and stylesheets that are associated with a design are exported with the design.

Managing Designs

The Designs tab is available to users with the "Manage Designs" permission. It displays a list of all of the known designs in a tabular format. Each row of the table represents a single design. The columns of the table displays summary information about the design and provides some ability to interact with it.

This tab does not provide filtering, pagination, or bulk actions as it is intended that the number of designs associated with a website should normally be kept small and manageable.

An options menu exists providing the ability to create a new design, or to import a design from XML format.

Table Columns

• Id:
  This column displays a link containing the unique numeric id for the design. Clicking on this link will display the edit design form.
• Name:
  This column displays a link containing the name for the design. Clicking on this link will display the edit design form.
• Default:
  This column an icon represent whether or not this design is the "default" design. The default design is selected first when creating a new content item of type "Content Page" and may be used for other purposes. Only one design can be the default.
• Actions:
  This column displays various links and icons representing actions that can be performed with designs:
  • Edit - Display a form to allow editing the design.
  • Export - Export the design to an XML file that can be imported into other websites.
  • Delete - Display a form that asks for confirmation about deleting the design.

Editing Designs

The edit design form is a complex form that allows management of all of the attributes of a design. The form is divided into numerous tabs. Unlike editing stylesheets and templates, this form does not support "dirtyform" or locking functionality.

Some of the attributes of a design that can be edited are:

• Name:
  
• Templates:
  This tab allows selecting different templates to associate with the design. You can drag and drop templates between the "Available Templates" list and the "Attached Templates" list and to order templates within the attached list. At this time, ordering of templates within the attached template list is not significant.
• Stylesheets:
  This tab allows selecting different stylesheets to associate with the design. You can drag and drop stylesheets between the "Available Stylesheets" list and the "Attached Stylesheets" list and to order stylesheets within the attached list. The order of stylesheets within the attached list determines the order that they will be included in the rendered page content for content items of type "Content Page".
• Description:
  This tab provides a free form text area where a description of the design, and additional notes can be entered. the description is also useful to other users when deciding to share a design.

Importing Designs

The Design Manager module is capable of importing XML themes that were exported from CMSMS Design Manager, or from the older CMSMS theme manager. It expands the uploaded XML file, and extracts templates, stylesheets, and other useful information from the file. It also performs some minor transformation on the extracted data to try to adjust for overlapping names, etc.

The import process is divided into a few steps:

• Step 1: Upload the file:
  This step manages uploading the user selected XML file and validating its contents. This step is vulnerable to PHP limits for file size, memory limits, and time limits for form processing. You may need to increase those limits on overly restricted sites when uploading larger theme files.
  Once the XML file has passed the validation process, it is copied to a temporary location for processing in step 2.
• Step 2: Verification:
  The second step is for verifying and previewing the new design that will be created from the XML file. From here you can display, and edit various aspects of the design or theme.