Customise Header, Footer and Logo - SuperWEB2

In order to modify the header, footer and SuperWEB2 logo, you need to modify <tomcat_home>\webapps\webapi\layout\configuration.xml

Make a backup copy of this file before making any changes.

Replace the Logo

If you are replacing the logo then we recommend you use an image with a height of between 60 and 80 pixels. This will maintain readability without occupying too much screen real estate.

The header area of SuperWEB2 is controlled by the following settings in the configuration file:

<entry key="banner.image.href">/webapi/images/sw2_logo.gif</entry>
<entry key="banner.image.alt">SuperWEB 2</entry>
<entry key="banner.image.title">SuperWEB 2</entry>
<entry key="banner.background.image">/webapi/images/banner.png</entry>
<entry key="banner.height">65px</entry>

These settings are as follows:

To replace the SuperWEB2 logo with your own image file:

1. Copy your replacement logo image to a location below the webapps directory. You might want to create a directory within <tomcat_home>\webapps\webapi\layout\ called something like branding and then copy your image to that directory.

2. Open configuration.xml in a text editor.

3. Update banner.image.href to the location of your image. For example:

   HTML/XML

   <entry key="banner.image.href">/webapi/layout/branding/my_logo.gif</entry>

4. Optionally, update the banner.image.alt and banner.image.title settings. For example:

   HTML/XML

   <entry key="banner.image.alt">My SuperWEB 2</entry>
   <entry key="banner.image.title">My SuperWEB 2</entry>

5. Save configuration.xhtml.

6. Restart Tomcat (or the SuperWEB2 Service if using our SuperSTAR Suite).

Customise the Footer

There are two types of footer item you can add to SuperWEB2: text links and images with links.

The default configuration contains one linked image and four text links:

This is configured by the following settings in the configuration file:

<entry key="footer.link.0.href">http://www.spacetimeresearch.com</entry>
<entry key="footer.link.0.image.src">/webapi/images/STR-light-background.png</entry>
<entry key="footer.link.0.image.alt">SuperWEB2 - Powered by SuperSTAR</entry>
<entry key="footer.link.0.image.title">SuperWEB2 - Powered by SuperSTAR</entry>
<entry key="footer.link.1.text">Feedback</entry>
<entry key="footer.link.1.href">http://www.spacetimeresearch.com/contact-us.html</entry>
<entry key="footer.link.2.text">Enquiry</entry>
<entry key="footer.link.2.href">mailto:sales@spacetimeresearch.com</entry>
<entry key="footer.link.3.text">Need Help?</entry>
<entry key="footer.link.3.href">https://support.spacetimeresearch.com/anonymous_requests/new</entry>
<entry key="footer.link.4.text">Training</entry>
<entry key="footer.link.4.href">http://www.spacetimeresearch.com/training.html</entry>

As shown by this example:

• Image links are defined by four parameters (href, image.src, image.alt and image.title).
• Text links are defined by two parameters (text and href).
• The order in which the items get displayed is controlled by the number after footer.link, starting at 0 for the first item. In the example above the logo is first (position 0) followed by the text links Feedback, Enquiry, Need Help? and Training.

You can modify the existing footer items, as well as add and remove items.

Footer Images

Each image you want to include in the footer needs the following four settings:

Setting	Description
footer.link.x.href	The URL the image links to.
footer.link.x.image.src	The source for the image to display. The image file must be located below the Tomcat webapps directory. The maximum image height is 15px. If the image is larger than this it will automatically be resized in the browser to fit this size.
footer.link.x.image.alt	Alternative text for the image. This text is used if the image cannot be displayed, and by screen readers.
footer.link.x.image.title	The title text for the image. Most web browsers display this text when you move your mouse over the image.

Footer Text Links

Each text link you want to include in the footer needs the following two settings:

For example, to add an additional text link you could add the following:

<entry key="footer.link.5.text">My Link</entry>
<entry key="footer.link.5.href">http://www.mywebsite.com</entry>