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.
About this task
To customize a
UI control in an application, you might have to edit the application-specific CSS file instead of
defaultTheme.css
. You can overwrite the application-specific CSS file by storing
your edited version in the customization directory for that application.
Procedure
- Optional: Turn on the customization debugging capability. For more information, see Enabling live user interface customization editing mode .
-
Create a <theme_name>Theme directory in the
customizationDir directory.
Note: Each theme, for example: "red", "green", "onyx", "gen4", "hikari", (the default theme) has a theme customization folder called customizationDir/themes/<theme_name>Theme/. So the customization folder for the hikari theme is customizationDir/themes/hikariTheme/.
For information about the location of the customizationDir directory, see Determining where to save your customizations.
- Navigate to the themes directory:
WAS_HOME/profiles/profile_name/installedApps/cell_name/Common.ear/connections.web.resources.war/WEB-INF/eclipse/plugins/com.ibm.lconn.core.styles_version.jar!/resources/base/applicationsNote: 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.Note: Hikari theme is in the same directory in the following jar: com.ibm.social.hikari.theme_1.0.0.20151204-1501.jarNote: The gen4 theme is also in the same directory in the following jar: com.ibm.social.gen4.theme_4.0.0.20151204-1501.jarWhere:
- 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.Tip: For a list of the web application source directories that are packaged with IBM® Connections, see Application WAR files and OSGi bundles.
- version is the version number of the IBM® Connections release plus the date and build number of the JAR file.
-
Copy the defaultTheme.css file and any other files that you want to change
and paste them into the common customization <theme_name>Theme
directory.
For example:
customizationDir/themes/hikariTheme/defaultTheme.css
Notes:- 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/<themedir>/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 for the class definition that you want to
change.
For example, suppose that you want 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 your choosing.Note: The font color that you define for body text is applied only 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.
- To change the background color, change the default value from #fff, which is the code for white, to a color of your choosing.
- To change the color of body text, change the default value from
#222, which is the code for black, to a color of your choosing.
- Save and close the .css file.
- To test your style changes, refresh the application in your 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 live user interface customization editing mode.