基本自定义 > 用户界面自定义 > 通用 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;}