Practice: Customization overview for IBM Connections 3.0.1

Branding IBM Connections

IBM Connections is social software for business, offering Profiles, Communities, Blogs, Files, Wikis, Activities, and Bookmarks. In this practice exercise, learn how you can brand and customize the IBM Connections user experience to meet your business needs.

Brian Ochs (bochs@thinksis.com), Solution Architect, Software Information Systems

Brian Ochs photoBrian Ochs is a solution architect at Software Information Systems, an IBM Premier Business Partner. He specializes in customer implementations of IBM Connections and IBM WebSphere Portal. He has been working with Connections since the initial release and is the coauthor of the IBM Connections 3.0.1 Customization Redbook.



28 August 2012

Also available in Chinese Russian Portuguese

Overview

IBM Connections 3.0.1 supports changing many aspects of the user interface (UI) without altering the source code of the installed web applications. You customize the UI by using the layout tools integrated with the page or by overriding the installation files in a special customization directory.

Prerequisites

The following practice exercises require access to an IBM Connections 3.0.1 server. You can complete Exercise 1 without server administration rights, but Exercise 2 requires direct access to the server with administrative privileges. You should also have a basic understanding of HTML and cascading style sheets (CSS).


Exercise 1: Update the page layout

You can modify the page layout for the Home page and Communities applications without changing any code. IBM Connections includes menus on each page widget to control the page layout.

Perform the following tasks to update the page layout:

  1. Modify the page layout of the Home page using the widget menus.
  2. Modify the page layout on a Community page using the widget menus.
  3. Use the widget palette to add new widgets to a Community page.

Exercise 2: Customize the page header

With a bit more effort and some knowledge of HTML and CSS, you can make more changes to brand the page header across all of the IBM Connections applications.

Perform the following tasks to customize the page header:

  1. Replace the default logo with a new image file.
  2. Change the color palette from the default color scheme to a red scheme.

Solutions for Exercise 1: Update the page layout

The sections that follow provide the solutions for each of the three tasks in Exercise 1.

Change the layout of the Home page

To change the layout of the Home page, complete the following steps:

  1. Navigate to the IBM Connections Home page application (typically, http://<servername>.<yourcompany>.com/homepage).
  2. Log in, and then click the Widgets tab.
  3. Use the widget menu at the top right of any widget to change the location of that widget, as shown in Figure 1.
    Figure 1. The Home page widget menu
    Image showing the Home page widget menu

Change the layout on a Community page

You can modify the Community page layout only if you are the Community owner. Modifying the layout changes the page for all users of the community.

To change the layout on a Community page, complete the following steps:

  1. Log in to the Communities application, which is typically found at http://<servername>.<yourcompany>.com/communities.
  2. Use the My Communities menu to select a community that you own.
  3. Use the widget menu at the top right of any widget to change the location of that widget, as shown in Figure 2.
    Figure 2. The Community widget menu
    Image showing the Community widget menu

Add a new widget to a Community page

You can add new widgets the Community page layout only if you are the Community owner. The new widget will be displayed on the page for all users of the community.

To add a new widget to a Community page, complete the following steps:

  1. Log in to the Communities application, which is typically found at http://<servername>.<yourcompany>.com/communities.
  2. Use the My Communities menu option to select a community that you own.
  3. Click Community Actions > Customize to open the widget palette, shown in Figure 3.
    Figure 3. The Community Customize menu
    Image showing the Community Customize menu
  4. Click the plus sign (+) next to a widget to add it to the page, as shown in Figure 4.
    Figure 4. The Community widget palette
    Image showing the Community widget palette

Solutions for Exercise 2: Customizing the page header

The sections that follow provide the solutions for the two tasks in Exercise 2.

Replace the logo

To replace the logo, complete the following steps:

  1. Create a logo using any image editor, or use an existing web-ready image.
  2. Create a directory named images in the customization directory specifically at customization_directory\common\nav\common\styles\images.
  3. Copy the image file you created in step 1 to the new images directory, as shown in Figure 5.
    Figure 5. Customization directory for the logo
    Image showing the customization directory for the logo
  4. Override the style sheet for the default theme to match your new logo by creating a directory named defaultTheme in the customization directory at customization_directory\common\nav\common\styles\.
  5. Create a blank style sheet called custom.css in the defaultTheme directory.
  6. Add the following styles to the custom.css file to override the lotusLogo and lotusLoginLogo classes. Change the height and width values to match your image:
    /* 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. Restart the IBM Connections server, and clear your browser cache to see the changes.

Change the color palette

To change the color palette, complete the following steps:

  1. Open the custom.css style sheet in the common customization directory that you created in the previous task.
  2. In the custom.css file, locate the style rules for the sections of the page with accent colors you want to change.
  3. Modify the colors in the custom.css file.

    For example, modify the colors from light blue to red:

    /* 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. Save the custom.css file.
  5. Restart the IBM Connections server, and clear your browser cache to see the changes (see Figure 6).
    Figure 6. Sample header customization
    Image showing the sample header customization

Resources

Learn

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into IBM collaboration and social software on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Lotus
ArticleID=827930
ArticleTitle=Practice: Customization overview for IBM Connections 3.0.1
publish-date=08282012