Define a community theme
To define a custom theme for Communities, you typically start by copying an existing theme. The stylesheets 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 starting
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 theme...
1. Create a copy of the existing default theme.For example, to create a new corporate theme:
a. Copy the defaultTheme directory from <WAR>/nav/common/styles to the following directory:
<install_dir>/<customization_dir>/common/nav/common/styles/
Note: If the <install_dir>/<customization_dir>/common/nav/common/styles/directory does not already exist, create it now.The <customization_dir> folder is the default directory in which customized files are stored. This location is defined during installation, and is saved as a WAS variable named CONNECTIONS_CUSTOMIZATION_PATH. By default, the variable is set to <installdir>\data\shared\customization.
b. Rename the new directory to corporateTheme. This gives you a directory path that looks as follows:
<install_dir>/<customization_dir>/common/nav/common/styles/corporateTheme
c. Rename the defaultTheme.css stylesheet inside this new directory to corporateTheme.css. Rename the defaultThemeRTL.css stylesheet inside this new directory to corporateThemeRTL.css.
Notes:
- The defaultTheme directory contains stylesheets named defaultTheme.css and defaultThemeRTL.css. In other theme directories, the stylesheets are named <themeName>Theme.css and <themeName>ThemeRTL.css.
- The new themes must be saved in the common customization directory so they can be used from all the applications.
d. Remove the file theme.css from the corporateTheme directory
2. Update the corporateTheme.css file and other CSS files in the new 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.
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.3. Save your changes.
4. To associate a thumbnail image with your custom theme, upload a <theme>.jpg file to the following directory:<install_dir>/<customization_dir>/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 Add a theme to the Communities configuration file.
Parent topic
Add a custom theme to Communities
Related tasks
Add a theme to the Communities configuration file
Remove community themes
Customize the user interface