Making Entries in a Skin Properties File
If you edit the skins.properties.xml file manually, you do not need to include components inherited from one of the skin’s ancestors. Rather, you need only include modifications to inherited components.
A good way to see the properties that describe a skin is to export the parent skin package using the method described in Exporting a Skin to Your Computer, unzip the skin package, and examine the skin.properties.xml file.Note: Modifying the skin properties in the skins.properties.xml file requires CSS expertise.
The skin.properties.xml file is made up of property elements, each describing a component of the skin. The property elements have this format:
<property>
<name>property_name</name>
<value>property_value</value>
<description>optional_description</description>
</property>
The following guidelines apply to the property element:
If the value is the same as the name, you can omit the value.
The description is optional.
You can add comments using standard XML comment syntax:
<!-- This is a comment -->
A skin component can have multiple properties associated with it. For example, the banner that appears at the top of a My webMethods Server page has over twenty properties that determine its appearance, such as:
Color, position, and padding of the background
Color, font, and weight of link text, selected links, including hover characteristics
Images and their positioning
To see the properties that describe a skin, export the pearls skin package using the method described in
Exporting a Skin to Your Computer, unzip the skin package, and examine the skin.properties.xml file. The following examples describe a few ways to modify properties.
How do I specify a parent skin?
To make the development of a custom skin easier, you need to specify a parent skin from which the custom skin inherits its properties. A skin can have only one parent skin. In the following example, the skin.properties.xml file specifies the pearls skin package as the parent of the custom skin:
How do I replace one image with another?
To replace one image with another, you first need to move a copy of the new image into the images directory for the skin package. Then you need to locate the property for the image in the skins.properties.xml file.
For example, perhaps you want to rebrand the page by changing the logo image that appears in the left side of the banner. The new image has the name my_logo.png.
How do I modify colors?
The topic
Replacing Colors Using a Color Picker shows several colors modified in the Skin Administration page. The same changes look like this in the skin.properties.xml file.
<property>
<name>colors/button</name>
<value>#FFFFFF</value>
<description>button text</description>
</property>
<property>
<name>colors/button-bg</name>
<value>#9EB6C7</value>
<description>button background</description>
</property>
<property>
<name>colors/button-border</name>
<value>#668899</value>
<description>button border</description>
</property>
<property>
<name>colors/button-border-light</name>
<value>#BBDDEE</value>
<description>button border</description>
</property>
<property>
<name>colors/button-hover</name>
<value>#FFFFFF</value>
<description>button text</description>
</property>
<property>
<name>colors/button-hover-bg</name>
<value>#4C7499</value>
<description>button background</description>
</property>
<property>
<name>colors/button-hover-border</name>
<value>#395874</value>
<description>button border</description>
</property>
<property>
<name>colors/button-hover-border-light</name>
<value>#ABC9D8</value>
<description>button border</description>
</property>
<property>
<name>colors/button-disabled</name>
<value>#C5C7C7</value>
<description>disabled button text</description>
</property>
<property>
<name>colors/button-disabled-bg</name>
<value>#FFFFFF</value>
<description>disabled button background</description>
</property>
<property>
<name>colors/button-disabled-border</name>
<value>#C5C7C7</value>
<description>disabled button border</description>
</property>
How do I add Cascading Style Sheets?
You can add multiple style sheets to a skin.properties.xml file. For more information, see
Adding Stylesheets to a Skin Package.