Customize 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. This procedure describes how to add a link to the navigation bar and change the company logo.

Procedure

1. Make a copy of the header.jsp file, which defines the content of the main navigation bar. You can access the file from the following directory:
   

   <WAS_home>/profiles/<profile_name>/ installedApps/

   <cell_name>/<application_name.ear>/ <application_name.war>/nav/templates

   where:

   • <WAS_home> is the directory to which you installed IBM WAS

   • <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 one of the following file names:

     • Activities: oawebui.war

     • Blogs: blogs.war

     • Bookmarks: dogear.webui.war

     • Communities: comm.web.war

     • Files: qkr.share.files.war

     • Forums: forum.web.war

     • Home page: homepage.war

     • News: news.web.war

     • Profiles: lc.profiles.app.war

     • Search: search.war

     • Wikis: qkr.share.wiki.war

   The header.jsp file is the same for each application. You only need to make a copy of one of the header.jsp files.
   

2. Paste the copy into the appropriate subdirectory in the customization directory, most likely the common directory. See Customize the user interface for more details. For example, to change the look of the navigation bar in all applications, you would copy the file into the following directory:
   

   <customizationDir>\common\nav\templates

   
   

3. Open the copy of the header.jsp file in a text editor.

4. Optional: To add an additional link to the list of links in the navigation bar, for example, a link called IBM Lotus software which links to that website...

   1. Add the HTML code depicted in bold font below to the file.
      

      ...

      {{application links: li }} <li><a href="http://www.lotus.com" title="Lotus software">Lotus software</a></li> </ul> ...
      

5. Optional: To replace the IBM Connections logo with your company logo...

   1. Copy your company logo image file (for example, CoLogo.gif) into the images subdirectory of the appropriate customization directory. The images subdirectory has a file path of /nav/common/styles/images.
      
      For more details about the customization directory and how it works, see Customize the user interface.
      

   2. Rename the logo image to logo.png.

   3. To adjust the sizing of the image, find the div element with the class atttribute of lotusLogo, and then change the height and width values in the style attribute to match the height and width of your custom logo image.
      

      <div class="lotusLogo" id="lotusLogo" style="height: 10px; width: 20px;">

      
      

6. Optional: If you want to remove the log out link because single sign-on is enabled, for example, prevent the link from being displayed by editing the logoutLi list element as follows:
   

   <li id="logoutLi" style="display: none">

   
   

7. After making your updates, save and close the copy of the header.jsp file.

8. Test whether your link was added successfully by restarting the applications, and then refreshing the web browser.
   
   A browser refresh only shows you your changes if you turned on debugging. See Customize the user interface for more details.
   

9. See Customize the user interface for more details on how to apply the change permanently.
   

Parent topic

Customize the user interface

Related tasks
Change common configuration property values
Apply common configuration property changes

+

Search Tips   |   Advanced Search