Making extensive color and style changes

Edit the defaultTheme.css file to change the look of the user interface, such as changing the font style or background color.

The default styles and colors for Connections applications are specified in the defaultTheme.css file. Extra application-specific styles are defined in files that are named after the applications such as the activities.css file. These extra styles override the styles in the defaultTheme.css file.

To customize a UI control in an application, you might have to edit the application-specific CSS file instead of the defaultTheme.css file. We can overwrite the application-specific CSS file by storing your edited version in the customization directory for that application.

1. Turn on the customization debugging capability. See Enable and disable customization debugging.

2. Create a defaultTheme directory in the customizationDir directory.
   For example:

   customizationDir/themes/defaultTheme

   For information about the location of the customizationDir directory, see Determine where to save the customizations.

3. Navigate to the themes directory:

   WAS_HOME/profiles/profile_name/installedApps/cell_name/application_name.ear/application_name.war/WEB-INF/eclipse/plugins/com.ibm.lconn.core.styles_version.jar!/resources/base/applications

   The com.ibm.lconn.core.styles_version.jar file contains CSS style sheets that extend or override default styles from the OneUI 3.0.x toolkit.
   

   where:

   • WAS_HOME is the directory where IBM WebSphere Application Server is installed.

   • profile_name is the profile where you installed IBM Connections.

   • cell_name is the cell where you installed the application.

   • application_name.ear is the name of the application EAR file. To customize interface styles that are common to all applications, use the Common.ear file.

   • application_name.war is the name of the application WAR file.

     For a list of the web application source directories that are packaged with Connections, see Application WAR files and OSGi bundles.

   • version is the version number of the Connections release plus the date and build number of the JAR file.

4. Copy the defaultTheme.css file and any other files to change and paste them into the common customization defaultTheme directory. For example:

   customizationDir/themes/defaultTheme/defaultTheme.css

   • Pasting the defaultTheme.css file into the common customizationDir directory makes it available to all the applications.

   • To customize the theme for a specific application, we must override the application-specific CSS file in...
     

     customizationDir/themes/defaultTheme/applications/application_name.css

     For a list of the customization locations for application-specific themes and styles, see Determine where to save the customizations.

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

5. Open the copy of the defaultTheme.css file in a text editor.

6. Edit the style for the class definition to change.

   For example, suppose to update the following lines:

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

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

     The font color defined for body text is applied only to text contained within basic body tags, such as <p> tags. User interface items such as page headings, subheadings, and links are formatted differently.

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

7. Save and close the CSS file.

8. To test the style changes, refresh the application in the web browser.

9. If we enabled custom debugging, turn off the debugging capability when we are ready to publish your changes. See Enable customization debugging.

What to do next

For information about how to apply the changes permanently, see Required post-customization step.

Parent topic:
Customize the user interface

Related:
Add a custom theme to Communities
Enable live user interface customization editing mode
Required post-customization step
Determine where to save the customizations
Application WAR files and OSGi bundles