webMethods 10.2 | Dynamic Apps Platform | Administering My webMethods Server | 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.
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.
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.
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?.
Copyright © 2018 | Software AG, Darmstadt, Germany and/or Software AG USA, Inc., Reston, VA, USA, and/or its subsidiaries and/or its affiliates and/or their licensors.