Making extensive color and style changes 

Edit the defaultTheme.css file to make extensive changes to the product user interface, such as changing the font style and background color.


Before starting


Some applications define styles and colors beyond those that are specified in defaultTheme.css file. These additional and application-specific styles are defined in files named after the applications, for example activities.css. They are included after the defaultTheme.css. If you want to customize a UI control that is only used in Activities, you might need to edit the activities.css file. If so, you can overwrite the version of the activities.css file in the product by storing your updated version to the defaultTheme customization directory for Activities.


Procedure

  1. Create a new /defaultTheme directory in the customization directory, for example:

      <customizationDir>/common/nav/common/styles/defaultTheme

  2. Navigate to the web application /defaultTheme directory:

      <WAS_home>/profiles/<profile_name>/installedApps/
      <cell_name>/<application_name.ear>/ <application_name.war>/nav/common/styles/defaultTheme

      where <WAS_home> is the directory to which you installed the 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, and <application_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

      • 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

  3. Copy the defaultTheme.css file and any other files you need to change, and then paste them in the common customization /defaultTheme directory, for example:

      <customizationDir>/common/nav/common/styles/defaultTheme/defaultTheme.css

      Note:

      • Pasting the defaultTheme.css file into the common customization directory makes it available to all applications. Instead, you can paste it into a particular application's customization directory, to apply it only to that application. See Customize the user interface for more details.

      • Copy and paste files only, do not copy and paste the directory.

  4. Open the copied CSS file in a text editor.

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

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

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

  6. Save and close the css file.

  7. To test your style changes refresh the web browser.

  8. See Customize the user interface for details on how to apply your changes permanently.


Parent topic

Customize the user interface

Related concepts
Add a custom theme to Communities

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

+

Search Tips   |   Advanced Search