2.2

PrintShop Web Skinning Guide | 23
Header
The information stated in the header div is used to display the main page header or title. This is the
place to show a system wide logo or the logo of your customer.
The default skin showing the PSW logo as the header image
Replacing content
The HTML snippet below shows the header div containing a < h1> tag. Using the Style.php you can
replace its contents by a logo uploaded in the Edit Web Design page. This allows the system to show a
company specific image or logo.
<div id="header"><h1>PrintShop Web</h1></div>
The first style sets the width and height for the header div and sets a background image. The
generateSkinLogo function (PHP) retrieves the path of the company logo which can be set in the
Edit Web Design page. Of course this can be replaced by a hard coded path a custom image. The
generateSkinHeaderColor retrieves the header color specified in the Edit Web Design page. This color
can be used to fill up the background to match the color of your background image.
/* header */
#header {
height: 90px;
width: 100%;
background-image: url(<? generateSkinLogo(); ?>);
background-position: center left;
background-repeat: no-repeat;
background-color: <? generateSkinHeaderColor();?>;
}
#header h1 {
display: none;
}
The second style hides the contents of the <h1> tag (display: none;).