Customizing the appearance of the Sterling B2B Integrator user interface

About this task

To edit a template:

Procedure

  1. Open the skins.properties_style_ext file in the install_dir/properties directory.
  2. Edit the user interface colors or fonts as desired by editing the appropriate properties in the skins.properties_style_ext file.
    style.cmmTreeHdrFontColor.value
    Specifies the font color for tree headers. Default setting is style.cmmTreeHdrFontColor.value=RGB(255,255,255).
    style.sectionHeader.value
    Specifies the font for section headers. Default setting is style.sectionHeader.value=Arial .
    style.sectionBg.value
    Specifies the background color for sections. Default setting is style.sectionBg.value=rgb(117,145,221) .
    style.pageBg.value
    Specifies the background color for pages. Default setting is style.pageBg.value=rgb(255,255,255) .
    style.loginFormFont.value
    Specifies the font for login forms . Default setting is style.loginFormFont.value=Verdana,Arial,Helvetica,sans-serif .
    style.tblBorder.value
    Specifies the color for table borders. Default setting is style.tblBorder.value=rgb(117,145,221) .
    style.sectionContent.value
    Specifies the font for section content. Default setting is style.sectionContent.value=Verdana,Arial,Helvetica,sans-serif .
    style.sectionHeaderFontColor.value
    Specifies the font color for section headers. Default setting is style.sectionHeaderFontColor.value=RGB(255,255,255) .
    style.sectionContentColor.value
    Specifies the color for section content. Default setting is style.sectionContentColor.value=rgb(102,102,102) .
    style.loginForm.value
    Specifies the color for login forms. Default setting is style.loginForm.value=RGB(193,214,235) .
    style.headerColor.value
    Specifies the color for headers. Default setting is style.headerColor.value=rgb(89,89,89) .
    style.cmmTreeBg.value
    Specifies the background color for trees. Default setting is style.cmmTreeBg.value=RGB(182,182,189) .
    style.contentBorder.value
    Specifies the color for border content. Default setting is style.contentBorder.value=rgb(128,128,128) .
    style.selectedTabColor.value
    Specifies the color for tabs when selected. Default setting is style.selectedTabColor.value=RGB(192,192,192) .
    style.td.value
    Specifies the font for table cells.. Default setting is style.td.value=Helvetica,Verdana,Arial,sans-serif .
    style.sectionSubHeader.value
    Specifies the font for section sub-headers. Default setting is style.sectionSubHeader.value=Helvetica,Sans-serif .
    style.cmmTreeLinkHover.value
    Specifies the font color for links when hovered over. Default setting is style.cmmTreeLinkHover.value=rgb(255,255,0) .
    style.cmmTreeHdr.value
    Specifies the color for tree headers. Default setting is style.cmmTreeHdr.value=RGB(117,145,221) .
    style.pageHeaderBg.value
    Specifies the background color for page headers. Default setting is style.pageHeaderBg.value=RGB(117,145,221) .
    style.sectionTextColor.value
    Specifies the font color for section text. Default setting is style.sectionTextColor.value=rgb(255,255,255) .
    style.cmmTreeHeaderBorder.value
    Specifies the border color for tree headers. Default setting is style.cmmTreeHeaderBorder.value=rgb(128,128,128) .
    style.header.value
    Specifies the font for headers. Default setting is style.header.value=Arial,Tahoma,Verdana .
    style.cmmTreeLink.value
    Specifies the font color for links in trees. Default setting is style.cmmTreeLink.value=RGB(0,0,0) .
  3. Save the skins.properties_style_ext file.
  4. Navigate to the install_dir/install/bin directory and perform one of the following:

    UNIX or Linux

    1. Run the setupfiles.sh file.
    2. Run the deployer.sh file.
    Windows
    1. Run the setupfiles.cmd file.
    2. Run the deployer.cmd file.
  5. Restart Sterling B2B Integrator for the changes to take effect.

Results

The skins.properties_style_ext file is uploaded into the Sterling B2B Integrator instance and the new skin settings are used after restarting the instance.

Example skins.properties_style_ext file

#Default Values
#Tue Aug 04 18:22:04 EDT 2015
style.cmmTreeHdrFontColor.value=RGB(255,255,255)
style.sectionHeader.value=Arial
style.sectionBg.value=rgb(117,145,221)
style.pageBg.value=rgb(255, 255, 255)
style.loginFormFont.value=Verdana, Arial, Helvetica, sans-serif
style.tblBorder.value=rgb(117, 145, 221)
style.sectionContent.value=Verdana, Arial, Helvetica, sans-serif
style.sectionHeaderFontColor.value=RGB(255,255,255)
style.sectionContentColor.value=rgb(102, 102, 102)
style.loginForm.value=RGB(193,214,235)
style.headerColor.value=rgb(89, 89, 89)
style.cmmTreeBg.value=RGB(182,182,189)
style.contentBorder.value=rgb(128, 128, 128)
style.selectedTabColor.value=RGB(192,192,192)
style.cmmTreeBorder.value=rgb(128, 128, 128)
style.selectedTabFontColor.value=RGB(255,255,255)
style.td.value=Helvetica, Verdana, Arial, sans-serif
style.sectionSubHeader.value=Helvetica, Sans-serif
style.cmmTreeLinkHover.value=rgb(255,255,0)
style.cmmTreeHdr.value=RGB(117,145,221)
style.pageHeaderBg.value=RGB(117,145,221)
style.sectionTextColor.value=rgb(255, 255, 255)
style.cmmTreeHeaderBorder.value=rgb(128, 128, 128)
style.header.value=Arial, Tahoma, Verdana
style.cmmTreeLink.value=RGB(0,0,0)

What to do next

The skins.properties_style_ext file can be manually copied to another installation or upgrade installation of Sterling B2B Integrator. After copying the file, you can apply the changes to the new Sterling B2B Integrator instance by running the setupfiles script and then the deployer script, and afterward restarting Sterling B2B Integrator. This can be done with both single node and cluster node installations and upgrades.

For information about the setupfiles and deployer scripts, see bin Directory Filesbin Directory Files.