Rebranding Sterling File Gateway and myFileGateway

You can rebrand Sterling File Gateway and myFileGateway to use your company's logo or other special content. To customize the look of Sterling File Gateway and myFileGateway, you create a skin, reference this new skin, and restart your system. You can use the same or different skins for Sterling File Gateway and myFileGateway.

The following figure shows the location of the portions of the screens you can rebrand:
Horizontally across the top of the Sterling File Gateway home screen, the fields that can be rebranded are header, application title, background image, username, and corporate logo. Vertically down the left side of the Sterling File Gateway home screen, the fields that can be rebranded are top menu, central panel, and footer.
The corresponding file names are:
  • Header:
    • [skin]/brandingcontent/header.txt
    • [skin]/brandingcontent/myFgHeader.txt
    • [skin]/load_skin.js
    • [skin]/images/FGimages/brandingimages/...
  • Top Menu: [skin]/skin_styles.css
  • Central Panel:
    • [skin]/skin_styles.css
    • [skin]/load_skin.js
    • [skin]/images/…
  • Footer: [skin]/brandingcontent/footer.txt
  • Login Footer:[skin]/brandingcontent/loginFooter.txt
Note: If you rebranded Sterling File Gateway in a previous version, you must make an additional change after you install Build 5201. Add the menuBackground property to your custom skin .css file as in the following:
/* --- menu background color for main navigation bar; 
default is #7896CF --- */
.menuBackground {
background-color: #7896CF;
}

