Basic Customization > User Interface Customization > Generic UI Customizations > Offline Package Customization
  
Offline Package Customization
Objective
You want offline packages exported fromWindchill to display your company's brand identity.
Background
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.
Scope/Applicability/Assumptions
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.
Intended Outcome
The offline view in exported packages display updated brand identity information for your company.
Solution
Update the CSS in the static resources zip file to style the header of the offline view.
Prerequisite knowledge
To achieve this objective, you need to have an understanding of the following:
• 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.
• Knowledge and access to the Brand Identity standards for your company.
Solution Elements
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.
Procedure – update the CSS Styles of the Header
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.
2. Make a backup copy of the original resources.zip before you begin.
3. Unzip the resources.zip to an empty folder on your hard drive.
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.
6. You may need to add updated graphic files or other resources to the resources directory to support your updated styles.
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.
Customization Points
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.
Limitations
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.
Sample Code
.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;}