Customize the default Hikari theme in IBM®
Connections. The Hikari theme is a packaged theme, available as a catalog offering on Greenhouse,
and included by default in IBM Connections. When Hikari is
enabled, it can be customized through the Connections customization directory.
Before you begin
Enable the Hikari theme. For more information, see Adding a custom theme to
communities. Note: Customization of default themes (for example, Gen4 and New themes) that
were included in previous IBM Connections releases is not
supported in IBM Connections 5.5.
Procedure
To customize the Hikari theme, place the files that are shown under these
directories.
-
To override the theme, place your styles into these files:
<CONNECTIONS_CUSTOMIZATION_PATH>/themes/HikariTheme/defaultTheme.css
<CONNECTIONS_CUSTOMIZATION_PATH>/themes/HikariTheme/defaultThemeRTL.css
-
To add new styles to the theme, place your styles into these files:
<CONNECTIONS_CUSTOMIZATION_PATH>/themes/HikariTheme/custom.css
<CONNECTIONS_CUSTOMIZATION_PATH>/themes/HikariTheme/customRTL.css
-
To override the application styles, place your styles into these files:
<CONNECTIONS_CUSTOMIZATION_PATH>/themes/HikariTheme/applications/activities.css
<CONNECTIONS_CUSTOMIZATION_PATH>/themes/HikariTheme/applications/activitiesRTL.css
.
.
.
<CONNECTIONS_CUSTOMIZATION_PATH>/themes/HikariTheme/applications/wikis.css
<CONNECTIONS_CUSTOMIZATION_PATH>/themes/HikariTheme/applications/wikisRTL.css
Note: The Hikari theme does not support bidirectional (bidi) languages. However, you can add
right-to-left (RTL) styles through customization.
-
To customize image.png referenced in the following example rule:
.lotusui30.lotusMain {
background-image: url(path/to/image.png);
}
Place a custom copy in the folder:
<CONNECTIONS_CUSTOMIZATION_PATH>/javascript/com/ibm/social/hikari/theme/css/
defaultTheme/path/to/image.png
Note:
IBM Connections parses the stylesheet, and resolves URLs of
resources that are linked using url() CSS properties by rebasing them. In the
example, IBM Connections parses and rebases this as:
.lotusui30 .lotusMain {
background-image: url("/connections/resources/web/com.ibm.social.hikari.theme/css/
defaultTheme/path/to/image.png?etag=<version_stamp>");
}
Results
The Hikari theme is customized.
What to do next
If you want to link to resources external to Connections in your stylesheet, and avoid that
Connections rebases the paths, see:IFIX
FOR PMR 42629,122,000 for details.