Legacy platform

Rebranding the application

You can rebrand the application and change the company logo in the banner and the About box. You can also change the product name across the application.

Procedure

  1. You can rebrand the application in the following ways:
    • Logo on the application banner: You must create a CSS file, include the CSS entry as shown in the example, and save the file.
      For example,
      .comapps.oneui .idxHeaderContainer .idxHeaderWidthLiquid .idxHeaderPrimary 
      .idxHeaderLogoBox .idxHeaderLogo {
        background: url('../icons/images/<image>') no-repeat 35% 23%;
      } 
      Where ../icons/images/<image> is the relative path to the logo.
      Note: The size of the image should be 43 X 16 pixels.
      For more information, see Customizing the user interface with LESS and property files.
    • Brand logo in the About box: Using the extensibility workbench, change the image source to point to your brand image in the About box.
    • Product name in the About box: Using the extensibility workbench, change the label value of the product name to the required product name in the About box.
    • Product name across the application: You can change the product name across the application by adding the WSC_Product_Name and Title_Product_Name bundle entries in the Extension_bundle.js file appropriately. For example, WSC_Product_Name: <custom product name>

      For more information, see Modifying the literals on non-extensible screens.

    • Application icon on browser tab: You can use one of the following procedures to change the application icon on the browser tab. If you do not prefer the first procedure, you may follow the second procedure. However, modifying the container.jsp file is not recommended.
      1. Using the current image name: Create an image that represents your product and rename it to IBMLogoWindow.ico. Copy the image to <INSTALL_DIR>/repository/eardata/wsc/extn/wsc/resources/css/icons/images directory.
      2. Modifying the container.jsp file:
        • For desktop version of the application, copy the container.jsp file from the <INSTALL_DIR>/repository/eardata/wsc/war/wsc/desktop/container directory to the <INSTALL_DIR>/repository/eardata/wsc/extn/wsc/desktop/container directory.

          Similarly, for mobile version of the application, copy the container.jsp file from the <INSTALL_DIR>/repository/eardata/wsc/war/wsc/mobile/container directory to the <INSTALL_DIR>/repository/eardata/wsc/extn/wsc/mobile/container directory.

        • In the container.jsp file, modify the href attribute to point to the path of the custom icon in the following line:

          <link rel="SHORTCUT ICON" href="<%=request.getContextPath()%>/wsc/resources/css/icons/images/IBMLogoWindow.ico"/>.

      Note: The size of the image should be 16 X 16 pixels.
    • Application name on browser tab: You can override the default product name by modifying the WSC_Product_Name bundle entry in the extnbundle.properties file appropriately.
  2. After customizing the application, create the wscdev.war file by running the following command: wscdev.war.\buildwar.sh -Dappserver=<application server>-Dwarfiles=wscdev
    (use .cmd in place of .sh, for windows.)
  3. Deploy the application WAR.