Home

 

Change the default font style and background color


Overview

Edit the defaultTheme.css file to change the font style and background color used by Lotus Connections.

There is a second cascading style sheet file, called core.css, that also defines the style of the product, but it does not define the font or background style and color.


Change the default style font style and background color

  1. Make a copy of the defaultTheme.css file.

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

    ..where feature_name.ear is the EAR file name for the feature, and feature_name.war is one of the following files 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

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

    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.

  3. Open the copied CSS file stored on the IBM HTTP Server in a text editor.

  4. Edit the style specified for the class definition that you want to change. For example, you can make the following changes to these lines of text: 

      body.lotusui {color:#222;background:none;background-color:#cee1fc}
.lotusContent{background-color:#fff;}

    • To change the default color of standard text, change the value defined for the body color from #222, which is black, to a color of your choosing.

      The font color that you define for the body text will only be applied to text that is contained within basic body tags, such as <p> tags. User interface items such as page headings, subheadings, and links are formatted differently elsewhere in the customTheme.css file.

    • To change the default background color, change the value defined for the .lotusContent background-color from #fff, which is white, to a color of your choosing.

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

  6. Save and close the custom css file.

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

  8. In the <div class="lotusInner"> element in the custom 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">

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

  10. After fixing any issues that you discover while testing, apply your changes 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.

 

Related tasks

Change the look of Lotus Connections
Add a custom theme to Communities

Change common configuration property values

Apply common configuration property changes

+

Search Tips   |   Advanced Search