Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Zen Section
id740652362

Some organisations want to use headers and footers, and colours for the RefTracker client interface pages, that match the headers and footers and colours that they use throughout the rest of their web pages. RefTracker provides a simple process for this but you will need an HTML programmer (usually your web master) to be able to implement this, if needed.

A range of features are provided that allow the client interface header and footer to be customised to meet your specific needs.  They include:

  • Customisable headers and footers for the staff and client interface pages with variables available for inclusion of RefTracker features in your custom header and footer files.
  • Customisable header and footer that is automatically used when the client pages are presented on a mobile phone.
  • Separate headers and footers for each available language translation.
  • Flexible options for hiding and displaying the header and footer.
  • The ability to define the header and footer to be used through URL parameters allowing one RefTracker system to use multiple headers and footers (different headers for different departments, for example).
  • A way to include a custom stylesheet between the <head></head> tags.

This page provides details of the features you can use to achieve all these things.  It relates to the client interface header only.  See Customising the staff interface if you need information about staff interface header.

 

There are a lot of features you can use, so, at the end of this page we provide a worked example of how simple it is to achieve a header, footer and css that makes your RefTracker pages match your corporate web pages - Header customisation - a simple worked example

How to customise the client interface Header and/or Footer

If you'd just like to modify what shows up in the standard header of your RefTracker client pages, as shown below, then you can change the images in that section using the 3.25, 3.26 and 3.29 parameters, and even remove the menu's or the full header/footer using parameters described in this page.

However, much more flexibility is described further down this page, including important information about being able to include css (stylesheets) to achieve the look that you want for the layout of all of the RefTracker client pages.

Similarly, you'd have to create a custom header and footer for your RefTracker client interface you should start by going to the Text File Editor under the Administration Utilities menu and copying the desired files from the Master directory to the Local directory. The relevant files are (examples are for English):

  • /template/text/master/en/headerClient.htm
  • /template/text/master/en/footerClient.htm

You can then edit the header and footer template files using the built in HMTL editor (at System>Utilities>Administration utilities>Text file editor) or download a copy to edit locally on your computer (and upload it after editing).  Note that each of the templates contain the head and body html tags that need to be left in the templates. RefTracker will extract only the html contained between the body tags of these files to use in the header/footer, so place the HTML that will provide the layout for your customised header/footer, between these tags.

It's important to note that you need to close any open HTML tags in this customized file. If you need to add any source links to CSS files, JS files or any external data, this may not be the best place to do it - you'd instead want to do that in the head.inc file - see "Stylesheets for custom header and footer Colours and Fonts" near the end of the page.

When you edit headerClient.htm the HTML that you provide will replace the RefTracker client interface header, including its navigation bar, so be sure that your new header provides all of the navigation links that your users will need (to your web site and to RefTracker pages like Check existing question).

You many also want to make colour and font changes.  See "Stylesheets for custom header and footer Colours and Fonts" near the end of this page.

RefTracker information that can be included in your Header/Footer:

In creating a new header and footer template, there are several variables that can be inserted or removed to insert values known by RefTracker into your header or footer.  The standard headerClient.htm and footerClient.htm files use many of these variables, providing an example of their use.

Variable

Description

{page_apptitle}

Replaced by the image selected in Parameter 3.29 – the image usually found in the upper left of the RefTracker screen.

{page_pagetitle}

Replaced by the current page's name

{page_help}

Replaced by the book icon and a link to the RefTracker Help

{page_quicksearch}

Admin Only – Replaced with the QuickSearch search box.

{page_service}

Replaced by the image selected in Parameter 3.25 – the image usually found in the upper right of the RefTracker screen next to the Logo image.

{page_logo}

Replaced by the image selected in Parameter 3.26 – the image usually found in the upper right of the RefTracker screen.

{page_topcontrol}

Replaced by the [Top] button used to jump back to the top of the RefTracker screen.

{page_languagecontrol}

Replaced by the language links to change the RefTracker user interface language.

{page_userdetails}

Admin Only – Replaced by the currently logged in user's name, location, and currently selected availability icon.

{page_copyright}

Replaced by the RefTracker version number, Altarama copyright, and Altarama logo.

{page_home}

Replaced by the text and a link to your library's website as defined in Parameter's 1.5 and 1.6.

{page_fontsize}

Replaced by the buttons to change the text size.

Turning the RefTracker menu bar off whenever this header is used

