The Hikari theme is the default theme for communities in Connections 5.5 and later. Use the
information in this topic to define a custom Hikari-based theme. Using non-Hikari based themes, like
themes from Connections 4.x, is not supported. To define a custom theme for Communities, you
typically start by copying an existing theme. The style sheets for Communities are compartmentalized
so that the color information is stored separately from the overall structure of the page. This
separation makes it easy to change the page's color without disrupting the layout.
Before you begin
To test your style changes, you might find it helpful to use the development tools in
browsers like Chrome which allow you to modify colors and styles dynamically on the page. You can
then preview what the page looks like when your new style is applied to it.
Procedure
To define a community theme complete the following steps.
-
Create a copy of the existing default theme.
- Copy com.ibm.social.hikari.theme_styles_build stamp.jar
from
application_server\installedApps\cell_name\Common.ear\connections.web.resources.war\WEB-INF\eclipse\plugins\
to a temporary location.
Here is an example of the path where you might find the JAR file:
/opt/IBM/WebSphere/AppServer/profiles/AppSrv01/installedApps/cell01/Common.ear/connections.web.resources.war/WEB-INF/eclipse/plugins
Note: You must copy the JAR file to access the defaultTheme folder. Do not copy
the folder from the nav/common/styles directory because this directory contains
older themes.
- Extract the JAR file and locate the resources folder.
- Copy theme.css and themeRTL.css from the
resources folder to the
customizationDir/themes/corporateTheme directory, where
customizationDir is the base directory where you store your customizations.
- Create the themes and corporateTheme sub-directories
as necessary.
- Rename the .css files to corporateTheme.css and
corporateThemeRTL.css respectively.
Note: The
customizationDir directory is located in the shared content store directory
that is defined during installation, when it is saved as an IBM®
WebSphere® Application Server variable named
CONNECTIONS_CUSTOMIZATION_PATH. For more information about how to locate your
base customization directory, see Determining where to save your
customizations.
- Copy the css and sprite directories from the resources
folder to the customizationDir/themes/corporateTheme
directory.
-
Update corporateTheme.css and other CSS files in the
customizationDir/themes/corporateTheme directory as
needed.
-
Save your changes.
-
To associate a thumbnail image with your custom theme, upload a
theme.jpg file to the following directory:
customizationDir/communities/images/
This image
will be displayed in the Theme Palette.
What to do next
After defining a new theme, you need to add it to the Communities configuration file,
communities-config.xml. For more information, see Adding a theme to the
Communities configuration file.