Skip to main content link. Accesskey S
  • HCL Logo
  • HCL Connections On-Premise Wiki
  • THIS WIKI IS READ-ONLY.
  • HCL Forums and Blogs
  • Home
  • API Documentation
Search
Community Articles > Customization > Quick customization and rebranding of Connections V5.0
  • Share Show Menu▼

Recent articles by this author

Quick customization and rebranding of Connections V5.0

In this article, you will gain an understanding of how you can quickly customize and rebrand Connections for your organization.

Synchronizing Community folders to Mini PC/ Smart TV in Connections V5.0

In this article, you will gain an understanding of how you can synchronize Connections V5.0 community files and folders to client devices programmatically, by which you can broadcast files of various types. You will also learn how you can use Connections APIs to fetch desired atom feed ...
Community articleQuick customization and rebranding of Connections V5.0
Added by ~Rex Kifoosonings | Edited by ~Rex Kifoosonings on November 22, 2015 | Version 3
  • Actions Show Menu▼
expanded Abstract
collapsed Abstract
In this article, you will gain an understanding of how you can quickly customize and rebrand Connections for your organization.
Tags: Connections, Customization, Branding

IBM Connections brings social networking to the enterprise, allowing you to communicate, collaborate, and build strong relationships with others. Whether you want to share important information, build a network of useful contacts, or follow people that interest you, there is an application for you.

In this article, you will gain an understanding of how you can quickly customize and rebrand IBM Connections for your organization.

Before you start, you must have following software installed:

  • IBM Connections V5.0 with CR05

You should also be familiar with basic UI development with CSS knowledge.

Most of the changes that you make to product files are stored in the customization directory, the location of which is defined by the IBM WebSphere® Application Server variable, CONNECTIONS_CUSTOMIZATION_PATH (Referred as customizationDir hereafter). It is best practice to make your customization changes within the customization directory only. Changes that cannot be made using the customization directory are known as product modifications.

 

Figure 1.1

The type of changes that you can make using the customization directory include:

  • Changes to static files, such as images, CSS, HTML, and text files.
  • Changes to real files, that is, files that are not generated at runtime and which get served directly to the browser.
  • Changes to JSP files using a standard include request, for example, and

The procedure to customize IBM® Connections is the same for each application. You must edit a copy of the relevant source file and save it in the appropriate customization directory.

Let’s begin with following steps:

Changing common product strings

To customize the source properties files, you must first extract the contents of the JAR file files using a compression program from installedApps directory of your deployment. Your installedApps directory should contain applications as below:

Figure 1.2

 

The customized files should be saved in the customizationDir/strings/customized_properties_file_name directory, where any slashes in the source file name location are replaced by dots.

For example, when you customize the ui.properties source file for Blogs from the Blogs.ear/blogs.war/WEB-INF/classes/com/ibm/lconn/blogs/strings/ui.properties source location, you must save the customized properties file in the following location: customizationDir/strings/com.ibm.lcon.blogs.strings.ui.properties.

 

Let’s change following product strings highlighted as below including Page title text which comes in browser:

 

Figure 1.3

 

To do this extract templates.properties file from Common.ear\lc.util.web-3.0.jar\com\ibm\lconn\core\strings\

 

Rename templates.properties to com.ibm.lconn.core.strings.templates.properties

 

Replace all Strings “IBM Connections” with your organization preferred name ex: “XYZ Social” in com.ibm.lconn.core.strings.templates.properties

 

Update or remove existing value for license text for following keys in com.ibm.lconn.core.strings.templates.properties

 

login.legal=your legal text

label.legal.copyright=your copyright text

Copy com.ibm.lconn.core.strings.templates.properties to customizationDir/strings directory

 

Let’s change Home page related product strings as highlighted below including Homepage title text which comes in the browser:

 

Figure 1.4

 

To do this extract jsp_resources.properties file from

Homepage.ear\homepage.war\WEB-INF\lib\homepage.utils.jar\com\ibm\lconn\homepage\resources\nls\jsp\

 

Rename jsp_resources.properties to com.ibm.lconn.homepage.resources.nls.jsp.jsp_resources.properties

 

Replace all Strings “IBM Connections” with your organization preferred name ex: “XYZ Social” in com.ibm.lconn.homepage.resources.nls.jsp.jsp_resources.properties

 

Copy com.ibm.lconn.homepage.resources.nls.jsp.jsp_resources.properties to customizationDir/strings directory

 

 

Changing logo and banner images

Figure 1.5

 

To achieve changes highlighted in the figure 1.5 copy logo image to the following location

 

customizationDir/javascript/com/ibm/lconn/core/styles/images/logo.gif

 

Create custom.css file in customizationDir/themes

 

Add following CSS class to custom.css to update logo highlighted as point 1 in figure 1.5

 

.lotusui30 .lotusBanner .lotusLogo {

            background-image: url("/com.ibm.lconn.core.styles/images/logo.gif");

            height: 100px;

            width: 240px;

}

 

To remove IBM logo on right add following CSS class to custom.css highlighted as point 2 in figure 1.5

 

.lotusui30 .lotusBanner .lotusIBMLogo {

 display: none;

}

 

Changing color schemes

 

To change NAV bar color add following CSS class to custom.css highlighted as point 3 in figure 1.5

 

.lotusui30 div.lotusBanner .lotusRightCorner{

            background: #fff none repeat scroll 0 0;

            border-bottom: none;

            overflow: hidden;

            filter: none;

}

 

 

To remove IBM Connections word add following CSS class to custom.css

 

.lotusui30 .lotusBanner .lotusLogo .lotusAltText {

            display: none;

}

 

To change share button color scheme add following CSS class to custom.css

 

.lotusui30 .lotusBanner ul.lotusInlinelist #headerSharebox{

            background: none;

            border-color: none;

            border-style: none;

            border-width: 0px;

            box-shadow: none;

            filter: none;

 

}

 

Stop IBM Connections services and clean temp and wstemp of individual server profiles and start the servers for the changes to take effect.

 

We have successfully customized IBM Connections common login screen as shown in Figure 1.6 below

Figure 1.6

 

Once you login, you’ll see the customization taking effect for the IBM Connections Homepage screen as shown in Figure 1.7 below:

Figure 1.7

 

About author:

 

Sushant Naik is an IBM certified senior IT specialist (Portal and Collaboration) working with Lab services division of India Software Labs. His skills and interests include WebSphere Portal, Web Experience Factory, Lotus® Forms, Lotus® Connections, Lotus Sametime®, Java / JEE and Eclipse development. You can reach him at sushnaik@in.ibm.com.

 

 


  • Actions Show Menu▼


expanded Attachments (1)
collapsed Attachments (1)
Edit the article to add or modify attachments.
File TypeSizeFile NameCreated OnDelete file
application/pdf 20 KB SampleFilesArchive.pdf 11/22/15, 4:33 PM
expanded Versions (1)
collapsed Versions (1)
Version Comparison     
VersionDateChanged by              Summary of changes
This version (3)Nov 22, 2015, 4:59:41 PM~Rex Kifoosonings  
expanded Comments (0)
collapsed Comments (0)
Copy and paste this wiki markup to link to this article from another article in this wiki.
Go ElsewhereStay ConnectedAbout
  • HCL Software
  • HCL Digital Solutions community
  • HCL Software support
  • BlogsDigital Solutions blog
  • Community LinkHCL Software forums and blogs
  • About HCL Software
  • Privacy
  • Accessibility