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
- 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,
Where.comapps.oneui .idxHeaderContainer .idxHeaderWidthLiquid .idxHeaderPrimary .idxHeaderLogoBox .idxHeaderLogo { background: url('../icons/images/<image>') no-repeat 35% 23%; }
../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
andTitle_Product_Name
bundle entries in theExtension_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.- 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. - 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
directory.<INSTALL_DIR>/repository/eardata/wsc/extn/wsc/desktop/container
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
directory.<INSTALL_DIR>/repository/eardata/wsc/extn/wsc/mobile/container
- In the
container.jsp
file, modify thehref
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"/>
.
- For desktop version of the application, copy the
Note: The size of the image should be 16 X 16 pixels. - Using the current image name: Create an image that represents
your product and rename it to
- Application name on browser tab: You can override the default product name by modifying
the
WSC_Product_Name
bundle entry in theextnbundle.properties
file appropriately.
- Logo on the application banner: You must create a CSS file, include the CSS entry as
shown in the example, and save the
file.
- 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.) - Deploy the application WAR.