Home

 

Add content to the navigation bar


Overview

You can edit the files that control the content of the Lotus 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.

The content of the navigation bar is defined in the file: header.html. There are parts of the navigation bar that you should not edit or you risk limiting the basic functionality of the navigation bar. To protect this content, it is specified using macros. These items include:


To add content to the navigation bar...

  1. Make a copy of the header.html template file.

      WAS_HOME/profiles/profile_name/ installedApps/ cell_name/feature_name.ear/ feature_name.war/nav/templates

    where WAS_HOME is the to which you installed the WebSphere Application Server, profile_name is the profile to which you installed one of the Lotus Connections features, cell_name is the cell to which you installed the feature, feature_name.ear is the EAR file name for the feature, and feature_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
    • Home page: dboard.war
    • News: news.web.war
    • Profiles: peoplepages.war
    • Search: search.war
    • Wikis: qkr.share.wiki.war

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

  2. Add the copy to a on the IBM HTTP Server that is publicly addressable by a Web browser.

    The default document root location is:

      <IHS-folder>/htdocs/<language_code>

    For example, you might save the file to the following directory:

      <IHS-folder>/htdocs/en/my/styles

  3. If your customization uses new or additional images, place them in an images subdirectory on the IBM HTTP Server. For example, you might save the file to the following directory:

      <IHS-folder>/htdocs/en/my/styles/images

  4. Open the copy of the header.html file stored on the IBM HTTP Server in a text editor.

  5. To add an additional link to the list of links in the navigation bar, for example, a link called Lotus software which links to the Lotus software Web site...

    1. Add the HTML code depicted in bold font below to the file after the {{application links}} macro.

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

    2. Test whether your link was added successfully by opening the header.html file that you created and posted to the IBM HTTP Server in a Web browser by going to the following Web page, for example:

        http://server_name.company_name.com/<path-to-style-dir>/header.html

  6. To replace the logo with your company logo...

    1. In the header.html file, find the <div> tag with the lotusLogo class ID. It looks as follows:

        <div class="lotusLogo" id="lotusLogo">
         <span class="lotusAltText">Lotus Connections</span>
        </div>
        

      The image is defined in the lotusLogo class. Later in these steps you will find that class in the style sheet and replace the image file reference.

    2. In the header.html file, replace the text in the <span> element with the alternate text for the image you will use for the logo. It is important to specify alternate text here so that it is visible when a user is viewing the page in high contrast mode for accessibility purposes.

    3. Place the company logo image file (for example, CoLogo.gif) in the images subdirectory that you created on the IBM HTTP Server.

    4. Test whether your image was added successfully by accessing the image in a Web browser by going to the following Web page, for example:

        http://server_name.company_name.com/<path-to-images-dir>/CoLogo.gif

    5. Replace the image file being referenced in the style sheet. First make a copy of the cascading style sheet, which is named defaultTheme.css, so that you can edit it with your changes. You can find the defaultTheme.css file in the following directory:

        WAS_HOME/profiles/profile_name/ installedApps/ cell_name/feature_name.ear/ feature_name.war/nav/common/styles/defaultTheme/defaultTheme.css

      where WAS_HOME is the to which you installed the WebSphere Application Server, profile_name is the profile to which you installed one of the Lotus Connections features, cell_name is the cell to which you installed the feature, feature_name.ear is the EAR file name for the feature, and feature_name.war is one of the file names. See Step 1 for the full list.

    6. Rename the copy to customTheme.css or another name of your choosing, and then store it in a on the IBM HTTP Server that is accessible from a Web browser through the same domain name as the feature that is using the stylesheet. For example, you might save the file to the following directory:

        <IHS-folder>/htdocs/en/my/styles/customTheme.css

      If you created a unique domain name per feature, add a copy of the customTheme.css to a on the IBM HTTP Server that is addressable from each domain. Alternatively, you can skip the steps for creating and referencing the custom stylesheet and instead embed the updated stylesheet class information in the header.html file, which is shared by all of the features.

    7. Open the custom copy of the CSS file in a text editor, and then edit the lotusLogo class. Change the value of the background-image:url to the file path to your image. For example:

        .lotusui .lotusLogo .lotusLoginLogo{ background-image:url(http://acme.com/htdocs/en/my/styles/images/CoLogo.gif); background-repeat:no-repeat; height:18px; width:104px; }

    8. Edit the height and width definitions to match your custom banner graphic.

    9. Delete any class definitions that you did not edit.

      Delete the other class definitions forces the page to use the styles defined in the defaultTheme.css style sheet for the rest of the classes. You must do this because when you customize a theme for a feature, for example, the changes are made to the defaultTheme.css file. If you overwrite all of the style definitions in the customTheme.css file, then any other changes made to the defaultTheme.css will not be applied.

    10. Save and close the file.

    11. Open the header.html file in a text editor. Add a link element that references your custom CSS file. In the href attribute, specify the location of the stylesheet using a relative path. For example: For example:

        <div class="lotusRightCorner"> 
        		<div class="lotusInner"> 
             <link 
               rel="stylesheet" 
               href="/<path-to-style-dir>/customTheme.css" 
               type="text/css">
        

  7. Because you are using macros to specify your newly created files, first update the lotusConnections-config.xml file, and then stop and restart the server. To edit the Lotus Connections configuration file...

    1. Check out the common Lotus Connections configuration file by following the steps in the topic, Changing common configuration property values.

    2. Set the header style property to point to the custom header file that you created...

        LCConfigService.updateConfig("style.header.url", "http://server_name.company_name.com/<path-to-style-dir>/header.html") LCConfigService.updateConfig("style.enabled","true")

    3. To view the changes that you have made, enter the following command:

        wsadmin>LCConfigService.showConfig()

    4. Follow the steps in Applying common configuration property changes to apply the change.

 

Related tasks

Customize the navigation bar and footer
Change common configuration property values
Apply common configuration property changes

+

Search Tips   |   Advanced Search