Add styles to the Connections stylesheet

We can change the look of the Connections pages to give them a custom look by adding new style definitions in the cascading stylesheet and applying that style to different parts of the product user interface.

To add a custom style to the Connections stylesheet, create a CSS file containing your customized styles and store it in the customizationDir/themes/defaultTheme folder.

1. Turn on the customization debugging capability. See Enable and disable customization debugging.

2. Create a CSS file named custom.css and store it in the appropriate subdirectory of the customization directory.

   For example, to change the style of a class in all the applications, you copy the file into the following directory:
   customizationDir/themes/defaultTheme

   For information about how to find out where the customizationDir directory is located, see Determine where to save the customizations.

   A custom.css file is present in the WAR file for each application, but the file does not contain any useful content by default, so it is easier to create a custom.css file from scratch.

3. Open the CSS file in a text editor, and define any new styles to apply to the product user interface.

   You might want to use the defaultTheme.css file as a resource for styles that have already been defined for the application. We can find this file in...

   http://server_name/connections/resources/web/com.ibm.oneui3.styles/css/defaultTheme/defaultTheme.css

4. Add new style definitions or edit the style specified for the class definition that you copied from the defaultTheme.css file.

5. Save and close the custom.css file.

6. Stop and restart the Common.ear file in order to pick up the CSS changes.

7. To test the style changes, reference the new style from a user interface element, and then refresh the web browser.

8. If we enabled customization debugging in step 1, turn it off when we are ready to publish the changes. See Enable customization debugging.

9. See Required post-customization step for information about how to apply the changes permanently.

Parent topic:
Customize the user interface

Related:
Add a custom theme to Communities
Determine where to save the customizations
Required post-customization step
Application WAR files and OSGi bundles