Offline Package Customization

Offline packages exported from Windchill are zip files containing the exported files. Along with the exported content, an offline viewer is provided which allows users to browse the contents in their web browser.

By default, offline packages exported from Windchill display the Windchill logo and brand in the header of the offline view. This document describes how to update certain files on your installation server to have the exported packages display your company’s brand identity.

Utilizing this solution will change the format of all packages exported from the server. It will affect all users and organizations that make packages from that server.

• Cascading Style Sheets. This guide assumes a good knowledge of how to specify and write new CSS styles, without going into the specifics of how to write correct CSS.

Element	Type	Description
resources.zip	Zip file	This zip file contains the static elements provided in the resources folder in every package generated from the installation server. This file is located in the <Windchill>\codebase\com\ptc\netmarkets\wp\ixb directory of your server.
wpofflinestyles.css	CSS Style Sheet	Contained within the resources.zip file, this CSS style sheet contains the rules which control the look and feel of the offline view.
head.html	HTML File	The HTML file which is loaded at the top of every page.
header.gif	GIF graphics file	The background image of the header
logoWC.gif	GIF graphics file	Transparent GIF of the Windchill logo.

1. Locate the resources.zip file. It is located in the \codebase\com\ptc\netmarkets\wp\ixb directory, relative to the root of your Windchill installation. Normally, you can discover the root by using the environment variable WT_ROOT.

4. Inside the “resources” folder, you will find a file named “wpofflinestyles.css”. Open this file in your favorite CSS editor, or text editor.

5. Edit the styles to customize the look of the brand identity header, using the style rules listed below in the Customization Points section.

7. You may add links to external resources in the “pageHeaderActions” div. These links by default appear in the upper right corner of the page. For example, a link to your corporate website.

8. To test your CSS styles, load the “resources/head.html” file in your browser. Windchill supports Internet Explorer 6, and Firefox 2, be sure to test in both to ensure your styles will work. Note that the “generateTabs()” JavaScript function will not work correctly while testing in this manner, and errors related to it can be ignored.

9. Once you are satisfied with the look of the header, update the resources.zip file with the updated resources folder and files from your working folder. Make sure the file paths are correct inside the zip file – all files should have the path “resources\”.

10. Test to be sure packages are generated correctly by making some experimental packages from the running server and viewing them offline.

CSS rule	Default Value	Description
.pageHeader	Dark teal background with Windchill background image (header.gif) and a dark green bottom border.	Defines the border, background image and color of the header.
.wncApplLogo	logoWC.gif	Defines logo graphics file.
.applLogo	Height: 55 pixels.	Defines the height of the logo div, normally shown in the upper left corner of the page.
.pageHeaderActions(CSS rule in wpofflinestyles.css)	White text links.	Defines the style of links and text normally in the upper right corner of the page.
pageHeaderActions(div in head.html)	Delivered empty	Links can be added to this div.

Updating the resources.zip file in this manner affects every offline package created by the system. It is not currently possible to apply these changes to one package and not to another. Modification of packages after they are created is not possible on the server.

.pageHeader {
border-bottom: 1px solid #20313d;
background-image: url(header.gif);
background-color: #40637A;
background-repeat: no-repeat;
… }

.wncApplLogo {
background-image: url(logoWC.gif);
}

.applLogo {
background-repeat: no-repeat;
height: 55px;
background-position:34px;}