If you want to include your own menu bar in your header and so need to ensure that the RefTracker menu bar is turned off whenever this header template is used, add the following code to the CSS in your customised header template: #mbarDynamic{display: none;}

 

Multiple Headers/Footers

Another option is the ability to specify an alternate header and footer in the URL. An example use for this functionality would be creating a separate header for each department. The library's archives department could place their logo, name, etc. in a custom header while the main library displays the main library's logo, name, etc. Using the same parameters previously mentioned to turn the header and footer on or off, you can alternatively supply the name of any .htm file in the /template/text/local/en/ directory.

To create a new template file to be used in this way, go to System>Utilities>Administration utilities>Text file editor.  Use that page to create a local copy of the headerClient.htm or footerClient.htm file, give it a new name (such as archives.htm used in the example below), and make the changes that you want to make.  See the Text file editor section of the Administration manual Utilities section for details of the variables that can be used when editing these files.

Copy headerClient.htm and footerClient.htm, and rename them when you need to use this concept of multiple headers/footers.

 

Variable

Description

Pheader=<filename>

Changes the Header for the current page so that it uses the htm file you specify as <filename>.

Pfooter=<filename>

Changes the Footer for the current page so that it uses the htm file you specify as <filename>.

Sheader=<filename>

Changes the Header for the user session so that it uses the htm file you specify as <filename>.

Sfooter=<filename>

Changes the Footer for the user session so that it uses the htm file you specify as <filename>.


Examples:

  1. Change the RefTracker header for the entire user session:
    1. First use the Text File editor to copy and edit a template or upload a new template (must be a .htm file)
    2. In this example the new header is named archives.htm and is located in /template/text/local/en/. The smenu parameter turns the menu off (as this example archives custom menu includes its own menu).   http://www.reftrackerurl.com/reft100.aspx?key=RefShort&sheader=archives&smenu=0  

Note:

  1. This feature takes into account the language setting and directories. If you have more than one language enabled you will need to add the custom header to each language folder in the local directory.
  2. You can, and should, use these URL parameters with the email template links if you need to carry a different corporate theme through all of the Interactions with a client for a particular request type. For example, to use a special session header (in this case called archives.htm), for client interactions using the "manage" link in the Confirmation email, the html the email template would be:


Code Block
languagexml
<a href="{link_Check}&sheader=archives" style="font-weight: bold; text-decoration: underline; -ms-word-wrap: break-word;" target="client">Click here for options to manage this {label_question_no}</a></strong><br />(cancel it, amend it, add more information, or see its status)</span>


It is not necessary to include the ".htm" in the URL query string when specifying the customized header file name.

Additionally, for those needing different headers for different client bases, we recommend that you set your default header and footer to provide no identification. This will ensure that if a client finds a URL that does not specifically have a header file associated with it, there will be no risk that they would see an inappropriate header/footer.

 

Template selection order

Mobile Header/Footer:Template Selection Order

RefTracker will attempt to find a template using a cascade that checks for templates in the following order:

  1. A custom template specified for the page in the querystring (pheader or pfooter).
  2. A custom template specified for the session in the querystring (sheader or sfooter).
  3. If a 'phone' then check for the headerMobileClient.htm template.
  4. Check for the headerClient.htm template in the appropriate language folder.
  5. If no template exists then an empty <div></div> will be added to the page.


The local/master and Language folder structure is also taken into account for each of the template checks above.

 

Mobile Header/Footer

RefTracker automatically detects when it is running on a mobile phone where the smaller format may require different header and footer layouts. In order to accommodate this, a separate header and footer are used on mobile phones. The mobile header and footer are found in:

  • /template/text/master/en/headerMobileClient.htm
  • /template/text/master/en/footerMobileClient.htm

The default mobile header only contains the Title image from Parameter 3.25 using the {page_service} variable and the Page title using the {page_pagetitle} variable.



The default mobile footer only contains the Language control links using the {page_languagecontrol} variable and the Text resize buttons using the {page_fontsize} variable.



The mobile header and footer can be edited using the same procedure used to edit the other HeaderClient and FooterClient template files as described above.

80.16 Include hand held resources: You can prevent the client interface formatting from being used, should you need do that, by using parameter 80.16 "Include hand held resources".

Additional functionality for hiding and displaying Headers/Footers:

There are several methods for changing when the header, menu, and footer are displayed. These are especially useful for embedding forms into your webpages with an iframe. The following table describes the full suite of options for hiding (or displaying) the header, menu, and footer.

