Customizing the user interface

The procedure to customize HCL Connections™ is the same for each application. You must edit a copy of the relevant source file and save it in the appropriate customization directory.

Before you begin

Review the user interface to determine what you want to customize.

About this task

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 Customization best practices.

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

Procedure

  1. 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 Connections, see Application WAR files and OSGi bundles.
  2. Enable the customization debugging capability.
    For more information, see Enabling live user interface customization editing mode.
  3. 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.
    Remember: You can find the sources for style sheets in the following JAR file:
    WAS_HOME/profiles/profile_name/installedApps/cell_name/Common.ear/connections.web.resources.war/WEB-INF/eclipse/plugins/com.ibm.oneui3.styles_version.jar
    Notes:
    • com.ibm.lconn.oneui3.styles_version.jar contains the Collaboration Solutions OneUI 3.0.x toolkit that includes image resources and sprites.
    • com.ibm.lconn.oneui3.styles_version.jar is only found in one application, Common.ear/connections.web.resources.war
    WAS_HOME/profiles/profile_name/installedApps/cell_name/application_name.ear/application_name.war/WEB-INF/eclipse/plugins/com.ibm.lconn.core.styles_version.jar
    Note: The com.ibm.lconn.core.styles_version.jar file contains CSS style sheets that extend or override default styles from the OneUI 3.0.x toolkit.
    Where:
    • WAS_HOME is the directory where IBM® WebSphere® Application Server is installed.
    • profile_name is the profile where you installed 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 Connections, see Application WAR files and OSGi bundles.
    • version is the version number of the Connections release plus the date and build number of the JAR file.
    Note: In previous releases of 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
    Feature File location
    Cascading style sheets
    • To add custom styles to the product, edit the following files:
      Note: If your users view the product in Arabic, Hebrew, or another right-to-left language, copy the defaultTheme_rtl.css file too.
      • /nav/common/styles/defaultTheme/custom.css
      • /nav/common/styles/defaultTheme/custom_rtl.css
      For more information, see Adding styles to the 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.
    Error page /nav/templates/error.jsp

    For more information, see Customizing the error page.
    Footer /nav/templates/footer.jsp

    For more information, see Customizing the footer.
    Login page /nav/templates/login.jsp

    For more information, see Customizing the login page.
    Navigation bar /nav/templates/header.jsp
    For the menus available from the navigation bar:
    /nav/templates/menu/people.jsp
/nav/templates/menu/communities.jsp
/nav/templates/menu/apps.jsp
    For more information, see Customizing the navigation bar.
    For example:
    • 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:

      customizationDir/common/nav/templates/footer.jsp

    • 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:

      customizationDir/files/nav/templates/login.jsp

  4. Edit the file in the customizationDir directory to make your changes.
  5. Test your changes by refreshing the web browser. You might have to clear your browser cache to see the changes.
  6. When you are ready to publish your changes, turn off the customization debugging capability.
  7. Using the WebSphere® Application Server Integrated Solutions Console, stop and restart each application EAR file.
  8. 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 Post-customization step step.

What to do next

For more information about customizing specific areas of the product, see the related topics.