Adding styles to the HCL Connections™ style sheet

You can customize the look of the HCL Connections™ pages by adding new style definitions in the cascading style sheet and applying that style to different parts of the product user interface.

About this task

To add a custom style to the HCL Connections™ style sheet, you need to create a CSS file that contains your customized styles and store it in the customizationDir/themes/<theme_name>Theme folder.
Note: Each theme, for example: "red", "green", "onyx", "gen4", "hikari", (the default theme) has a theme customization folder called customizationDir/themes/<theme_name>Theme/. So the customization folder for the hikari theme is customizationDir/themes/hikariTheme/.

Procedure

  1. Optional: Turn on the customization debugging capability. For more information, see Enabling live user interface customization editing mode.
  2. Create a CSS file that is 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/<theme_name>Theme

    For information about how to find out where your customizationDir directory is located, see Determining where to save your 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 new custom.css.

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

    You might want to use the default hikariTheme.css file as a resource for styles that are already defined for the application. You can find this file in the following location:

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

  4. Add new style definitions or edit the style that is specified for the class definition that you copied from the hikariTheme.css file.
  5. Save and close custom.css file.
  6. Stop and restart the Common.ear file to pick up the CSS changes.
  7. To test your style changes, reference your new style from a user interface element, and then refresh your web browser.
  8. Optional: If you enabled customization debugging in step 1, turn it off when you are ready to publish your changes. For more information, see Enabling live user interface customization editing mode.
  9. See Post-customization step for information about how to apply your changes permanently.