Change the Connections logo

To customize IBM Connections so that it has the look and feel of the organization, we can specify a CSS override that replaces the Connections logo with the company logo.

Two IBM logos display in the product by default. The first logo contains the text IBM Connections, and second logo is the graphical IBM logo. We can replace both logos with the company logo.

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 following subdirectory of the customization directory:
   customizationDir/themes/gen4Theme

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

3. Save the company logo in the following directories:
   

   customizationDir/javascript/com/ibm/lconn/core/styles/images/logo.png
   customizationDir/javascript/com/ibm/oneui3/styles/imageLibrary/Branding/Logos/ibmLogoOpaque16.png

4. Open the CSS file in a text editor and add the following lines:

   • To replace the Connections text-based logo with the company logo, add the following lines to the file:

     .lotusui30 .lotusBanner .lotusLogo {
      background-image: url("/com.ibm.lconn.core.styles/images/logo.png");
      height: image_heightpx;
      width: image_widthpx; 
     } 
     .lotusui30 .lotusBanner .lotusLogo .lotusAltText {
      display: none; 
     }

     Where

     • logo.png is the file name of the company logo.

     • image_height is the height of the logo.

     • image_width is the width of the logo.

   • To replace the IBM graphic logo with the company logo, add the following lines to the file:

     .lotusui30 .lotusBanner .lotusIBMLogo {
      background-image: url("/com.ibm.oneui3.styles/imageLibrary/Branding/Logos/ibmLogoOpaque16.png");
      background-position: 0px 0px;
      height: image_heightpx;
      width: image_widthpx;
     }

     Where

     • ibmLogoOpaque16.png is the file name of the company logo.

     • image_height is the height of the logo.

     • image_width is the width of the logo.

   If we are supporting right-to-left languages, such as Arabic or Hebrew, make equivalent changes to the customRTL.css file and save that in the customizationDir/themes/gen4Theme directory as well.

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. When we are ready to publish the changes, turn off the customization debugging capability. Test whether the changes were added successfully by restarting the applications and refreshing the web browser. A browser refresh only shows you the changes if you turned on debugging. See Enabling and disabling customization debugging for more details.

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

Parent topic:
Customize images

Related:
Enable live user interface customization editing mode
Determine where to save the customizations
Required post-customization step
Replace images
Customize the login page