7.0

Table Of Contents

4.3 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 PSM Web logo as the header image

4.3.1 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: 70px;

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;).