Replace images

Customize the product by replacing images specific to IBM Connections with our own company images.

1. Copy the image to replace and paste it to a new location.

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

   We can find the sprited images file: com.ibm.oneui3.styles_3.X.X.<DATE-STAMP>.jar in... WAS_HOME/profiles/<AppServer> /installedApps/<cell>/Common.ear/connections.web.resources.war/WEB-INF/eclipse/plugins

2. Open the copied image file and update it as needed.

3. Replace the original image with the new image by saving the updated file into the images subdirectory of the appropriate customization directory. See Determining where to save the customizations for more details about customization directories.

4. Create a CCS file named custom.css and store it in the following subdirectory of the customization directory: customizationDir/themes/gen4Theme.

5. To replace the Connections Activities icon with the customized icon image, open the CSS file in a text editor and add the following lines:

   IconnSprite-iconActivitiesBlue16 {
    background-image: url("/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 the 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.

6. To change the size of the image, either:

   • 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.

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

8. Test whether the custom image is being displayed successfully by refreshing the web browser and opening the page where the image is displayed.

9. See Required post-customization step for information about how to update the product version stamp and ensure that your users see the changes the next time they log in to IBM Connections.

Example

For an example of how to replace images in Connections, see Change the Connections logo, which details how to replace the logos used in the product.

Parent topic:
Customize images

Related:
Connections customization best practices
Enable live user interface customization editing mode
Determine where to save the customizations
Required post-customization step
Change the Connections logo