When a Design is created, any CSS files are normally uploaded as associated files and are referenced in the parse file by using code similar to what is shown below.

<link href="mysource_files/layout.css" rel="stylesheet" type="text/css" /> 

As these CSS files are created as text files, you cannot use any of the design areas or the path mysource_files to reference an associated file, as it will not be parsed by the system. For example, if you needed to set the background image of the top-nav class. As the image would be uploaded as an associated file, you would need to use the code that is shown below.

#top-nav { background-image: url("mysource_files/bg_top.gif"); } 

This code cannot be added to the CSS file, as it references mysource_files. It needs to be parsed by the system and replaced with the correct URL of the image. Instead, the following code is added to the top of the parse file, as shown below.

<style type="text/css" media="all">
  #top-nav { background-image: url("mysource_files/bg_top.gif"); }
</style>  

The CSS Design File asset is used to create a style sheet that will be parsed by Squiz Matrix. In other words, by using this asset, you can use the design areas or the path mysource_files to reference an associated file, as they will be replaced with the correct syntax. As they are separate assets, these style sheets can also be used by more than one Design in the system.

CSS Design File Asset

Once you have added a CSS Design File, 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 a Design and are described in either the Asset Screens manual or the Design Asset chapter in this manual.

The CSS Design File asset works similarly to a Design asset. All the functions covered previously in this manual can also be used on the CSS Design File asset. In other words, you can use the XML design tags and design areas, include any global variables and create customisations. Also, when referencing files in the CSS Design File asset, you need to use mysource_files. These files need to be uploaded as associated files on the Details screen of the CSS Design File asset.

You can use the following comment syntax format to add notes within the CSS Design File code that won't be printed on the front-end:
/*@@ Comment goes here @@*/

Static Caching

The Static Caching section allows you to enable the use of a static cache file representation of the CSS Design File, which can reduce the load on the web server and improve performance.

The fields available are as follows:

• Use Static Cache File?: this option allows you to enable the use of a static cache file to serve. When this option is enabled, a File asset will be created as a child of the CSS Design File (TYPE 3 linked) that will be used as the static cache file. By default, this option is disabled.
  
  Please note that, in order to use a static cache file, the CSS Design File must be Live and have granted public read access. Please also be aware that contextual design areas (such as menus) will not function correctly when a static cache file is used.
• Strip White Space: whether or not to strip any additional white space from the cached CSS file. This can reduce the size of the file being cached.
• Include File Version in Static URL: enabling this option will append the file version of the CSS file within it's URL, so as to prevent the display of obsolete data due to the external caching of statically served content.

Linked CSS Design Area

Once you have created the CSS Design File asset, to reference it within the Design, you need to include the Linked CSS design area. An example of the code to use is shown below.

<MySource_AREA id_name="layout" design_area="linked_css" /> 

Once you have added the code to the parse file, to get this design area to work, you need to customise it in a Design Customisation and select which CSS Design File asset to use. You can use more than one CSS Design File in a Design by adding multiple Linked CSS design areas.

Set Variables

The set variables available for the Linked CSS design area are as follows:

• tag_type: this variable allows you to select how the CSS file is linked in the HTML file. By default, this is set to link_tag. The options available are as follows:
  • link_tag: by using this option, the link will be generated as <link rel="stylesheet" type="text/css" href="/link/to/file.css" media="<media_value>" />

    <MySource_AREA id_name="layout" design_area="linked_css" >
    <MySource_SET name="tag_type" value="link_tag" />
    </MySource_AREA> 

  • import_tag: by using this option, the link will be generated as @import url(/link/to/file.css);

    <MySource_AREA id_name="layout" design_area="linked_css" >
    <MySource_SET name="tag_type" value="import_tag" />
    </MySource_AREA> 

• media: this variable allows you to customise the style sheet applied depending on the media the user is using to access the HTML page. The options available are all, aural, braille, embossed, handheld, print, projection, screen, tty, tv. By default, this is set to all. This option can only be used when the tag_type is set to link_tag.

  <MySource_AREA id_name="layout" design_area="linked_css" >
    <MySource_SET name="tag_type" value="link_tag" />
  <MySource_SET name="media" value="aural" />
  </MySource_AREA> 
  

Customising the Linked CSS Design Area

Once you have added Linked CSS design area to the parse file of a design, you need to create a Design Customisation and customise the design area in order to select which CSS Design File to use. For more information on how to create a Design Customisation and customise the design area, refer to the Design Customisation chapter in this manual.

Once you have customised the Linked CSS design area, you can customise its settings on the Details screen. For more information on the Status, Future Status and Thumbnail sections of the screen, refer to the Details Screen chapter in the Asset Screen manual. For more information on the General section, refer to the Design Customisation chapter in this manual.

Link

This section allows you to change the settings for the Linked CSS design area.

The fields available are as follows:

• Linked CSS: select which CSS Design File to use from the Asset Map. If you do not select a CSS Design File, this design area will not work.
• Tag Type: select how the CSS file is linked in the HTML file. By default, this is set to Link Tag. For more information on the options that are available, refer to the Tag Type set variable above.
• Media: this option allows you to customise the style sheet applied depending on the media the user is using to access the HTML page. The options available are all, aural, braille, embossed, handheld, print, projection, screen, tty, tv. By default, this is set to all. This option can only be used if the Tag Type is set to Link Tag.