Replacing images 



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

Procedure

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

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

  3. Replace the original image with your new image by saving the updated file into the images subdirectory of the appropriate customization directory.

  4. Optional: If the image is a non-sprited image and you want 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.
       

  5. Optional: If the image is a sprited image, update the CSS file to change the background image.

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

  7. See Customize the user interface for more details about how to apply the change permanently.

Example

To replace the product logo...

  1.     Retrieve the current logo graphic file from one of the applications. For example: Wikis.ear/qkr.share.wiki.war/nav/common/styles/images/logo.png.
     

  2.     Create your custom logo and name it logo.png.
     

  3.     Save your custom logo to <CUSTOMIZATION_DIR>/common/images/nav/common/styles/images/logo.png.
     

  4.     By default the logo has a height of 18px and a width of 90px that is defined in the in custom.css file. To use a product logo with a different size, add this CSS rule to the custom.css file and save it in the <CUSTOMIZATION_DIR>/common/styles/nav/common/styles/defaultTheme directory:

    .lotusui .lotusLogo, .lotusLoginLogo {
    width: px;
    height: px;
    }

5. To replace a sprited image, like the IBM logo in the login screen, alter this CSS rule in the custom.css file stored in the <CUSTOMIZATION_DIR>/common/styles/nav/common/styles/defaultTheme directory:

    .lotusui .lotusIBMLogo {
    background-image: url("path/to/your/custom/logo.png");
    background-position: 0 0; /* set to 0 unless using a sprite */
    background-repeat: no-repeat;
    height: px;
    width: px;
    }

Note: If you are supporting right-to-left languages, such as Arabic or Hebrew, make equivalent changes to the customRTL.css file and save that in the <CUSTOMIZATION_DIR>/common/styles/nav/common/styles/defaultTheme directory as well.

 


Parent topic

Customize the user interface


+

Search Tips   |   Advanced Search