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
- Create a new /defaultTheme directory in the customization directory, for example:
<customizationDir>/common/nav/common/styles/defaultTheme
- Navigate to the web application /defaultTheme directory:
<WAS_home>/profiles/<profile_name>/installedApps/<cell_name>/<application_name.ear>/ <application_name.war>/nav/common/styles/defaultThemewhere <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
- 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.cssNote:
- 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.
- 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:
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.
- 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 Customize the user interface for details on how to apply your changes permanently.
Parent topic
Customize the user interfaceRelated concepts
Add a custom theme to CommunitiesRelated tasks
Change common configuration property values
Apply common configuration property changes