Adding Stylesheets to a Skin Package

You can use CSS and dynamic CSS files to modify the generated base.css file for a skin package. To add a CSS or dynamic CSS file to a skin package, you define it in the skin.properties.xml file for the custom skin package. Each stylesheet is defined in a property element having this form:

<property>
   <name>css/name.css</name>
   <value>css/name.extension</value>
   <description>optional description</description>
</property>

If the file name in the <value> element is the same as the <name> element, you can omit the <value> element.

If the skin.properties.xml file does not have property element for a stylesheet, it inherits the stylesheet in the parent skin.

Note:

When you add or modify a stylesheet, you should place it in the css directory of the skin package.

Note:

We do not recommend that you create a base.css file for use in a custom skin package. However, you can use the syntax here to compare with the examples that follow.

You can have only one base.css element in the skin.properties.xml file. In the following example, you could omit the <value> element because it is identical to the <name> element.

If you want to make extensive changes that override the base.csi file of a parent skin, you might create a new base.csi file and define it in the custom skin package. In this case, the <name> element is base.css and the <value> element is base.csi, as shown here:

The rules for extended.css and extended.csi files are the same as those for base.css:

<property>
<name>css/extended.css</name>
<value>css/extended.css</value>
</property>

<property>
<name>css/extended.css</name>
<value>css/extended.csi</value>
</property>

A skin.properties.file can have properties for multiple extended.css or extended.csi files at the same time. One use for this capability is to provide browser-specific properties.

<property>
   <name>css/extended.css</name>
   <value>css/extended.csi</value>
</property>

<property>
   <name>css/ie6.css</name>
   <value>css/ie6.csi</value>
   <description>special ie6 stylesheet rules</description>
</property>

<property>
   <name>css/ie7.css</name>
   <value>css/ie7.csi</value>
   <description>special ie7 stylesheet rules</description>
</property>