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:
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:
- 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.
- 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].
- To customize the header, you can change the following elements:
- Application Title
- Background Image
- Corporate Logo
- Position of the user name
- HeaderALT
- To change the Application Title:
- Open the following file:
[skin]/brandingcontent/header.txt
- Change line 11 to refer to your company name (<span
class="ibm-banner-product-name">My Company</span>)
- Open [skin]/brandingcontent/myFgHeader.txt
- Change line 11 to refer to your company name (or another
name) (<span class="ibm-banner-product-name">My Company</span>)
- 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
- To change the Corporate Logo:
- Create a new Corporate Logo GIF image, which should
be 15 pixels high by 41 pixels wide and named “hdr_logo.gif”
- Place this GIF in the following directory:[skin]/images/FGimages/brandingimages/
- Open the following file: [skin]/brandingcontent/header.txt
- 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").
- Open [skin]/brandingcontent/myFgHeader.txt
- 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.
- To change the position of the user name:
- Open the following file:[skin]/load_skin.js
- 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)
- To change the Log In page footer:
- Open the following file: [skin]/brandingcontent/loginFooter.txt
- Modify the content to refer to your company name.
- To change the footer for all pages after the Log In page:
- Open the following file: [skin]/brandingcontent/footer.txt
- 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.
- To turn off the splash page:
- Locate directory: [skin]/images/FGimages/brandingimages.
- Copy the file, "BACKUP_noSplash.gif"
- 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.
- To rebrand the myFileGateway 'splash page' using the generic
splash page graphic:
- Locate directory: [skin]/images/FGimages/brandingimages.
- Copy the file, "generic_splash.gif".
- 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.
- To suppress hover help:
- Access the file [skin]/load_skin.js
- Around Line 398, find the section titled "11) Hovers"
- Within this section, locate the conditional statement
"if (isc.Hover) { ..."
- Modify the property "defaultWidth:200" to a value of
0 (that is, "defaultWidth:0")
- To reference the new [skin]:
- Open load_skin.js in your new [skin] directory at: <install_dir>/container/Applications/filegateway/isomorphic/skins/[skin]
- Change approximately line 54 to refer to the directory
name of your new [skin], that is, "isc.Page.setSkinDir("[ISOMORPHIC]/skins/[skin])"
- Copy this [skin] directory into the myfilegateway directory
at: <install_dir>/container/Applications/myfilegateway/isomorphic/skins/
- 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.
- 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
- Run the following scripts:
- <install_dir>/bin/hardstop.sh
- <install_dir >/bin/deployer.sh
- <install_dir >/bin/run.sh
- 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.
- 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.