How Dynamic CSS Files Work

My webMethods Server replaces skin property references in a dynamic CSS file with property values in the skin.properties.xml file and places them in the generated base.css file for a skin package. A top-level skin package (one that has no parent) typically has no base.css file, instead using the base.csi file to create the generated base.css file.

Used in custom skin packages, this feature makes it possible to create new skins based on a common ancestor by simply specifying skin properties in a new skin.properties.xml file. If you make simple modifications to the skin.properties.xml file that do not require changes to the dynamic CSS file, you can use the base.csi file inherited from the parent skin. If you make more extensive modifications, you may have to create an extended.csi file to properly reference the changed or added properties.

Dynamic CSS files make use of at-rules (or @rules) to reference properties in the local skin.properties.xml file or properties inherited from the parent skin. For example, if your base.csi file contains this rule:

body {
      @skin fonts/regular;
      color: @skin colors/text;;
      background-color: @skin colors/text-bg;;
      direction: @skin dir/text;;}

and the skin.properties.xml files contains these property definitions:

<property>
  <name>fonts/regular</name>
  <value>font-family: trebuchet; font-size: 20px;</value>
</property>
<property>
  <name>colors/text</name>
  <value>#000</value>
</property>
<property>
  <name>colors/text-bg</name>
  <value>#fff</value>
</property>
<property>
  <name>dir/text</name>
  <value>ltr</value>
</property>

the generated base.css file will contain this rule:

body {
      font-family: trebuchet; font-size: 20px;
      color: #000;
      background-color: #fff;
      direction: ltr;
}

If you create a base.csi or extended.csi file for use with a skin package, you need to declare it in the skin.properties.xml file, as described in Adding Stylesheets to a Skin Package.