Defining a community theme

To define a custom theme for Communities, we typically start by copying an existing theme. The stylesheets for Communities are compartmentalized so 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.

To test the style changes, you might find it helpful to use a web development tool such as the Mozilla Firefox browser extension, Firebug. Firebug allows you to modify colors and styles dynamically on the page so that we can preview what the page looks like when wer new style is applied to it.

To define a community theme.

1. Create a copy of the existing default theme.

   1. Copy the com.ibm.oneui3.styles_build stamp.jar file 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

      You must copy the JAR file in order to access the defaultTheme folder. Do not copy the folder from the nav/common/styles directory because this directory contains older themes.

   2. Extract the JAR file and locate the resources/css folder.

   3. Copy the defaultTheme directory from the css folder to the customizationDir/themes directory, where customizationDir is the base directory where you store the customizations. If the themes subdirectory does not already exist, create it now.

      The customizationDir directory is located in the shared content store directory defined during installation, when it is saved as an WAS variable named CONNECTIONS_CUSTOMIZATION_PATH. For more information about how to locate the base customization directory, see Determining where to save the customizations.

   4. Rename the customizationDir/themes/defaultTheme directory to customizationDir/themes/corporateTheme. Rename the defaultTheme.css stylesheet inside the customizationDir/themes/corporateTheme directory to corporateTheme.css. Rename the defaultThemeRTL.css stylesheet to corporateThemeRTL.css..

      • The defaultTheme directory contains stylesheets named defaultTheme.css and defaultThemeRTL.css. In other theme directories, the stylesheets are named themeNameTheme.css and themeNameThemeRTL.css.

      • The new themes must be saved in the common customizationDir directory so they can be used from all the applications.

2. Update the corporateTheme.css file and other CSS files in the customizationDir/themes/corporateTheme directory as needed. The corporateTheme.css file is now the main stylesheet where you'll be making changes. For example, you might want to modify the color settings to match your organization's corporate colors.

   If we're using a tool such as Firebug to test the changes, be sure to copy the settings that you've modified into the new CSS files.

3. Save the changes.

4. To associate a thumbnail image with the 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, add it to the Communities configuration file, communities-config.xml. See Add a theme to the Communities configuration file.

Parent topic:
Add a custom theme to Communities

Related:

Customize the user interface

Add a theme to the Communities configuration file

Specify the name of a custom theme

Remove community themes