Review the user interface to determine what you want to customize.
Use these instructions as a general guide for customizing the user interface. For more information about customizing specific parts of the user interface, see the related links. For tips about customizing your deployment, see
- Find the file that serves as the source of the interface elements that you want to customize.
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.
- Enable 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
You can find the sources for style sheets in the following JAR files:
- The com.ibm.lconn.oneui3.styles_version.jar file contains the IBM Collaboration Solutions OneUI 3.0.x toolkit that includes image resources and sprites.
- This JAR file contains the CSS files for all IBM Connections applications.
file contains CSS style sheets that extend or override default styles from the OneUI 3.0.x toolkit.
- WAS_HOME is the directory where IBM WebSphere® Application Server is installed.
- profile_name is the profile where you installed IBM Connections.
- cell_name is the cell where you installed the application.
- application_name.ear is the name of the application EAR file. To customize interface styles that are common to all applications, use the Common.ear file.
- application_name.war is the name of the application WAR file.
Tip: For a list of the web application source directories that are packaged with IBM Connections, see Application WAR files and OSGi bundles.
- version is the version number of the IBM Connections release plus the date and build number of the JAR file.
In previous releases of IBM
Connections, the default style sheets were in the nav
subdirectory of the WAS_HOME/profiles/profile_name/installedApps/cell_name/application_name.ear/application_name.war
directory. That location is deprecated in this release.
The following table identifies the source files for each user interface area.
Table 1. Popular customization areas
Cascading style sheets
- 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 style sheet.
- 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 in the customizationDir directory to make your changes.
- Test your changes by refreshing the web browser. You might have 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.
For more information about customizing specific areas of the product, see the related topics.
Determining where to save your customizations
When you are customizing IBM
Connections, save your customized files to the appropriate directory to ensure that your customizations override the default settings.
Enabling live user interface customization editing mode
You can force applications to reload override files every time a browser request is made. This capability shows your customization changes in the product instantly.
Customizing the navigation bar
You can edit the files that control the content of the IBM
Connections navigation bar to add to the bar's functionality. For example, you can add extra links to the navigation bar, remove the Log Out
link, or insert extra drop-down menus.
You can update the images used in IBM
Connections to suit the needs of your organization. For example, you can replace the IBM
logo with your company logo, or customize the sprited images and file type icons that are used in the product interface to fit with your company's branding.
Adding styles to the IBM Connections stylesheet
You can change the look of the IBM
Connections pages to give them a custom look by adding new style definitions in the cascading stylesheet and applying that style to different parts of the product user interface.
Making extensive color and style changes
Edit the defaultTheme.css
file to change the look of the user interface, such as changing the font style or background color.
Customizing the login page
Customize the login page in IBM
Connections to have the appropriate style and content for your organization.
Customizing the footer
You can edit the files that control the content of the IBM
Connections footer to improve the footer's functionality.
Customizing the error page
Customize the text on the error page in IBM
Customizing the Getting Started view
Help your users get started with your implementation of IBM
Connections by customizing the Getting Started view that is displayed in the Home page.
Customizing product strings
You can replace a word or phrase in the product user interface with terminology that better suits your environment.
™ that is used in the different applications.
Extending JSP files with custom tags
You can extend IBM
Connections by adding your own custom JSTL tags to meet your company's needs.
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.
You can customize IBM® Connections to be embedded in an IFrame.