Silk.css

About the file

The silk.css is the most used CSS file in Integra as it provides icons for various action links. This effect is achieved by using a pair of classes - general ("image-icon") and action specific (ex. "icon-accept"). Here is an example of a delete link.

<a href="./" class="image-icon icon-delete" />dummy delete</a>

And here is the result: dummy delete

File path

The silk.css file, like the other system CSS files, is part of the /wfrx/repository shared folder, and you can access them on the following paths. The currently distributed files are

  • wfrx
    • repository
      • css
        • silk.css

How to use it

In a single page

To use one of the system's CSS files only on a single page, you need to manage its meta data setting, and insert in the page header a line similar to:

<link rel="stylesheet" type="text/css" href="{{url: site-root}}wfrx/resources/css/silk.css"
 media="screen, projection" />

The "{{url: site-root}}" will be replaced on page render, with the relative URL to the site's root including the application path if there is one.

In all child pages of a master page

To use a system's CSS files on all pages that inherit a selected master page, you need to manage its meta data setting, and insert in the page header a line similar to:

<link rel="stylesheet" type="text/css" href="{{url: site-root}}wfrx/resources/css/silk.css"
 media="screen, projection" />

The "{{url: site-root}}" will be replaced on page render, with the relative URL to the site's root including the application path if there is one.

In all pages of a web site

To use a system's CSS in all pages of your website, you need to manage the site's global meta tags, and insert in the page header a line similar to:

<link rel="stylesheet" type="text/css" href="{{url: site-root}}wfrx/resources/css/silk.css"
 media="screen, projection" />

The "{{url: site-root}}" will be replaced on page render, with the relative URL to the site's root including the application path if there is one.

In your UI package

You can include a selected CSS file, by defining it in the meta tags that should be embedded in each page which uses the skin or the layout. This is done by managing the head.meta file placed in the UI pack's skin or layout folder. All skin files have their own head.meta files as they need to embed their own CSS or JS scripts.

One UI package can be installed on many different domains with or without an application path. To automatically generate the path with a domain and application path if present, you should apply the $APP_PATH$ tag within the head.meta file. This tag will be replaced with the proper domain URL. As an example, if you want to use the silk icons CSS file, that is distributed with the system you need to add the following line to skin's head.meta file:

<link rel="stylesheet" type="text/css" href="$APP_PATH$/wfrx/resources/css/silk.css" media="screen, projection" />