Customizing the Hikari theme
Customize the default Hikari theme in IBM® Connections.
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>"); }