实践:IBM Connections 3.0.1 的定制概述

品牌化 IBM Connections

IBM Connections 是面向业务的社交软件,提供了 Profiles、Communities、Blogs、Files、Wikis、Activities 和 Bookmarks。在此实践练习中,将学习如何品牌化和定制 IBM Connections 的用户体验,从而满足您的业务需求。

Brian Ochs, 解决方案架构师, Software Information Systems

Brian Ochs 的照片Brian Ochs 是 IBM 顶级业务合作伙伴 Software Information Systems 的一名解决方案架构师,专门从事 IBM Connections 和 IBM WebSphere Portal 的客户实现。他从最初的版本开始一直在使用 Connections,并且是 IBM Connections 3.0.1 Customization Redbook 的合著者。



2013 年 1 月 18 日

概述

IBM Connections 3.0.1 支持更改其用户界面 (UI) 的多个方面,并且无需更改已安装的 Web 应用程序的源代码。通过使用与页面集成的布局工具,或通过在特殊定制目录中覆盖安装文件,您可以定制 UI。

先决条件

以下实践练习需要访问 IBM Connections 3.0.1 服务器。即使没有服务器的管理权限,也可以完成练习 1,但练习 2 需要使用管理特权直接访问服务器。您还应该对 HTML 和级联样式表 (CSS) 有基本的了解。


练习 1:更新页面布局

您不需要修改任何代码就可以修改 Home 页面和 Communities 应用程序的页面布局。IBM Connections 让每个页面小部件上都包含了菜单,以控制页面布局。

执行以下任务来更新页面布局:

  1. 使用小部件菜单来修改 Home 页面的页面布局。
  2. 使用小部件菜单来修改 Community 页面上的页面布局。
  3. 使用小部件面板将新的小部件添加到 Community 页面。

练习 2:定制页眉

通过多一点的努力以及 HTML 和 CSS 方面的一些知识,您就可以进行更多的更改,以品牌化所有 IBM Connections 应用程序的页眉。

执行以下任务来定制页眉:

  1. 用一个新的图像文件替换默认徽标。
  2. 将调色板从默认的配色方案更改为红色的方案。

练习 1 的解决方案:更新页面布局

以下各节为练习 1 中的三个任务分别提供了解决方案。

更改 Home 页面的布局

