Home

Change the style of Lotus Connections

 

+

Search Tips   |   Advanced Search

 

To change the style of Lotus Connections...

  1. Install Firebug in the Firefox browser

  2. Make a copy of the defaultTheme.css template file...

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

    ..where feature_name is one of the following...

      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

    Rename the copy to customTheme.css or another name of your choosing, and then store it in on the IBM HTTP Server 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_HOME/htdocs/en/my/styles

    If you created a unique domain name per feature, add a copy of the customTheme.css 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.

  3. Open the custom copy of the CSS file in a text editor.

  4. Edit the style specified for the class definition that you want to change.

    For example, if you want to change the color of the tab and link text for the feature selected in the navigation bar, edit the following attributes of the class definitions:

      .lotusBanner{background-color:transparent;}
      .lotusBanner ul.lotusInlinelist li{color:#000;background-color:transparent;
       border-color:#105cb6} /*The first color is for the user name. The second */
      /*color is for the vertical bars separating the Help and Log out links. */ 
      .lotusBanner ul li.lotusFirst{background-image:none}
      .lotusBanner ul.lotusLinks a{color:#105cb6} /*Color of the feature name link */
      /*text when the feature is not selected.*/
      .lotusBanner ul.lotusLinks li.lotusSelected{background-color:#649De1;} 
       /*Color of the feature tab background when the feature is selected.*/
      .lotusBanner ul.lotusLinks li.lotusSelected a{color:#fff} /*Color of the */
       /*feature name link text when the feature is selected. */
      .lotusBanner ul.lotusUtility a{color:#105cb6} 
      

    You can change the background color of the feature tab when selected from #649De1, which is blue, to a color of your choosing, and you can change the color of the feature name text from #fff, which is white, to something else.

  5. To create a new style to apply to a link you added to the navigation bar, for example, define a new CSS entry in the custom CSS file. For example, you could choose to have your link display with a green background instead of a blue background:

      .lotusBanner{background-color:transparent;}
      .lotusBanner ul.lotusInlinelist li{color:#000;background-color:transparent;
       border-color:#66ad69}
      .lotusBanner ul li.lotusFirst{background-image:none}
      .lotusBanner li.myLinks a{color:#105cb6}
      .lotusBanner li.myLinks li.lotusSelected{background-color:#649De1;}
      .lotusBanner li.myLinks li.lotusSelected a{color:#fff}
      .lotusBanner ul.lotusUtility a{color:#105cb6}
      

  6. 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.

  7. Save and close the customTheme.css file.

  8. Open the header.html file in a text editor. If you created a custom header.html file in a previous procedure, edit that custom copy. If not, create a custom copy of the header.html file that is provided as part of the product. You can find the file in the following directory:

      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 feature WAR file names. See Step 1 for the full list. The header.html file is the same for each feature. You only need to make a copy of one of the header.html files. 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 copy the file to the following directory:

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

  9. Open the custom header.html file, and apply the new style to a link in the navigation bar by referencing this new CSS entry from the class attribute of the <li> element. For example:

      <li class="myLinks">
        <A HREF="http://www.lotus.com>">Lotus software</A>
      </li> 
      

  10. In the <div class="lotusInner"> element in the header.html file, 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:

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

  11. To test your style changes, use a Web development tool with document object model (DOM) editing capability. A tool such as the Firebug plug-in for Mozilla Firefox updates the DOM (Document Object Model) of the Web page instantly, so you can preview what the page looks like when the new style is applied to it.

  12. After fixing any issues found during testing, apply your custom style to the product by completing one of the following steps:

    • If you have already updated the configuration file to point to the custom version of the file , restart the WebSphere Application Server to apply this latest change.

    • If you have not yet updated the configuration file, update the value of the style property in the Lotus Connections configuration file to specify a value for your newly created header.html file instead of the default one by completing the steps below.

    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 style property to point to the new file using the following commands:

        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 changes.

 

Cross browser preview

This is a very useful free tool from Adobe that allows you to preview web pages in a variety of browsers across Windows and Mac platforms. Great for developers, designers, testers, and site reviewers.

Some really nice features are side-by-side browser comparisons and also an onion skin overlay.


Change the look of Lotus Connections

Add a custom theme to Communities

 

Related tasks

Change common configuration property values
Apply common configuration property changes