Variable

Accepted Values

 

Description

 

Show

Hide

 

extmode

0

1

Hides the Header and Menu for the user session.

pheader

true/yes/1/on

false/no/0/off

Hides the Header for the current page.

sheader

true/yes/1/on

false/no/0/off

Hides the Header for the user session.

pmenu

true/yes/1/on

false/no/0/off

Hides the Menu bar for the current page.

smenu

true/yes/1/on

false/no/0/off

Hides the Menu bar for the user session.

pfooter

true/yes/1/on

false/no/0/off

Hides the Footer for the current page.

sfooter

true/yes/1/on

false/no/0/off

Hides the Footer for the user session.

pdevice

phone/1

iframe/4

"pdevice=1" or "pdevice=phone" forces the mobile header, footer, and layout for the page.
"pdevice=4" or "pdevice=iframe" is designed for embedding forms in narrow iframes and will prevent the mobile design from showing.

sdevice

phone/1

iframe/4

"sdevice=1" forces the mobile header, footer, and layout for the page.
"sdevice=iframe" is designed for embedding forms in narrow iframes and will prevent the mobile design from showing.


Examples:

1. Hide the Header and Footer, but show the Menu for the entire user session:

http://www.reftrackerurl.com/reft100.aspx?key=RefShort&sheader=0&sfooter=0

2. Use extmode to hide the Menu but show the Header for the entire user session:

http://www.reftrackerurl.com/reft100.aspx?key=RefShort&extmode=1&sheader=1

3. Embed a form in a narrow iframe and force the mobile layout while hiding the header:

http://www.reftrackerurl.com/reft100.aspx?key=RefShort&sdevice=1&sheader=0

4. Embed a form in a narrow iframe and force the normal layout while hiding the header:

Note: In the examples above you don't have to specifically use the third parameter; however, if you try example 1 and then example 2 in the same session you'll notice that the footer is still hidden because we have not explicitly turned it back on.

4. Using it to display a RefTracker form in a “widget” style (click here for more details).

Removing the Header, Menu, or Footer completely

We do not recommend that you completely remove the header and footer for the RefTracker client interface as that would mean that when a user clicks on a link in a RefTracker email to manage their question, RefTracker will display without any corporate identifying information, like the image below:

However there are occasions where you will want this to occur, such as if you are using iframes.  To achieve this, you can customize the URL in the source of the iframe file to suit your needs. For example, if you used the following URL as your client-facing page:
http://lawdemo.altarama.com/reft100.aspx?key=Legal
You'll see both the header and footer are included when it is called using this URL.
If instead, you add parameters from the "Additional functionality for hiding and displaying Headers/Footers" section above, you will achieve the result you want.  For example this URL:
 http://lawdemo.altarama.com/reft100.aspx?key=Legal&sheader=0&sfooter=0&smenu=0

Your iframe tag may then look something like this:
<iframe src="http://lawdemo.altarama.com/reft100.aspx?key=Legal&sheader=0&sfooter=0&smenu=0" />


Stylesheets for custom Header and Footer colours and fonts

Colours can be changed within RefTracker using the CSS editor tool under System>Utilities>Administration utilities>CSS editor, that does simple colour mapping.  If you need more changes for your client interface pages than can be provided by this tool, you can add a custom.css file.

The recommended method for including additional custom CSS for the client interface is to provide your customisations in a css file that is included in the head.inc file located in the “/include/page/” directory. The contents of the head.inc file are included between head HTML tags of the RefTracker page as required for good formatting results. Although the RefTracker .css file can be amended, any such changes cannot be automatically updated by RefTracker software upgrades.  Using a supplementary css file in this way ensures that your changes will be independent of RefTracker system upgrades.

The first step to using this method is to upload a file with your custom.css to the “/include/css/local/” directory.

The next step is to add “<link type="text/css" rel="stylesheet" href="include/css/local/custom.css" />” to the head.inc file.

Your custom CSS will override the color and layout defined in the RefTracker CSS set and your custom.css file will not be overwritten when an update is applied.

The “/include/page/client/head.inc” file is loaded, along with the linked CSS on all of the RefTracker client pages. Using this method to load custom CSS allows you to make changes to the forms that will only affect the client side.

A separate head.inc file has been added to the “/include/page/staff/” folder that is included in all of the RefTracker staff pages because this method should mean that the staff css never needs changing.

What goes where?

