My webMethods Server 10.15 | My webMethods Server Webhelp | Administering My webMethods Server | Server Page Development | Customizing Skins | Make-up of a Skin Package | The Skin Properties File | The Importance of the Skin Properties File
 
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>
Also, see How do I replace one image with another?.
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>
Also, see How do I modify colors?.