要更改 Home 页面的布局,需要完成以下步骤:

  1. 导航至 IBM Connections Home 页面应用程序(通常是 http://<servername>.<yourcompany>.com/homepage)。
  2. 登录,然后单击 Widgets 选项卡。
  3. 使用任何小部件右上角的小部件菜单来更改小部件的位置,如 图 1 所示。
    图 1. Home 页面的小部件菜单
    本图显示了 Home 页面的小部件菜单

更改 Community 页面的布局

只有 Community 所有者可以更改 Community 页面布局。更改布局会更改社区所有用户的页面。

要更改 Community 页面的布局,需要完成以下步骤:

  1. 登录到 Communities 应用程序,其地址通常是 http://<servername>.<yourcompany>.com/communities。
  2. 使用 My Communities 菜单,选择您所拥有的一个社区。
  3. 使用任何小部件右上角的小部件菜单来更改小部件的位置,如 图 2 所示。
    图 2. Community 小部件菜单
    本图显示了 Community 小部件菜单

将新的小部件添加到 Community 页面

只有 Community 所有者可以将新的小部件添加到 Community 页面布局。新的小部件将显示在社区所有用户的页面上。

要将新的小部件添加到 Community 页面,需要完成以下步骤:

  1. 登录到 Communities 应用程序,其地址通常是 http://<servername>.<yourcompany>.com/communities。
  2. 使用 My Communities 菜单选项,选择您所拥有的一个社区。
  3. 单击 Community Actions > Customize 打开小部件面板,如 图 3 所示。
    图 3. Community Customize 菜单
    本图显示了 Community Customize 菜单
  4. 单击小部件旁边的加号 (+) 将它添加到页面,如 图 4 所示。
    图 4. Community 小部件面板
    本图显示了 Community 小部件面板

练习 2 的解决方案:定制页眉

以下各节为练习 2 中的两个任务分别提供了解决方案。

替换徽标

要替换徽标,需要完成以下步骤:

  1. 使用图像编辑器创建一个徽标,或者使用现有的 Web 就绪图像
  2. 在定制目录中专门创建一个名称为 images 的目录,其路径为 customization_directory\common\nav\common\styles\images
  3. 将您在第 1 步中创建的图像文件拷贝到新的 images 目录,如 图 5 所示。
    图 5. 徽标的定制目录
    本图显示了徽标的定制目录
  4. 覆盖默认主题的样式表,使之匹配您的新徽标,方法是在定制目录中创建一个名称为 defaultTheme 的目录,其路径为 customization_directory\common\nav\common\styles\
  5. defaultTheme 目录中创建一个名称为 custom.css 的空白样式表。
  6. 将以下样式添加到 custom.css 文件,以便覆盖 lotusLogolotusLoginLogo 类。修改 heightwidth 的值,使之匹配您的图像:
    /* Replace the standard logo file name with the new logo file name */
    .lotusui .lotusLogo, .lotusLoginLogo {
    background-image: url("../images/new_logo.png"); 
    height: 66px; 
    width: 306px;}
    
    /* We want the logo to be above the navigation links
    and centered in the top section */
    .lotusui .lotusLogo, .lotusLoginLogo {
    float: none; 
    margin-bottom: 4px;}
                
    /* Align the navigation links with the new logo */
    .lotusui .lotusLinks {
    margin-left: 70px; 
    margin-top: -5px;}
  7. 重启 IBM Connections 服务器,并清空您的浏览器缓存,以查看更改。

更改调色板

要更改调色板,需要完成以下步骤:

  1. 在公共定制目录中打开您在 上一个任务 中创建的 custom.css 样式表。
  2. custom.css 文件 中,找到您想改变强调颜色的页面部分的样式规则。
  3. 在 custom.css 文件中更改颜色。

    例如,将颜色从浅蓝色修改为红色:

    /* Make the title bar red */
    .lotusTitleBar {
    margin:0;
    border-bottom:8px solid #fff;
    background-color:#db1e24;
    background-image:-moz-linear-gradient(#e9787c 0, #e9787c 1px, 
    #e66166 1px, #dd292f 50%, #d01d22 50%, #af181d 100%);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#e9787c),
    to(#af181d), color-stop(.03, #e9787c), color-stop(.03, #e66166),
    color-stop(50%, #dd292f), color-stop(50%, #d01d22), color-stop(100%, #af181d));
    -moz-border-radius:0;-webkit-border-radius:0;border-radius:0;}
                
    /* Make the tab bar red */
    .lotusTitleBar .lotusTabs li {
    border-bottom-color:#831216;background-color:#af181d;}
                
    .lotusTitleBar .lotusSearch .lotusScope, .lotusTitleBar
    .lotusSearch .lotusBtnImg{background-color:#af181d;color:#fff;}
    
    /* Make the selected left navigation red */
    .lotusMenu li.lotusSelected a, .portlet-menu li.lotusSelected a,
    .lotusMenu h3.lotusSelected, .portlet-menu h3.lotusSelected {
                
    color:#fff  !important;margin:0;
    padding-left:20px;
    background-color:#db1e24;
    background-image:-moz-linear-gradient(#e66166 0%, #af181d 100%);
    background-image:-webkit-gradient(linear, left top, left bottom,
    from(#e66166), to(#af181d));
    
    border-width:1px 0;
    border-color:#831216;}
                
    /* Make the welcome text red */
    .lotusWelcomeBox {
    background-color:#FCEAEA;border-color:#C6BABA;}
  4. 保存 custom.css 文件。
  5. 重启 IBM Connections 服务器,并清空您的浏览器缓存,以查看更改。(参见 图 6)。
    图 6. 页眉定制的样例
    本图显示了页眉定制的样例

参考资料

学习

讨论

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Lotus
ArticleID=855413
ArticleTitle=实践:IBM Connections 3.0.1 的定制概述
publish-date=01182013