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
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 you can 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 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
Note: 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.
- Extract the JAR file and locate the resources/css folder.
- Copy the defaultTheme directory from the css folder
to the customizationDir/themes directory,
where customizationDir is the base directory where
you store your customizations. If the themes subdirectory
does not already exist, create it now.
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.
- Rename the customizationDir/themes/defaultTheme
directory to customizationDir/themes/corporateTheme. Rename
the defaultTheme.css style sheet inside the
customizationDir/themes/corporateTheme directory to
corporateTheme.css. Rename the defaultThemeRTL.css style
sheet to corporateThemeRTL.css.
Notes: - The defaultTheme directory contains style sheets named
defaultTheme.css and defaultThemeRTL.css. In other theme
directories, the style sheets 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.
- 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 style sheet where you make
changes. For example, you might want to modify the color settings to match your organization's
corporate colors.
Note: If you're using a tool such as Firebug to test your changes, be sure to
copy the settings that you've modified into your new CSS files.
- 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.