离线包自定义

基本自定义 > 用户界面自定义 > 通用 UI 自定义 > 离线包自定义

离线包自定义

目标

您希望从 Windchill 中导出离线包以显示公司的品牌标识。

背景

从 Windchill 导出的离线包是包含导出文件的 zip 文件。随导出内容一起提供了一个离线查看器，可供用户在其 web 浏览器中浏览内容。

默认情况下，从 Windchill 中导出的离线包会在离线视图的标题中显示 Windchill 徽标和品牌。本文档将介绍如何更新安装服务器上的特定文件，以使导出的包显示公司的品牌标识。

范围/适用性/假设

利用此解决方案将更改从服务器导出的所有包的格式。它将影响从该服务器生成包的所有用户和组织。

预期结果

导出包中的离线视图会显示贵公司的最新品牌标识信息。

解决方案

更新静态资源 zip 文件中的 CSS 以设置离线视图标题的样式。

必备知识

要实现此目标，需要了解以下内容：

• 级联样式表。本指南假设您已熟练掌握如何指定和编写新 CSS 样式，而无需详细讲解如何编写正确的 CSS。

• 了解并访问贵公司的品牌标识标准。

解决方案元素

元素	类型	说明
resources.zip	Zip 文件	此 zip 文件包含在安装服务器生成的每个包中的 resources 文件夹所提供的静态元素。此文件位于服务器的 <Windchill>\codebase\com\ptc\netmarkets\wp\ixb 目录中。
wpofflinestyles.css	CSS 样式表	此 CSS 样式表包含在 resources.zip 文件中，其中包含用于控制离线视图外观的规则。
head.html	HTML 文件	在每一页顶部加载的 HTML 文件。
header.gif	GIF 图形文件	标题的背景图像
logoWC.gif	GIF 图形文件	Windchill 徽标的透明 GIF。

过程 - 更新标题的 CSS 样式

1. 找到 resources.zip 文件。该压缩文件位于 \codebase\com\ptc\netmarkets\wp\ixb 目录中，相对于您的 Windchill 安装根目录。通常，您可以使用环境变量 WT_ROOT 来定位根目录。

2. 在开始之前，请创建原始 resources.zip 的备份副本。

3. 将 resources.zip 解压缩到硬盘上的空文件夹。

4. 在 "resources" 文件夹中，您可以找到名为 "wpofflinestyles.css" 的文件。在您常用的 CSS 编辑器或文本编辑器中打开此文件。

5. 使用“自定义点”一节中列出的样式规则，编辑样式以自定义品牌标识标题的外观。

6. 您可能需要将更新的图形文件或其他资源添加到资源目录中，以支持更新后的样式。

7. 您可以将链接添加到 "pageHeaderActions" div 中的外部资源。默认情况下，这些链接显示在页面的右上角。例如，指向公司网站的链接。

8. 要测试 CSS 样式，请在浏览器中加载 "resources/head.html" 文件。Windchill 支持 Internet Explorer 6 和 Firefox 2，请务必在这两个浏览器中进行测试，以确保样式能够正常显示。请注意，以这种方式测试时，"generateTabs()" JavaScript 函数将无法正常工作，并且与之相关的错误可以忽略。

9. 对标题的外观感到满意后，请使用已更新的资源文件夹和工作文件夹中的文件来更新 resources.zip 文件。确保 zip 文件中的文件路径正确 - 所有文件的路径均应为 "resources\"。

10. 进行测试以确保包已正确生成，方法是从正在运行的服务器生成一些实验包并离线查看。

自定义点

CSS 规则	默认值	说明
.pageHeader	带有 Windchill 背景图像 (header.gif) 和深绿色底部边框的深青色背景。	定义标题的边框、背景图像和颜色。
.wncApplLogo	logoWC.gif	定义徽标图形文件。
.applLogo	高度：55 像素。	定义徽标 div 的高度，通常显示在页面的左上角。
.pageHeaderActions (wpofflinestyles.css 中的 CSS 规则)	白色文本链接。	通常在页面的右上角定义链接和文本的样式。
pageHeaderActions(head.html 中的 div)	已交付为空	可将链接添加到此 div。

限制

以这种方式更新 resources.zip 文件会影响由系统创建的每个离线包。当前不支持将这些更改仅应用到一个包，而不应用到其他包。在服务器上，不能在创建包后对其进行修改。

示例代码

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

这对您有帮助吗?