2.1 Matching the user interface to your company brand and policies 

Previous | Next

You can modify IBM Connections to match the images and user interface (UI) guidelines associated with your brand. For example, you can change the navigation bar by changing the logo image. You can also add links and menu items to your own resources in the navigation bar and footer. You can also change the default colors in many user interface elements. You can also modify applications and pages to support policies at your company. An example of this type of change is adding procedures to agree to corporate policies before getting access to IBM Connections. You make these changes by overriding files installed with IBM Connections and saving the modified files to a customization directory. Removing your changed files from the customization directory reverts IBM Connections to the default.

Tip: Because user interface customization is implemented through HTML using JavaServer Pages and cascading style sheets (CSS), it is helpful to have familiarity with these technologies and know how to make basic changes to CSS and JSP files.

In the procedures in the next sections, we change the user interface so that it looks like the following figure.

Customizing the navigation bar

Matching the navigation bar to your brand often involves changing the logo image, adding or modifying links, and changing the colors. You make these changes by adding and copying files to the customization directory and changing the files to match your brand. Files in the customization directory override the default files used by IBM Connections.

Customizing the logo

The logo image is displayed using a background image. This technique allows you to customize the logo image in the navigation bar in a CSS file rather than by changing HTML markup throughout the product. To customize the logo, you copy your logo image to the appropriate customization directory. Then you point the navigation bar to use the new logo image, and set the height and width to match the dimensions of the new image. In our example, we also add some padding and adjust the styles so that the application links align with the new logo. As with other user interface customization, you can modify the logo for all applications or for a subset of applications.

Before you begin

• Turn on the customization debugging capability so that you can view your changes without having to restart the IBM Connections server. For more information about customization debugging, see 1.2 IBM Connections customization variables.
• Decide whether you want to replace the logo in all applications or in a subset of the applications. This procedure assumes that you change the logo for all applications. For more information about customizing a specific application, see 1.1 How customization works.
• Create or get access to the logo image you want to use.

Procedure

