CSS design file

When a design is created, any CSS files are normally uploaded as associated files and are referenced in the parse file. The code shown here will achieve this:

<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; the system will not parse it.

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:

#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:

<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 parsed by 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 as a standard page and a design.

They are described in both the Asset screens documentation and the Design asset documentation.

The CSS design file asset works similarly to a design asset.

All the functions covered previously in this documentation 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 customizations. 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 will not be printed on the front-end: /*@@ Comment goes here @@*/

Static Caching

The static caching section allows you to use a static cache file representation of the CSS design file, which can reduce the load on the webserver 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 (invisibly linked) used as the static cache file. By default, this option is disabled.

To use a static cache file, the CSS design file must be live and granted public read access. Contextual design areas (such as menus) will not function correctly when a static cache file is used.

Strip white space

Whether to strip any additional white space from the cached CSS file. This action 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 its URL 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, you need to include the linked CSS design area to reference it within the design. An example of the code to use is shown:

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

Once you have added the code to the parse file, you need to customize it in a design customization 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 customize 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>

Customizing the linked CSS design area

Once you have added the linked CSS design area to the parse file of a design, you need to create a design customization and customize the design area to select which CSS design file to use.

Read the Design customizations documentation for more information on creating a design customization.

Once you have customized the linked CSS design area, you can customize its settings on the Details screen.

Read the Asset details screen documentation for more information on the Status, Future status, and Thumbnail sections of the screen.

Read the Design customizations documentation for more information about the General section.

Link

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