Changing the IBM® Connections logo

To customize IBM® Connections to reflect the look and feel of your organization, specify a CSS override that replaces the IBM® Connections logo with your company logo.

About this task

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. You can replace both logos with your company logo.

Procedure

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

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

Save your 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

Open the CSS file in a text editor and add the following lines:
- To replace the IBM® Connections text-based logo with your 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 your 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 your 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 your company logo.
  - image_height is the height of the logo.
  - image_width is the width of the logo.
Note: If you are supporting right-to-left languages, such as Arabic or Hebrew, you must make equivalent changes to the customRTL.css file and save that in the customizationDir/themes/<theme_name>Theme directory as well.
Save and close the custom.css file.
Stop and restart the Common.ear file to pick up the CSS changes.
Clear the /temp and /wstemp directories, for example: c:\IBM\WebSphere\AppServer\profiles\AppSrv01\temp And c:\IBM\WebSphere\AppServer\profiles\AppSrv01\wstemp
When you are ready to publish your changes, turn off the customization debugging capability. Test whether your changes were added successfully by restarting the applications and refreshing the web browser.
A browser refresh shows your changes only if you turned on debugging. See Enabling live user interface customization editing mode for more details.
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 IBM® Connections.