1. Create an "images" directory in the customization directory <customizationDir>\common\nav\common\styles\.
2. Copy your image file to the new images directory.
3. (Optional) Verify that the image appears in your browser. View the image at http:// <server>:<port> /files/nav/common/styles/images/<imageFileName>
4. Override the style sheet for the default theme to match your new logo:
1. Create a "defaultTheme" directory at <customizationDir>\common\nav\common\styles\.
2. Open the custom.css style sheet (or create a blank style sheet) in the common customization directory at <customizationDir>\common\nav\common\styles\defaultTheme\.
3. Add the following styles to the custom.css style sheet to override the lotusLogo and lotusLoginLogo classes in the style sheet for the default theme. Change the height and width values to match your image.
   

   /* Replace the standard logo with the new logo */
   

   .lotusui .lotusLogo, .lotusLoginLogo {background-image: url("../images/toolbar_logo.gif"); height: 66px; width: 306px;}
   

   /* We want the logo to be above the navigation links, and for the logo to be 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;}

5. Modify the alternative text for your logo in header.jsp.
1. Create a directory called "templates" at <customizationDir>\common\nav\.
2. Copy the header.jsp file from an application source directory to the new templates directory. The header.jsp files are identical in all the source directories. For example, copy the header file from <WAS_home>\Activities.ear\oawebui.war.\nav\templates.
3. In your copy of the header.jsp file in the customization directory, locate the class attribute “lotusAltText” in the span tag.
4. Modify the value from “IBM Connections” to one that identifies your brand.
5. Save the header.jsp file.
6. Publish your changes when you are ready to make the changes available to others. In this example, the changes apply across all applications, so update the IBM Connections configuration files. For more information about publishing changes, see 1.4 Publishing customizations with the wsadmin tool.

Adding a link or a menu to the navigation bar

To add a link to the navigation bar with IBM Connections 3.0.1, you add an HTML anchor tag to the header.jsp file in the customization directory. In addition to a static link, with IBM Connections 3.0.1, the navigation bar supports JavaServer Pages. Support for JSP Pages means that you can add a menu to the navigation bar by calling JSP files.

Adding application links to the navigation bar in IBM Connections 3.0.1 is different from earlier versions. The header.jsp file no longer uses the macro "{{application links: li }}". You can add a simple HTML link with the code by adding an HTML anchor tab. For example,
In our example, we change the color of the link.

Before you begin

• Turn on the customization debugging capability so that you can view your changes without having to restart the IBM Connections server. For more information about customization debugging, see 1.2 IBM Connections customization variables.
• Ensure that you have a custom header.jsp file in the customization directory, for example, at <customizationDir>\common\nav\templates. For more information about creating a custom header file, see the procedure Customizing the logo.
• Decide whether you want to modify the navigation bar in all applications or in a subset of the applications. This procedure assumes that you change the navigation bar for all applications. For more information about customizing a specific application, see 1.1 How customization works.

Procedure
In this procedure, you modify the navigation bar for all the applications by adding a menu below the logo and a link to a support forum in the upper right next to the Help menu. You move the logo image down in the navigation bar so that the log in and log out links appear on the left.
As with other user interface customization, you can modify the navigation bar for all applications or for a subset of applications.

1. Navigate to <customizationDir>\common\nav\templates and open your copy of the header.jsp file in a text editor.
2. Add a link to your company support forum to the navigation bar on the right by adding an HTML anchor tag. Set the text color to red.
1. Locate the following section in your copy of the header.jsp file.

2. --%><div class="lotusRightCorner">

3. Add an HTML anchor tag:
   

   --%><li><a style="color: #FF5656;" href="http://www.example.com/supportforums">Support Forum</a></li><%--

3. Add a menu within the <ul> links section. This example creates a menu to an Intranet. A good way to add a menu is to copy an existing definition (such as the Profiles menu) from the default header.jsp file and change the labels and identifiers. The most important attribute to change is the "src" attribute on the link. The JavaScript that implements the menu uses this attribute to get the content for the menu.
   

   ************************************************************************
   

   Example: Show an Intranet menu
   

   The JavaScript that implements the menu uses this attribute to get the content
   

   for the menu. In this example the "src" attribute uses a help JSP tag provided 
   

   by the IBM Connections team to build the correct URL.  If the content of your 
   

   menu is always static (it does not change based on user or other dynamic logic) 
   

   you can build the URL with this code, which ensures that the menu content is 
   

   cached in the user's browser and so loads faster.
   

               <lc-cache:uri template="{staticLanguageRoot}/nav/templates/menu/intranet.jsp" />
   

   The "role", "aria-owns", and "aria-label" attributes are used by accessibility 
   

   programs to display information in alternative means.  They are provided here as 
   

   an example that is compliant with other accessible guidelines.
   

   ************************************************************************
   

   --%><li id="lotusBannerRenovations" class="lotusFirst"><%--             
   

      --%><a onmouseover="dojo.require('lconn.core.header');lconn.core.header.menuMouseover(this);" 
   

         onclick="dojo.require('lconn.core.header');lconn.core.header.menuClick(this);" 
   

         onfocus="dojo.require('lconn.core.header');lconn.core.header.menuFocus(this);" 
   

         role="button" aria-owns="lconnheadermenu-renovations" aria-label="Renovations Intranet" 
   

         src="<lc-cache:uri template="{contextRoot}/nav/templates/menu/intranet.jsp" />"
   

         href="http://ibm.com"><%--
   

         --%>Intranet<%-- 
   

         --%> <img role="presentation" alt="" src="<lc-cache:uri template="{staticRoot}/nav/common/styles/images/blank.gif" />" 
   

            class="lotusArrow lotusDropDownSprite"><span class="lotusAltText">&#9660;</span><%--
   

      --%></a><%-- 
   

   --%></li><%-- 
   

   --%><c:set var="first" value="false" scope="page" /><%-- 
   

   *** End Example 
   

   ************************************************************************

4. Save your copy of the header.jsp file.
5. Publish your changes when you are ready to make the changes available to others. For more information about publishing changes, see 1.4 Publishing customizations with the wsadmin tool.

Modifying theme colors

When matching your corporate brand, you are likely to want to change the overall look of the user interface in IBM Connections, for example, by changing the colors and font styles. As with other user interface customizations, you make changes to style sheets in the customization directory. Changes made to the styles in the customization directory override the main default theme style rules. In our example, we copy style rules from defaultTheme.css and add them to the custom.css file, changing some background colors, gradients, and borders. You can find the full set of colors used in IBM Connections in the defaultTheme.css file.

In our example, we change the colors from light blue to red across all the applications, modifying style rules from the default style sheet. Some applications define styles and colors beyond those that are specified in the default style sheet. These additional and application-specific styles are defined in files named after the applications, for example activities.css. To customize a user interface control that is only used in Activities, you might need to edit the activities.css file. To force IBM Connections to use your copy of the activities.css file, you save the file in the defaultTheme customization directory for Activities. For more information about customizing a specific application, see 1.1 How customization works.

Procedure

1. Turn on the customization debugging capability so that you can view your changes without having to restart the IBM Connections server. For more information about customization debugging, see 1.2 IBM Connections customization variables.
2. Open the style sheet for the default theme in a text editor. The default theme style sheets are named defaultTheme.css, are identical, and are stored in the application source directories. For example, <WAS_home>\Activities.ear\oawebui.war.\nav\common\styles\defaultTheme\defaultTheme.css.
3. Create or open a style sheet in the common customization directory.
1. Create a "defaultTheme" directory at <customizationDir>\common\nav\common\styles\.
2. Open the custom.css style sheet (or create a blank style sheet) in the common customization directory at <customizationDir>\common\nav\common\styles\defaultTheme\.
   Tip: If you are making more extensive style updates, consider modifying your copy of the defaultTheme.css file in the customization directory to simplify maintaining the changes.
4. Copy the default styles to the custom style sheet and override the colors:
1. In the defaultTheme.css file, locate the style rules for the sections of the page with accent colors you want to change. For example, the title bar and left navigation
   Tip: Identifying which style sheet attributes control which elements can be difficult. Use a tool such as Firebug to locate what to change.
2. Copy those rules to the custom.css file.
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 more red */
   

   .lotusWelcomeBox{background-color:#FCEAEA;border-color:#C6BABA;}

5. Save the custom.css file.
6. Publish your changes when you are ready to make the changes available to others. For more information about publishing changes, see 1.4 Publishing customizations with the wsadmin tool.

Customizing the footer

When matching your corporate brand, you might want to add links or images to the footer of IBM Connections. For example, you might add links to your corporate website. As with the navigation bar, the footer in IBM Connections 3 supports JavaServer Pages, so you can add a menu to the footer. In our example, we modify the footer for all the applications by adding links to the right of the link to the IBM Connections home page. As with other user interface customizations, you can modify the footer for all applications or for a subset of applications.

Before you begin

• Turn on the customization debugging capability so that you can view your changes without having to restart the IBM Connections server. For more information about customization debugging, see 1.2 IBM Connections customization variables.
• Create a directory called "templates" at <customizationDir>\common\nav\.

Procedure

1. Copy the footer.jsp file from an application source directory to the new templates directory. The footer.jsp files are identical in all the source directories. For example, copy the footer file from <WAS_home>\Activities.ear\oawebui.war.\nav\templates.
2. In your copy of footer.jsp in the customization directory, locate the tag that begins <lc-ui:templateLink key="connections.demo".
3. Add links, menu items, or images to the footer. This example adds two links to the footer.
   

   --%><lc-ui:templateLink key="connections.demo" appname="${appName}"><fmt:message key="label.footer.connections.demo" /></lc-ui:templateLink><%--
   

   ************************************************************************
   

   Example: Add corporate links to the footer
   

            --%><li><%--
   

               --%><a href="http://www.example.com" /><%--
   

               --%>Renovations home<%--
   

               --%></a><%--
   

            --%></li><%--
   

            --%><li><%--
   

               --%><a href="http://www.example.com/contact" /><%--
   

               --%>Contact Renovations<%--
   

               --%></a><%--
   

            --%></li><%--
   

   *** End Example
   

   ************************************************************************

4. Save the footer.jsp file.
5. Publish your changes when you are ready to make the changes available to others. For more information about publishing changes, see 1.4 Publishing customizations with the wsadmin tool.

Customizing the login page

To support a requirement in your organization that each person who logs into IBM Connections agrees to a corporate policy before getting access to the site, you can customize the login page. For example, you might display a link to the agreement on the login page, include a check box on the page that indicates agreement with the policy, and configure the log in button to be disabled until the user selects the check box. In addition, you might want to add informational messages to the left side of the login page, such as maintenance schedules.

This procedure makes these changes as shown in this screen capture.


Before you begin

• Turn on the customization debugging capability so that you can view your changes without having to restart the IBM Connections server. For more information about customization debugging, see 1.2 IBM Connections customization variables.
• Create a directory called "templates" at <customizationDir>\common\nav\.

Procedure
To add a click-through agreement to the login page in this example, you modify the login.jsp file by adding JavaScript to disable the login button until the user selects a check box. This example uses client-side validation. To make this feature more secure, you can use server-side validation to help prevent a user from bypassing the check box. To change the text on the left side of the login page, you modify that section of the login.jsp file.

1. Copy the login.jsp file from an application source directory to the new templates directory. The login.jsp files are identical in all the source directories. For example, copy the file from <WAS_home>\Activities.ear\oawebui.war.\nav\templates.
2. In your copy of login.jsp in the customization directory, locate the section that begins with the tag <div class="lotusLoginContent">. This section defines the left column of the login page.
3. Delete the section that refers to login.description.
   
4. Add the text that you want to appear. This example adds an announcement about the next scheduled maintenance.
   

               <%--
   

               ************************************************************************
   

               Example: Change the informational text
   

               ************************************************************************
   

               --%>
   

               <h2>Next scheduled maintenance</h2>
   

               <p>Thursday, January 12th 2012 from 11:00PM EST to 11:59PM EST.</p>
   

               <%--
   

               *** End Example
   

               ********************************************************
   

               --%>

5. Locate the end of the section that displays the user name and password.
   
6. Add a the HTML that displays the click-through check box. You also hide the IBM logo that appears near the login button.
   

               <%-- 
   

               ************************************************************************
   

               Example: Add a click-through agreement to the login page
   

               This section adds a simple example of a click through agreement that uses JavaScript to
   

               enable or disable the login button depending on the state of a check box.
   

               ************************************************************************
   

               --%>
   

               <p style="color: #af181d;">
   

                    IMPORTANT: Renovations confidential information may be shared in this Community. You must certify that you agree to the terms of use before logging in..
   

               </p>
   

               <p class="lotusFormField">
   

                    <input id="confirm" class="lotusCheckbox" onclick="acceptedAgreement(this);" type="checkbox">
   

                    <label for="confirm" class="lotusCheckbox">I agree with the Renovations terms of use posted at <a href="http://www.example.com/terms/renovationsconfidentiality/">http://www.example.com/terms/renovationsconfidentiality/</a>.</label>
   

               </p>
   

               <%--
   

               *** End Example ***********************************************************
   

               ************************************************************************
   

               Example: Hide the IBM logo
   

               When rebranding for the Renovations site the IBM logo is removed by commenting out the HTML markup.
   

               ************************************************************************
   

               <span class="lotusRight" aria-hidden="true"><img role="presentation" src="<lc-cache:uri template="{staticRoot}/nav/common/styles/images/blank.gif" />" alt="IBM" class="lotusIBMLogo"><span class="lotusAltText">IBM</span></span>
   

               *** End Example ***********************************************************
   

               --%><

7. Locate the end of the table tag: <fmt:message key="login.legal" /></td></tr></table>.
   
8. After the table tag, add the JavaScript code that disables the login button until the user selects a check box.
   

               <%--
   

               ************************************************************************
   

               Example: Add a JavaScript function that makes the submit button enabled or disabled
   

               Supporting JavaScript for the checkbox above.
   

               ************************************************************************
   

               --%>
   

               <script>
   

                    function acceptedAgreement(checkbox) {
   

                         var button = document.getElementById('submitButton');
   

                         if (checkbox.checked) {
   

                              button.className = "lotusBtn lotusBtnSpecial";
   

                              button.disabled = false;
   

                         }
   

                         else {
   

                              button.className = "lotusBtn lotusBtnSpecial lotusBtnDisabled";
   

                              button.disabled = true;
   

                         }
   

                    }
   

               </script>
   

               <%--
   

               *** End Example ********************************************************
   

               --%>

9. Save the login.jsp file.
10. Clear your browser cache.
11. Load the login page (http://<server>:<port>/homepage/login/ to test your changes.
12. Publish your changes when you are ready to make the changes available to others. For more information about publishing changes, see 1.4 Publishing customizations with the wsadmin tool.

Customizing error pages

The page that is displayed to IBM Connections users when an error is detected is defined in the error.jsp file. You can customize the message strings, override how particular error conditions are handled, and change the look of the error page itself. The error.jsp file is stored in the templates directory within the source application WAR file. The installed error.jsp file is identical in all the source directories, for example, you can find the file in the Activities application at <WAS_home>\Activities.ear\oawebui.war\nav\templates\.

The error.jsp file has many comments that help identify how you can customize it. The file begins with a list of the attributes that can be passed to it. For example, the errorActions attribute specifies one or more actions that a user can take, along with a link that the user can click. You can customize these actions to help your users understand what they should do when they encounter an error. For more information about the attributes that can be passed to JSP page, see the error.jsp file itself.

The next section in the error.jsp file begins with a <c:choose> tag and contains a set of <c:when> conditions that trigger error messages. You can change the conditions in these sections to customize the error messages. Most of the strings in the error messages are stored in the com.ibm.lconn.core.strings.templates properties file. You can override these error messages by following the procedure to change product strings. For more information, see 2.2 Customizing product strings. If you are not concerned with globalizing the changes you make, you can override the string by making changes directly in the error.jsp file.

The bottom section of the error.jsp file that begins with the “lotusErrorForm” class defines the HTML of the error page. You can change any of the HTML to make the error message specific to your branding or policies. For example, these lines specifies how the details of the error appear so that users can send the information to an administrator at your company:


As with other customization changes in IBM Connections, save the modified error.jsp file in the customization directory. In most case, you want the changes to apply to all IBM Connections applications, so save the file to the common customization directory: <customizationDir>\common\nav\templates. For more information about customizing a specific application, see 1.1 How customization works. Update the version stamp in the IBM Connections configuration properties file when you are ready to make the changes available to others. For more information, see 1.4 Publishing customizations with the wsadmin tool.

For more information about the error pages, see the IBM Connections documentation and search for Customizing the error page.

Parent topic: 2.0 Customizing the user interface