2.2

PrintShop Web Skinning Guide | 36

The warningLabel <span> is used as spacer to make sure that the warning icon and message align

with the field of the accompanying form line. The warningIcon <span> holds the actual warning

message which is stored in a separate <span> tag. The warning icon is set using CSS. The following

snippet shows background-image attributes for the warning icon.

.warningIcon {

display: inline-block;

width: 73%;

background-image: url(../../images/icon_alert.gif);

background-repeat: no-repeat;

background-position: 0px 3px;

display: inline-block;

vertical-align: top;

}

In this case the icon is coming from the image folder stored in the PSW web site root. You can use

you own icon by placing an image within the skins folder (or an images folder in your skin folder) and

changing the path to that image file.

A required field warning

Group head

Like the form header, group headers are used to visually group the elements. In the default skin this

element has a separator line above the item.

Group headers are used to visually group elements

The following source code snippet shows that the elements have two class selectors:

<span class="formLabel formLabelGroupHead" id="cAdditionalInformationLabel">Additional

information</span>

<span class="formStatic" id="cAdditionalInformationField"

name="cAdditionalInformation"></span>

</div>

The formline class and an additional grouphead class. This allows you to inherit style attributes of

regular form elements and adding specific information to make the group head stand out.