apps.css
About the file
The apps.css is the file responsible for providing styles for elements specific for our applications such as post, comments, file browsers and etc.. It should be automatically added in all pages via the ui package head.meta file and will correspond the UI package that is used and set in the master page. You may need to include this file in some of your applications, if you need to render your own application iframes. In our packages this file is not be skin related and holds the common styles and classes for all skins and layouts in the package.
If you plan to use it in non-Integra pages, have in mind that the ui package version is part of the file's path as it is used as cache breaker.
File path
The apps.css file, like the other ui package files, is distributed and installed in a skin&layout bundle and you can access them on the following paths:
- UI package root (the ui package install folder, with the version used as cache breaker)
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: uipack-root}}common/css/apps.css"
media="screen, projection" />
The {{url: uipack-root}} will be replaced on page render, with the relative URL to the current UI package that is selected to render all pages of the current master page.
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: uipack-root}}common/css/apps.css"
media="screen, projection" />
The {{url: uipack-root}} will be replaced on page render, with the relative URL to the current UI package that is selected to render all pages of the current master page.
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: uipack-root}}common/css/apps.css"
media="screen, projection" />
The {{url: uipack-root}} will be replaced on page render, with the relative URL to the current UI package that is selected to render all pages of the current master page.