How to use the system CSS files, if you need to

WordFrame Integra platform is build upon two separate web applications: the Public Site and the Core administration. These two applications need to share web resources such as CSS files, javascripts and images. You can also use these resources.

The root path of the shared resources is "/wfrx/resources/". It is accessible both from the Public site and Core administration domains. The JQuery library is automatically embedded in all WordFrame Integra pages, so you can use it without any efforts.

To get information about the files themselves, read one of the next chapters in this section.

You can use the system's CSS file in the following ways:

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" />