Cascading Style Sheets
Note: | Modifying the files described in this topic requires CSS expertise. |
When My webMethods Server displays a page, the skin for that page uses a Cascading Style Sheet (CSS) that describes all of the properties making up the skin. My webMethods Server generates this base CSS at the time you deploy the skin package to the server and every time the server starts. The generated CSS file is based on properties that can be provided from a number of sources:
Properties inherited from a hierarchy of parent skins
A skins.properties.xml file that is part of the skin package
One or more CSS or dynamic CSS files in the skin package
My webMethods Server uses dynamic CSS files to reference property values in the skin.properties.xml file and place them in the generated base.css file for a skin package. See
How Dynamic CSS Files Work.
Cascading Style Sheet Definitions
base.css
The primary CSS for a skin package. A base.css file most often exists only as a generated CSS file, having been defined by other sources in the skin package or its parent. The base.css can be modified by one or more extended CSS or dynamic CSS files. It is not recommended that you create a base.css file for a custom skin package, but if you do so, define it in the skin.properties.xml file. You cannot define both a base.css file and a base.csi file in the same custom skin package.
extended.css
A secondary CSS for a skin package. Entries in the extended CSS file override the base.css file. You can have multiple extended CSS files, such as to provide browser-specific CSS values. Extended CSS files, each with a different name, are defined in the skin.properties.xml file.
base.csi
A dynamic CSS file that references properties in the skin.properties.xml file (
How Dynamic CSS Files Work). As a result of the base.csi file, the generated base.css file contains properties from the skin.properties.xml file. The skin.properties.xml file for a top-level skin package (one that has no parent) describes all properties that make up a skin. If there is no base.csi file in a skin package, it is inherited from a parent skin. The base.csi file is defined in the skin.properties.xml file. You cannot define both a base.css file and a base.csi file in the same custom skin package.
extended.csi
A secondary dynamic CSS file for a skin package (
How Dynamic CSS Files Work). Entries in the extended.csi file override the base.csi file. You can have multiple extended.csi files, such as to provide browser-specific CSS values. the extended.csi files, each with a different name, are defined in the skin.properties.xml file.
How Do I Choose Which Type of Stylesheet to Modify?
Use these guidelines in determining which stylesheet to use:
Use an extended.css file to make selected modifications to a custom skin that is not significantly different from the parent skin on which it is based. An extended.css file overrides:
The base.css or base.csi file in the parent skin package
If you define an extended.csi file for a custom skin, the classes in it override only the corresponding classes in the base.css or base.csi file of the parent skin.
Use an extended.csi file to change selected references to a skin.properties.xml file, either in the custom skin package or in its parent. An extended.csi file overrides:
The base.csi file in the parent skin package
The base.csi file in the custom skin package, if you have created one.
Using an extended.csi file to create new classes is the simplest way to add new styles to a custom skin.
As an alternative to defining extended.css files in the skin.properties.xml file, you can use import statements to include them in an extended.csi file. For example, the following statements cause two CSS files to be included during generation of the base.css for a skin:
@import url(@skin css/general.css;);�"
@import url(@skin css/dialog_styles.css;);�
Use a base.csi file if you have made extensive modifications to the skin.properties file in the custom skin package that require a revised set of references. A base.csi file is required in any skin package that does not have a parent skin package.
If you define a base.csi file for a custom skin, it completely overrides any base.css or base.csi file in the parent skin. If the custom base.csi file contains a subset of the classes defined for the parent skin, the generated base.css file will contain only that same subset of classes.
