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.