Customize the user interface

Overview

The procedure to customize IBM Connections is the same for each application.

1. Edit a copy of the relevant source file
2. Save it in the appropriate customization directory

The style of the Connections user interface is based on the IBM Collaboration Solutions OneUI Toolkit 3.0...

WAS_HOME/profiles/profile/installedApps/cell/application.ear/application.war/WEB-INF/eclipse/plugins/com.ibm.oneui3.styles_version.jar

To extend or override default styles from the OneUI 3.0.x toolkit...

WAS_HOME/profiles/profile/installedApps/cell/application.ear/application.war/WEB-INF/eclipse/plugins/com.ibm.lconn.core.styles_version.jar

Customize IBM Connections applications

1. Find the file that serves as the source of the interface elements to customize.

2. Enable the customization debugging capability.

3. Copy the source file to customize into the appropriate customization directory.

   Source files for each user interface area...

   Feature	File location
   Cascading style sheets	/nav/common/styles/defaultTheme/custom.css /nav/common/styles/defaultTheme/custom_rtl.css /nav/common/defaultTheme_rtl.css (For Arabic, Hebrew, or other right-to-left languages) /nav/common/styles/defaultTheme/defaultTheme.css (colors)
   Error page	/nav/templates/error.jsp
   Footer	/nav/templates/footer.jsp
   Login page	/nav/templates/login.jsp
   Navigation bar	/nav/templates/header.jsp /nav/templates/menu/people.jsp /nav/templates/menu/communities.jsp /nav/templates/menu/apps.jsp

   For example, to edit the footer, and have the same footer be displayed in all of the applications, store the updated footer file in...

   customizationDir/common/nav/templates/footer.jsp

   To change the login page of the Files application only, store the login.jsp file in the files subdirectory instead of the common subdirectory:

   customizationDir/files/nav/templates/login.jsp

4. Edit the file in the customizationDir directory to make the changes.

5. Test the changes by refreshing the web browser.

   You might have to clear the browser cache to see the changes.

6. When we are ready to publish the changes, turn off the customization debugging capability.

7. Use the WAS console, stop and restart each application EAR file.

8. Force all user web browsers to refresh all cached content and display changes by updating the product version time stamp.

What to do next

1. Determine where to save the customizations
2. Enable live user interface customization editing mode
3. Customize the navigation bar
4. Customize images
5. Add styles to the Connections stylesheet
6. Make extensive color and style changes
7. Customize the login page
8. Customize the footer
9. Customize the error page
10. Customize the Getting Started view
11. Customize product strings
12. Override and extending JavaScript in Connections
13. Extend JSP files with custom tags
14. Customize the Application Access and Access Request interfaces

Parent topic:
Customizing

Related:
Connections customization best practices
Apply common configuration property changes
Enable live user interface customization editing mode
Required post-customization step