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
The default styles and colors for IBM 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
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 and disabling
customization debugging.
-
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.jar
Note: The gen4 theme
is also in the same directory in the following jar:
com.ibm.social.gen4.theme_4.0.0.20151204-1501.jar
-
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.
-
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 and disabling customization
debugging.
What to do next
For information about how to apply your changes permanently, see Post-customization
step.