Skip to main content
OCLC Support

Banner graphic

Discover options for configuring your own graphic in the Folio banner area using OLIB Web.


In Folio, the banner is the top section of the screen, where you can include a graphic e.g. for your own organisation's logo. The default graphic used in the Folio banner is OCLCBannerLogo.gif.

It is left-aligned and the banner section is right-filled with white space:

Default OCLC banner in Folio

You can have an internal graphic stored on your system's icons directory as in the OCLC default above (/hmtl/icons directory), or you can use an external graphic stored on a public server. The graphic can either be "static" so that when the user re-sizes the window, the graphic stays the same size; or it can be "stretchy" so that when the user re-sizes the window, the graphic stretches and increases in size with the window.

View and edit banner settings

To view the banner configuration settings files:

  1. Go to OPAC>Configuration Settings.
  2. In Other Searches, select the Configuration Settings by Setting search.
  3. To display a hitlist of banner settings search for banner:
Config Setting ID Interface Config Block Setting Value Sequence1 Sequence2 Include?
604660 gno_startup bannerGraphic "OLIBBeach3.png" 11 0 Y
604663 1 gno_startup bannerGraphicAlt "The OLIB Folio logo as a banner - click anywhere on the banner to re-load the application" 14  0 Y
604661 1 gno_startup bannerGraphicHeight     "52" 12 0 Y
604662 1 gno_startup bannerGraphicTitle "Click anywhere on the banner to re-load the application" 13 0 Y
1000002 1 gno_startup bannerGraphicURL "http://writenonfictionnow.com/wp-con...to-300x171.jpg" 15 0 Y
604682 gno_startup bannerHTML concat("<IMG SRC='",  gnosys_html, "/icons/", bannerGraphic, "' width='100%%' height='", bannerGraphicHeight, "' title='", bannerGraphicTitle, "' alt='", bannerGraphicAlt, "' onClick='gnoLogout(dquotcleardquot);'>")  33 0 N
604683 1 gno_startup bannerStyles concat("style='background-image: url(", gnosys_html, "/icons/OCLCBannerLogo.gif); background-position: left center; background-repeat: no-repeat; background-size: auto 60%; background-color: white;' title='", bannerGraphicTitle, "' alt='", bannerGraphicAlt, "' onClick='gnoLogout(dquotcleardquot);'") 34 0 Y

As shown above, the Value field is where you specify the configuration you require.

  1. Click on the Setting link displays the record details.
  2. Choose from one or a combination of the Folio settings below, depending on your requirements:
bannerGraphic The original place to specify your banner graphic file name that resides on the Folio server in /hmtl/icons. This will always be shown stretched horizontally across the top of the browser page unless used in conjunction with other settings.
bannerHTML Used if you want the graphic to be re-sized when the end user re-sizes the browser window.
bannerStyles Allows you to have more control of the appearance of the graphic, keeping it the same size when the Folio window is re-sized; controlling positioning, background colour.
bannerGraphicURL The original place to enter a url in order to use a graphic stored elsewhere on a public server.
  1. When you have amended a setting, make sure you have Include = Yes, save it, and refresh your Folio by clicking on the banner.

 Tip: if you are making changes to these values that are not straightforward, it is advisable to Create a Close Copy of the setting and "exclude" that before starting so that you can refer back to it should the change not have the desired effect.

bannerGraphic

The original place to specify your banner graphic file name that resides on the Folio server in /hmtl/icons. This will always be shown stretched horizontally across the top of the browser page:

Example stretched banner graphic

You can also use bannerGraphic in conjunction with these settings:

Setting name Description
bannerGraphicAlt The text to show if the image cannot be displayed for some reason
bannerGraphicTitle The text to show when the user hovers over the graphic
bannerGraphicHeight

The height (in pixels) to assign to the display of this graphic.

 Caution: this should not normally change as it may cause issues for the rest of the page. Do not set it to a value greater than 52 and you should only reduce it below 52 if you are implementing the top_nav_bar setting (which is designed to an individual customer’s requirement at this point).

 If you do not want it to be stretched horizontally across the top of the browser page, use in conjunction with one or more of the settings below.

bannerHTML

This setting can be used if you want the graphic to be re-sized when the end user re-sizes the browser window. The graphic file can be in /html/icons, or careful editing of the Value field will allow an image to be retrieved from another web site / a public server. Editing the Value field also allows it to be used with bannerGraphic (and all its related settings) and bannerGraphicURL.

If the setting does not already exist in your OLIB Web,  you would need to create it:

  1. In OPAC> Configuration Settings click New Record to create bannerHTML.
  2. Set the Config Block to gno_startup.