To rebrand Sterling File Gateway:

  1. Locate files in the following directories for the default skins:
    <install_dir>/container/Applications/filegateway/isomorphic/skins/FileGateway_vXXX

    and

    <install_dir>/container/Applications/myfilegateway/isomorphic/skins/FileGateway_vXXX where vXXX is the version identifier of the skin.
  2. Copy and rename the “FileGateway_vXXX” directory in path: <install_dir>/container/Applications/filegateway/isomorphic/skins/FileGateway_vXXX

    You can use any valid directory name. Use a version number in your skin name, such that if you make changes to your skin files, your user's browsers will automatically fetch new skin files as opposed to using the browser cache. In the next steps, the renamed directory is referred to as [skin].

  3. To customize the header, you can change the following elements:
    • Application Title
    • Background Image
    • Corporate Logo
    • Position of the user name
    • HeaderALT
  4. To change the Application Title:
    1. Open the following file:
      [skin]/brandingcontent/header.txt
    2. Change line 11 to refer to your company name (<span class="ibm-banner-product-name">My Company</span>)
    3. Open [skin]/brandingcontent/myFgHeader.txt
    4. Change line 11 to refer to your company name (or another name) (<span class="ibm-banner-product-name">My Company</span>)
  5. To change the browser title text, which appears up in the top left-hand side of the browser (if different from Application Title, mentioned in the graphic, above) set the variables:
    • fgWindowTitle (for Sterling File Gateway)
    • myfgWindowTitle (for myFileGateway)
    in customer_overrides.properties as
    filegateway_ui.fgWindowTitle=xxx
    and 
    filegateway_ui.myfgWindowTitle=xxx
  6. To change the Corporate Logo:
    1. Create a new Corporate Logo GIF image, which should be 15 pixels high by 41 pixels wide and named “hdr_logo.gif”
    2. Place this GIF in the following directory:[skin]/images/FGimages/brandingimages/
    3. Open the following file: [skin]/brandingcontent/header.txt
    4. Change the reference to isomorphic/skins/FileGateway/images/FGimages/brandingimages/ibm-logo-white.gif to refer to your skin's directory and logo filename where your corporate logo image is located (isomorphic/skins/[skin]/images/FGimages/brandingimages/ hdr_logo.gif). You should also change the image 'alt' tag (alt="My Company").
    5. Open [skin]/brandingcontent/myFgHeader.txt
    6. Change line 13 to refer to your skin's directory where your corporate logo image is located (isomorphic/skins/[skin]/images/FGimages/brandingimages/ hdr_logo.gif). You should also change the image 'alt' tag (alt="My Company") on the same line.
  7. To change the position of the user name:
    1. Open the following file:[skin]/load_skin.js
    2. Change the two variables on Lines 21 and 22 to position the name label where you desire:
      • headerUserNameTop (expressed in absolute pixels from the top)
      • headerUserNameLeft (expressed as a percentage of page width, from the left side)
  8. To change the Log In page footer:
    1. Open the following file: [skin]/brandingcontent/loginFooter.txt
    2. Modify the content to refer to your company name.
  9. To change the footer for all pages after the Log In page:
    1. Open the following file: [skin]/brandingcontent/footer.txt
    2. Modify the content to refer to your company name.
    The <DIV> within the footer will be modified such that only a background color is used and not a background image. You can modify the <DIV> if preferred. The color of the footer background is found in load_skin.js as the variable 'footerBkClr' and has been explained in the page 'load_skin.js' comments.
  10. To turn off the splash page:
    1. Locate directory: [skin]/images/FGimages/brandingimages.
    2. Copy the file, "BACKUP_noSplash.gif"
    3. If you are turning off the 'splash page' for Sterling File Gateway, rename the copy of the file to "SFGsplash.gif," overwriting the existing file. If you are turning off the 'splash page' for myFileGateway, rename the copy of the file to "myFGsplash.gif," overwriting the existing file.
  11. To rebrand the myFileGateway 'splash page' using the generic splash page graphic:
    1. Locate directory: [skin]/images/FGimages/brandingimages.
    2. Copy the file, "generic_splash.gif".
    3. If you are rebranding the 'splash page' for Sterling File Gateway, rename the copy of the file to "SFGsplash.gif," overwriting the existing file. If you are rebranding the 'splash page' for myFileGateway, rename the copy of the file to "myFGsplash.gif," overwriting the existing file.
  12. To suppress hover help:
    1. Access the file [skin]/load_skin.js
    2. Around Line 398, find the section titled "11) Hovers"
    3. Within this section, locate the conditional statement "if (isc.Hover) { ..."
    4. Modify the property "defaultWidth:200" to a value of 0 (that is, "defaultWidth:0")
  13. To reference the new [skin]:
    1. Open load_skin.js in your new [skin] directory at: <install_dir>/container/Applications/filegateway/isomorphic/skins/[skin]
    2. Change approximately line 54 to refer to the directory name of your new [skin], that is, "isc.Page.setSkinDir("[ISOMORPHIC]/skins/[skin])"
    3. Copy this [skin] directory into the myfilegateway directory at: <install_dir>/container/Applications/myfilegateway/isomorphic/skins/
    4. To change the skin reference, modify filegateway_ui.properties.in to replace 'fgSkinName=FileGateway' with 'fgSkinName=[skin]' for Sterling File Gateway and myfgSkinName=FileGateway' with 'myfgSkinName=[skin]' for myFileGateway.
  14. To change the header only for myFileGateway:
    • Modify only the two files, header.txt and myFgHeader.txt in the new directory at:(<install_dir>/container/Applications/myfilegateway/isomorphic/skins/[skin]/brandingcontent
  15. Run the following scripts:
    • <install_dir>/bin/hardstop.sh
    • <install_dir >/bin/deployer.sh
    • <install_dir >/bin/run.sh
  16. If any branding files modified contain a matching .gz file (for example, "load_skin.js and load_skin.js.gz"), then the .gz file must be removed. Check the /install/noapp/deploy/myfilegateway/webapp or /install/noapp/deploy/filegateway/webapp directory to ensure your changes have been propagated as expected.
  17. Refresh your browser cache.
When you launch Sterling File Gateway, the new branding is shown in the header and footer. When your Partner users launch myFileGateway, the new branding is shown in the header.