Customizing the user interfaceAdded by IBM on February 11, 2013 | Version 1 (Original)
|The steps that you must perform to customize IBM® Connections are the same no matter what part of the product you are customizing. You need to find the relevant source file, save a copy of the file in the appropriate customization directory, edit the file, and then validate your changes.
Before you begin
Connections and review the product user interface to determine which areas of the product you want to customize.
About this task
Use the steps outlined here as a general guide to the process for customizing the product user interface. For additional detail on how to customize specific areas of the user interface, refer to the task-specific topics that are referenced at the end of this topic. For information about best practices to follow when customizing your deployment, see Customization best practices
Connections user interface style is based on the IBM Lotus
® User Interface Toolkit 3.0.
- Find the file that serves as the source of the area of the product that you want to edit.
For a list of the web application source directories and OSGi bundles that are packaged with IBM Connections, see Application WAR files and OSGi bundles.
- Turn on the customization debugging capability.
For more information, see Enabling and disabling customization debugging.
- Copy the file that you want to customize and past it into the appropriate customization directory.
For more information, see Determining where to save your customizations
The following table identifies the files that serve as the source for user interface areas that are popular targets for customization. The files are located in the nav
folder of the following directory: WAS_HOME/profiles/profile_name/installedApps/cell_name/application_name.ear/application_name.war
- WAS_HOME is the directory to which you installed IBM WebSphere® Application Server.
- profile_name is the profile to which you installed one of the IBM Connections applications.
- cell_name is the cell to which you installed the application.
- application_name.ear is the EAR file name for the application.
- application_name.war is the WAR file name for the application.
For a list of the web application source directories that are packaged with IBM
Connections, see Application WAR files and OSGi bundles
Table 1. Popular customization areas
- To add custom styles to the product, edit the following files:
If your users view the product in Arabic, Hebrew, or another right-to-left language, copy the defaultTheme_rtl.css
- For more information, see Adding styles to the IBM Connections stylesheet.
- To make extensive changes to the colors used in the product, edit the following file: /nav/common/styles/defaultTheme/defaultTheme.css
For more information, see Making extensive color and style changes.
For more information, see Customizing the error page.
For more information, see Customizing the footer.
For more information, see Customizing the login page.
For the menus available from the navigation bar:
For more information, see Customizing the navigation bar.
- To edit the footer and have the same footer be displayed in all of the applications, store the updated footer file in the following directory:
- To change the login page of a single application, store the updated login page file in the directory where customizations that are specific to that application are stored. For example, to change the login page of the Files application only, store the login.jsp file in the files subdirectory instead of the common subdirectory:
- Edit the file stored in the customizationDir directory to make your changes.
- Test your changes by refreshing the web browser. You might also need to clear your browser cache to see the changes.
- When you are ready to publish your changes, turn off the customization debugging capability.
- Using the WebSphere Application Server Integrated Solutions Console, stop and restart each application EAR file.
- Force all user web browsers to refresh all cached content and display your changes by running the command that updates the product version stamp. For more information, see Required post-customization step.
What to do next
See the following topics for more information about customizing specific areas of the product.
Determining where to save your customizationsParent topic: User interface customization
Customization best practices
Customizing product strings
Applying common configuration property changes
Adding styles to the IBM Connections stylesheet
Making extensive color and style changes
Customizing the error page
Customizing the footer
Customizing the login page
Customizing the navigation bar
Required post-customization step
When you are customizing your deployment of IBM
Connections, you must save your customized files to the appropriate directory to ensure that your customizations override the default settings.
Enabling and disabling customization debugging
By enabling customization debugging mode, you can force applications to reload override files every time a browser request is made. This capability allows you to see your customization changes in the product instantly.
Application WAR files and OSGi bundles
The following web application directories and OSGi bundles are packaged as part of IBM
Customizing the Application Access and Access Request interfaces
You can customize the header, footer, login, and error pages that prompt IBM
Connections users to grant/deny and revoke access to their Connections data for third-party applications protected by OAuth. Also, you can edit the text strings that display on the Application Access and Access Request interfaces.