Customizing the Hikari theme

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.