At this point, you're probably ready to begin modifying your templates. We'd suggest the following approach:

All custom CSS should be defined in the head.inc file found by visiting System->Utilities->Admin Utilities->Upload/Download files, and then the /include/page/client directory. You should also define any javascript libraries you will be using on your custom pages (jQuery, etc.)

Any javascript needing to run post-page load should be put in the footer.aspx file. It should be some of the last code prior to the closing </body> tag. For example, if your organization makes use of third-party SEO, such as Google Analytics, you would include your designated Google Analytics script in this footer.aspx file. Please connect with your RefTracker Support agent for assistance with this if you need it.

 

Upgrading from previously customised Header and Footer (from before version 3.3.0.4)

Customers upgrading from releases prior to 3.3.0.4 will need to ensure that the include/page/client/header.aspx and footer.aspx files are the distribution versions of these files - not a customised version, in order for the client header and footer functionality described here to come into effect.  The distribution header.aspx file contains the following:

<div id = "pgobhdr" runat="server"></div>    (Includes the standard header layout above the menu bar)
<div id = "pgobmbar" runat="server"></div> (includes the standard menu bar - can be removed to remove the menu bar)

The distribution footer.aspx file contains the following:

<div id="pgobftr" runat=server></div>           (includes the standard footer)

If the header.aspx and footer.aspx files were previously customised and the above html removed and replaced with a custom html header, the custom header and footer will continue to function as it previously functioned, however adjusting the header .aspx and footer.aspx files is no longer recommended and your header and footer.aspx files may be overwritten by a future software upgrade, so please take this opportunity to redo your header and footer.
The  header.aspx and footer.aspx  files must be returned to their distribution state, in order for the new features to work. These new features include variable replacement, mobile detection, and additional url parameters in addition to "extmode=1". (It is possible to leave some html in the header.aspx and footer.aspx along with the <div id = "pgobhdr" runat="server"></div> and <div id="pgobftr" runat=server></div> tags which will be combined with the headerClient.htm and footerClient.htm contents, but may have unintended results.) 

 

Header customisation - a simple worked example

This example relates to the client interface only. It is not intended as an exhaustive explanation of all customising features, but shows what is possible with a few simple steps.The objective here is to add a page header which contains a custom logo on a coloured background with a clickable link.

 

Select a suitable logo image file

A suitable image can be any raster image file (e.g. those with a .png or .gif file extension)

 

This example uses the file JCSSE_logo.pngImage Removed

Here's what it looks like in a graphics editor -

 Image Added

 

 

 

 

Upload the image file to RefTracker

 

Image Removed

  • From the RefTracker staff home page select the menu item System > Utilities > Administration Utilities > File Upload/Download

 Image Added

 

 

 

 

 

 

 

 

Image Removed

The file manager opens.

 

  • In the left hand pane browse to /include/images/local.

 

  • The right hand pane will display image files already in your local RefTracker system - leave these as they are.

 

  • Then click the Upload button.

  

Image Added

 

 

 Image Removed

  • In the Upload dialog box, click the Select button and browse to the image file.

 Image Added

 

 

 

 

 

 

 

 

 

 Image Removed

  • Click Open and the file name will be shown in the Upload dialog box.

 

  • Click the Upload button,

 Image Added

 

 

 

 

 

 

 Image Removed

The file will be uploaded to your Reftracker  ../include/images/local directory.

 Image Added

 

 

 

 

 

 

 

 

 

Select the header file to use

The simplest method is to use the default client header file already installed with your RefTracker system.

 

 

 Image Removed

  • From the RefTracker main menu select System > Utilities > Administrator Utilities > Template Editor (text).

 Image Added

 

 

 

 

 

 

 

 Image Removed

The Text template editor displays the Master and Local template files on your system.

The Master files are a repository of available files. To use a file, it must be located in the Local repository.

 

  • Select the headerClient.htm file and click the Copy-> button.

 Image Added

 

 

 

 Image Removed

The headerClient.htm will be copied to the Local repository.

 

  • Highlight this file and click the Edit button.

 Image Added

 

 

 

 

 

 Image Removed

The text editor will be displayed showing the contents of the headerClient.htm file.

 

  • Click the <>HTML button.

 Image Added

 

 

 

 

 

 

 

Add a background banner to the header

 

 

 Image Removed

