Adding styles to the IBM Connections stylesheetAdded by IBM on February 11, 2013 | Version 1 (Original)
|You can change the look of the IBM® 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.
About this task
To add a custom style to the IBM
Connections stylesheet, you need to create a CSS
file containing your customized styles and store it in the customizationDir/themes/defaultTheme
Parent topic: User interface customization
Adding a custom theme to Communities
Customizing the user interface
Enabling and disabling customization debugging
Determining where to save your customizations
Required post-customization step
Application WAR files and OSGi bundles
- Optional: Turn on the customization debugging capability. For more information, see Enabling and disabling customization debugging.
- 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 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 custom.css file from scratch.
- 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 defaultTheme.css file as a resource for styles that have already been defined for the application. You can find this file in the following location:
- Add new style definitions or edit the style specified for the class definition that you copied from the defaultTheme.css file.
- Save and close the custom.css file.
- Stop and restart the Common.ear file in order to pick up the CSS changes.
- To test your style changes, reference your new style from a user interface element, and then refresh your web browser.
- 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 and disabling customization debugging.
- See Required post-customization step for information about how to apply your changes permanently.