2.1

PrintShop Web Skinning Guide | 40
generateSkinFont
The generateSkinFont function retrieves the font information set in the Edit Web Design page of the
PSW site. The value entered in the Edit Web Design page (Font family) can be a single font name or a
comma separated list. Below an example on how the Font family can be set using this function:
input, select, body, textarea {
font-size: 70%;
line-height: 1.3em;
font-family: <? generateSkinFont(); ?>;
}
generateSkinMainColor
The generateSkinMainColor function retrieves the main color set in the Edit Web Design page of the
PSW site. The value entered in the Edit Web Design page can be entered manually or selected in the
color picker.
Below an example on how this color can be set using this function. In this case the background color is
set for the edit forms header bar class (or title bar).
.formHeader {
display: block;
width: 100%;
background-color: <? generateSkinMainColor(); ?>;
color: #FFFFFF;
padding: 2px;
font-weight: bold;
}
generateSkinMainColorHighLight
The generateSkinMainColorHighLight function retrieves the skins main color set in the Edit Web
Design page. The parameter of this functions lets you change the tint of the color. Fractional values are
used, where 0.0 will be black, 1.0 the original color and higher values will result in a lighter tint of the
main color.
Below an example on how this color can be set using this function. In this case the background color of
the user info bar will have a darker tint when the user places the cursor over these items (hover).
#userinfo li a:hover{
background-color: <? generateSkinMainColorHighLight(0.6); ?>;
line-height: 2em;
}
generateSkinContrastColor
The generateSkinContrastColor function retrieves the contrast color information set in the Edit Web
Design page of the PSW site. In the default skin this color is used for the menu bar items, table
subheads and table footers. Below an example on how this color can be set using this function:
#tableOverview .subhead td {
background-color: <? generateSkinContrastColor(); ?>;
border-width: 0 1px 0 0;
border-color: #FFFFFF;
}