Include either bannerHTML or bannerStyles (below). If both are included, both will be displayed. However, bannerHTML will be displayed on top of bannerStyles, which means that the graphic will be re-sizable.

Examples of "Value" on bannerHTML

concat("<IMG SRC='", gnosys_html, "/icons/", bannerGraphic, "' width='100%' height='", bannerGraphicHeight, "' title='", bannerGraphicTitle, "' alt='", bannerGraphicAlt, "' onClick='gnoLogout(dquotcleardquot);'>")

This displays the graphic file specified in the bannerGraphic setting. It assumes that the file is physically located in the html/icons directory on the Folio web server.

concat("<IMG SRC='", bannerGraphicURL, "' width='100%' height='", bannerGraphicHeight, "' title='", bannerGraphicTitle, "' alt='", bannerGraphicAlt, "' onClick='gnoLogout(dquotcleardquot);'>")

This displays the graphic referenced in bannerGraphicURL.

concat("<IMG SRC='http://www.eatock.com/files/book-show74.jpg' width='100%' height='", bannerGraphicHeight, "' title='", bannerGraphicTitle, "' alt='", bannerGraphicAlt, "' onClick='gnoLogout(dquotcleardquot);'>")

This uses an http URL to locate an image that is available somewhere on the intranet/internet.

In all cases, dquot is replaced with a double-quote symbol ("). The dquots are all essential. If they are replaced with real double-quotes in the config setting, the banner graphic will not display correctly.

bannerStyles

This setting allows you to have more control of the appearance of the graphic, keeping it the same size when the Folio window is re-sized; controlling positioning, background colour. This can also include the actual filename of your locally stored graphic or it can be configured to use the one in bannerGraphic.

By default, this uses the supplied OCLCBannerLogo.gif. Careful editing of the bannerStyles value will allow an image to be retrieved from another web site. For example:

Supplied: … background-image: url(", gnosys_html, "/icons/OCLCBannerLogo.gif) …

Edited: … background-image: url(http://www.oclc.org/content/dam/oclc...ation-logo.png) …

Setting Use
background-position The first value is the image's horizontal position - change to "left" to make it left - aligned, or even "right" to make it right - aligned. The second "center" is the image’s vertical position. It is recommended that this is left at "center".
background-repeat no-repeat means that the image is only displayed once. repeat-x repeats the image horizontally, i.e. across the top so that it fills the width of the browser window.
background-size You can display the image at its normal size or shrink or grow it horizontally and/or vertically. The 1st 100% is the width. The 2nd 100% is the height. This can be defined as a percentage of the image's original size or in pixels (e.g. 52px).
background-color  If the image does not cover the full width of the browser window, this colour will fill the uncovered space.

 

Examples of "Value" in bannerStyles

concat("style='height: ", bannerGraphicHeight, "px; background-image: url(", gnosys_html, "/icons/", bannerGraphic, "); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; background-color: rgb(235,239,243);' title='", bannerGraphicTitle, "' alt='", bannerGraphicAlt, "' onClick='gnoLogout(dquotcleardquot);'")

This displays the graphic file specified in the bannerGraphic setting. It assumes that this file is physically located in the html/icons directory on the Folio web server. It uses standard CSS styles to determine various outcomes as listed above.

concat("style='height: ", bannerGraphicHeight, "px; background-image: url(", bannerGraphicURL, "); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; background-color: rgb(235,239,243);' title='", bannerGraphicTitle, "' alt='", bannerGr aphicAlt, "' onClick='gnoLogout(dquotcleardquot);'")

This displays the graphic referenced in bannerGraphicURL.

concat("style='height: ", bannerGraphicHeight, "px; background-image: url(http://www.eatock.com/files/book-show74.jpg); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; background-color: rgb(235,239,243);' title='", bannerGraphicTitle, "' alt='", bannerGraphicAlt, "' onClick='gnoLogout(dquotcleardquot);'")

This uses an http URL to locate an image that is available somewhere on the intranet/internet.

bannerGraphicURL

This setting is not included by default in OLIB, so you would need to create it. It is the original place to enter a url in order to use a graphic stored elsewhere on a public server.

  1. In OPAC> Configuration Settings click New Record to create bannerGraphicURL.
  2. Set the Config Block to gno_startup.
  3. Enter the http URL of the required graphic in the Value field:

If the bannerGraphic setting is defined, it will be used in preference to the bannerStyles (internal) setting.  If the bannerGraphicURL setting is not defined, OLIB will display the graphic that is specified in the bannerStyles setting (which must be physically located on the web server on which Folio is installed).

 

  • Was this article helpful?