The Importance of the Skin Properties File
The base.csi file for a skin references properties defined in the skin.properties.xml file. My webMethods Server uses the base.csi file to generate the base.css file that governs how the skin is displayed. This is a powerful mechanism that enables you to create new skins based on a common ancestor by specifying images, fonts, and colors in a new skin.properties.xml file without having to re-create a new stylesheet for each skin.
In the following examples, the Pearls skin is the a parent. No CSS (.css or .csi) change is required in the custom skin.
Replacing images
You can change the banner background image in a custom skin by modifying the value of the images/banner-bg.gif property in the skin.properties.xml file for the custom skin.
The following table lists the properties that you modify when replacing images:
File | Contents |
parent skin.properties.xml | <property>
<name>images/banner-bg.gif</name>
<value>images/dot.gif</value>
<description>banner background</description>
</property> |
parent base.csi | background-image: url(@skin images/banner-bg.gif;); |
child skin.properties.xml | <property>
<name>images/banner-bg.gif</name>
<value>images/carbon-bg.jpg</value>
</property> |
Globally replacing fonts
You can globally change the fonts used in a custom skin by modifying the value of the fonts/regular property in the skin.properties.xml file for the custom skin.
The following table lists the properties that you modify when replacing fonts:
File | Contents |
parent skin.properties.xml | <property>
<name>fonts/regular</name>
<value>font-family: tahoma, sans-serif;
font-size: 0.7em;</value>
<description>standard text</description>
</property> |
parent base.csi | @skin fonts/regular; |
child skin.properties.xml | <property>
<name>fonts/regular</name>
<value>font-family: Georgia, 'Times New Roman',
Times, serif; font-size: 1em; font-size: 0.7em;
</value>
<description>standard text</description>
</property> |
Globally replacing colors
You can globally change the colors used in a custom skin. In this example, the colors/section-body-border property controls the color of row borders. One change in the skin.properties.xml file for the custom skin, affects seven properties in the base.csi file.
The following table lists the properties that you modify when replacing colors:
File | Contents |
parent skin.properties.xml | <property>
<name>colors/section-body-border</name>
<value>#ccc</value>
<description>row border</description>
</property> |
parent base.csi | .tbl {
border: @skin sizes/section-body-border;
solid @skin colors/section-body-border;;
.
.
} |
child skin.properties.xml | <property>
<name>colors/section-body-border</name>
<value>#dfe6ec</value>
<description>row border</description>
</property> |