Making extensive color and style changesAdded by IBM | Edited by IBM on March 15, 2012 | Version 4 (Show original)
|Edit the defaultTheme.css file to make extensive changes to the product user interface, such as changing the font style and background color.
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 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.
Parent topic: Customizing the user interface
Adding a custom theme to Communities
Changing common configuration property values
Applying common configuration property changes
- Create a new /defaultTheme directory in the customization directory, for example:
- Navigate to the web application /defaultTheme directory:
is the directory to which you installed the 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, 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
- 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:
- 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 Customizing the user interface for more details.
- Copy and paste files only, do not copy and paste the directory.
- Open the copied CSS file in a text editor.
- 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:
- 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.
- See Customizing the user interface for details on how to apply your changes permanently.