Replacing images

Customize the product by replacing images specific to HCL Connections™ with your own company images.

Procedure

Copy the image that you want to replace and paste it to a new location.

Tip: To find the source file for the image that you want to change, use one of the web inspector tools listed in Customization best practices to inspect the image. The image name displays in the img tag. If the image is sprited, you can see the class that has the image or icon.

Note: You can find the sprited images file: com.ibm.oneui3.styles_3.X.X.<DATE-STAMP>.jar in the following location: WAS_HOME/profiles/<AppServer> /installedApps/<cell>/Common.ear/connections.web.resources.war/WEB-INF/eclipse/plugins
Open the copied image file and update it as needed.
Replace the original image with your new image by saving the updated file into the images subdirectory of the appropriate customization directory.
See Determining where to save your customizations for more details about customization directories.
Create a CCS file named custom.css and store it in the following subdirectory of the customization directory: customizationDir/themes/<theme_name>Theme.

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/.
To replace the HCL Connections Activities icon with your customized icon image, open the CSS file in a text editor and add the following lines:
```
IconnSprite-iconActivitiesBlue16 {
 background-image: url("connections/resources/web/com.ibm.oneui3.styles/imageLibrary/Branding/Logos/activity.png");
 background-position: 0px 0px;
 height: image_heightpx;
 width: image_widthpx;
}
```
Where
- activity.png is the file name of your customized activity icon image. the background-image: url path must point to where the customized icon image is stored.
- image_height is the height of the logo.
- image_width is the width of the logo.
Optional: To change the size of the image, do one of the following:
- If the dimensions of the image are specified in a CSS file, update the CSS file to customize the dimensions of the image.
- If the dimensions of the image are specified in a JSP or HTML file, update the relevant JSP or HTML file to customize the dimensions of the image.
Stop and restart the Common.ear file in order to pick up the CSS changes.
Test whether your custom image is being displayed successfully by refreshing the web browser and opening the page where the image is displayed.
See Post-customization step for information about how to update the product version stamp and ensure that your users see the changes the next time that they log in to HCL Connections™.

Example

For an example of how to replace images in HCL Connections™, see Changing the HCL Connections logo, which details how to replace the logos that are used in the product.