The text editor shows the HTML text of the headerClient.htm file.

 Image Added

 

 

 

 

 

 

 

 Here's the full text...

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <title>Template</title>

        <link href="../../../../include/css/system.css" rel="stylesheet" type="text/css" />

        <!--

        To turn off the RefTracker menu and use your own, go to System -> Utilities -> Administration utilities -> File upload/download and select the include/page/client folder.

        Download the header.aspx file and remove the line "<div id="pgobmbar" runat="server"></div>

        For more information on customising RefTracker, search your release number on http://refh.altarama.com/ for "Header, Footer and colour customisation"

    -->

    </head>

    <body>

        <div class="lyodiv" style="width: 22%;">

        <div id="pgobapptitle">{page_apptitle}</div>

        <div id="pgobpgtitle">{page_pagetitle}</div>

        </div>

        <div class="lyodiv" id="pgobhelp" style="width: 3%;">{page_help}</div>

        <div class="lyodiv" style="width: 38%;">&nbsp;</div>

        <div class="lyodiv" style="width: 37%; text-align: right;">

        <div id="pgobjservice" style="vertical-align: text-top; display: inline;">{page_service}</div>

        <div id="pgoblogo" style="padding-left: 20px; display: inline;">{page_logo}</div>

        </div>

        <div style="clear: both;">&nbsp;</div>

    </body>

</html>

 

 

 

 

Image Removed

... and how the RefTracker client home page looks before editing (open this in a new browser).

 Image Added

 

 

 

 

 

 

 

 

 

Image Removed

  • Insert these lines into the HTML text...

               

    <div style="background-color: #3c1053;">&nbsp;

    </div>

 

  • Click the Save button.

 

The &nbsp simply adds an empty line to the newly created div element (or section) so it becomes visible.

 Image Added

 

 

Image Removed

  • Refresh the RefTracker client home page.

 

A purple banner will now be displayed at the top of the page.

The height of the banner will automatically resize once the logo image is added.

 Image Added

 

 

 

 

 

 

 

 

Add the logo image to the header

 

Image Removed

  • Remove &nbsp; from the new div section and add this text...

 

<img width="216" height="100" title="https://www.jcsse.com/" alt="https://www.jcsse.com/" src="/include/images/local/JCSSS_logo.png" />

 

width and height define the size of the image in pixels.

title defines the tooltip text.

alt defines the text that would be shown if the image file can't be found.

src is the source of the image file i.e. the location it was uploaded to.

 

  • Click the Save button.

 Image Added

 

 

 

Image Removed

  • Refresh the RefTracker client home page.

 

The logo image has been added to the banner.

Note that the div background has auto-sized to accommodate the image.

 Image Added

 

 

 

 

Match banner and image background colours

 

It is often desirable to match the banner colour to the background of the logo image.

If the colour code of the logo background is not known, use the colour picker tool in a graphics editor.

 

In this case the RGB values are ...

 

                Red = 221

                Green = 216

                Blue = 224

 

Note - If the original logo image is created with a transparent background this step will not be necessary, but this shows how colours can be manipulated.

 

 

 

 

 Image Removed

  • In the new div element replace #3c1053 with...

 

                rgb(221, 216, 224)

 

 

 

  • Click the Save button.

 

 

 

  • Note - the html editor will automatically convert the RGB colour code to a HTML colour code.

    In this case   #ddd8e0

 Image Added

 

 

 

 

 Image Removed

  • Refresh the RefTracker client home page.

 

 

 

The banner and logo have now "merged" with the same background colour.

 Image Added

 

 

 

 

 

 

It may be desirable to create a link from the company logo that directs back to, for example, the company's corporate website.

In this case  http://www.jcsse.com/

Note - this is a dummy address used as an example and should be replaced with a viable web address.

 

 

 

 Image Removed

  • In the new div section, surround the img element with following two lines...

                <a href="https://www.jcsse.com/">

                </a>

 

 

 

  • Click the Save button.

 Image Added

 

 

 

 Here's how the complete div element should look...

<div style="background-color: #ddd8e0;"><a href="https://www.bbc.co.uk/"><img width="216" height="100" title="https://www.jcsse.com/" alt="https://www.jcsse.com/" src="/include/images/local/JCSSE_logo.png" /></a>

</div>

 

 

 

 

 Image Removed

  • Refresh the RefTracker client home page.

 

 

  • Click the logo image and the browser redirects to the web address specified in the last section.

Image Added

 

 

Scroll Ignore
Zen Section
id756321484
backgroundno
margin-40px 0px 60px 0px
borderno

Page Turners

...