Making extensive color and style changesAdded by IBM on February 11, 2013 | Version 1 (Original)
|Edit the defaultTheme.css file to make extensive changes to the product user interface, such as changing the font style and background color.
Before you begin
Some applications define styles and colors beyond those that are specified in the defaultTheme.css
file. These additional and application-specific styles are defined in files named after the applications, for example, activities.css
. The styles and colors defined in these application-specific styles override those specified in the defaultTheme.css
. When you want to customize a UI control that is only used in a particular application, you might need to edit the application-specific .css
file rather than the defaultTheme.css
file. If so, you can overwrite the version of that file in the product by storing your updated version in the defaultTheme
customization directory for that application.
Parent topic: User interface customization
Adding a custom theme to Communities
Customizing the user interface
Enabling and disabling customization debugging
Determining where to save your customizations
Required post-customization step
Application WAR files and OSGi bundles
- Optional: Turn on the customization debugging capability. For more information, see Enabling and disabling customization debugging.
- Create a defaultTheme directory in the customizationDir directory.
For example: customizationDir/themes/defaultTheme
For information about how to find out where your customizationDir directory is located, see Determining where to save your customizations.
- Navigate to the web application defaultTheme directory:
- WAS_HOME is the directory to which you installed IBM® WebSphere® Application Server.
- 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.
- application_name.war is the WAR file name for the application.
For a list of the web application source directories that are packaged with IBM
Connections, see Application WAR files and OSGi bundles
- Copy the defaultTheme.css file and any other files that you need to change, and then paste them into the common customization defaultTheme directory.
- 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, you must override the application-specific .css file in the following directory: customizationDir/themes/base/applications/application_name.css
For a list of the customization locations for application-specific themes and styles, see Determining where to save your customizations.
- Copy and paste files only, do not copy and paste the directory.
- Open the copy of the defaultTheme.css file in a text editor.
- Edit the style specified for the class definition that you want to change. For example, let's say that you want to update the following lines of text:
- 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.
- Save and close the CSS file.
- To test your style changes refresh the web browser.
- Optional: If you enabled custom debugging, turn off the debugging capability when you are ready to publish your changes. For more information, see Enabling and disabling customization debugging.
- See Required post-customization step for information about how to apply your changes permanently.