Customise Header, Footer and Logo - SuperWEB2

This section describes how you can modify the header and footer, as well as replacing the main SuperWEB2 logo with your own branding.

Change the Header and Footer Text

The text used in the header and footer is defined in <tomcat_home>\webapps\webapi\WEB-INF\classes\messages.properties.

There may be multiple copies of this file for different languages and locales, with names like messages_ar.properties and messages_de.properties. Each one contains the text used for different languages. Depending on which languages are in use on your deployment, you may need to make these changes in multiple versions of the file. The properties file that is used will depend on the language settings in the end user's web browser, the set of supported locales defined in the faces-config.xml configuration file, and the language selected by the user from the drop-down list. See Multilingual and Localisation Support - SuperWEB2 for more information about localisation and how SuperWEB2 uses the properties files.

The header and footer text is defined as follows:

footer.feedback=Feedback
footer.enquiry=Enquiry
footer.needHelp=Need Help?
footer.training=Training
footer.bannerAlt=SuperWEB2

The first four strings defined here are used in the footer text, while the last one is used as alt and title text for the header logo image (this text is used if the image cannot be displayed, and by screen readers).

If all you want to do is change one of these text strings, you can do this by editing messages.properties (and the other language versions of this file if applicable) and restarting SuperWEB2.

Replace the Logo

You can replace the main SuperWEB2 logo with your own branding, and you can also choose whether to display the logo in the top navigation bar (this is the default from version 9.6 onwards), or above the navigation bar (this was the default in earlier releases of SuperWEB2).

Display the Logo in the Navigation Bar

This is the default from version 9.6 onwards. The header area is controlled by the following settings in the <tomcat_home>\webapps\webapi\layout\configuration.xml configuration file:

  <entry key="banner.inNavBar">true</entry>
  <entry key="banner.image.href">${request.contextPath}/images/sw2_logo.png</entry>
  <entry key="banner.image.alt">${messages['footer.bannerAlt']}</entry>
  <entry key="banner.image.title">${messages['footer.bannerAlt']}</entry>
  <entry key="banner.pixel.width">110</entry>
  <entry key="banner.pixel.height">34</entry> 

To change the logo, 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. Once you have copied the image to the server, change the value of <entry key="banner.image.href"> ... </entry> to the location of your preferred image file. You can use ${request.contextPath} as shown here to identify the <tomcat_home>/webapps/webapi directory.

When displaying the logo in the navigation bar, we recommend that you use a transparent image (PNG or GIF format) and scale the logo to around 30 - 40 pixels high.

You should also edit the other settings as required:

banner.image.alt

banner.image.title

banner.pixel.width

banner.pixel.height

When you have finished changing settings, restart Tomcat or the SuperWEB2 service to apply your changes.

Display the Logo Above the Navigation Bar

This was the default in earlier versions of SuperWEB2, where the logo was displayed above the navigation bar. If you have an existing configuration.xml file and logo that you were using in earlier releases then you can continue to use these.

If you wish to configure SuperWEB2 to display the logo above the navigation bar, then you will need to make some changes to the <tomcat_home>\webapps\webapi\layout\configuration.xml configuration file. Remove all of the banner keys in the new version of the file and replace them with the following (i.e., delete the banner.inNavBar and the banner.pixel.width keys and add the banner.background.image key):

  <entry key="banner.image.href">${request.contextPath}/images/sw2_logo.gif</entry>
  <entry key="banner.image.alt">${messages['footer.bannerAlt']}</entry>
  <entry key="banner.image.title">${messages['footer.bannerAlt']}</entry>
  <entry key="banner.background.image">${request.contextPath}/images/banner.png</entry>
  <entry key="banner.pixel.height">50</entry>

To change the logo, 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. Once you have copied the image to the server, change the value of <entry key="banner.image.href"> ... </entry> to the location of your preferred image file. You can use ${request.contextPath} as shown here to identify the <tomcat_home>/webapps/webapi directory.

When displaying the logo above the navigation bar, we recommend that you use an image between 50 and 70 pixels high.

You should also edit the other settings as required:

banner.image.alt

banner.image.title

banner.background.image

banner.pixel.width

When you have finished changing settings, restart Tomcat or the SuperWEB2 service to apply your changes.

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 four text links that you can change (the "powered by SuperSTAR" logo and the icon credit are required footer items and can not be changed):

The footer is configured by the following settings in configuration.xml:

<entry key="footer.link.0.text">${messages['footer.feedback']}</entry>
<entry key="footer.link.0.href">http://www.spacetimeresearch.com/contact-us.html</entry>
<entry key="footer.link.1.text">${messages['footer.enquiry']}</entry>
<entry key="footer.link.1.href">mailto:sales@spacetimeresearch.com</entry>
<entry key="footer.link.2.text">${messages['footer.needHelp']}</entry>
<entry key="footer.link.2.href">https://support.spacetimeresearch.com/anonymous_requests/new</entry>
<entry key="footer.link.3.text">${messages['footer.training']}</entry>
<entry key="footer.link.3.href">http://www.spacetimeresearch.com/training.html</entry>

As shown by this example:

• Text links are defined by two parameters (footer.link.x.text and footer.link.x.href).

• The order in which the items get displayed is controlled by the number, starting at 0 for the first item. In the example above the feedback link is first (position 0) followed by the text links for Enquiry, Need Help? and Training.

You can also add your own images to the footer. Image links are defined by four parameters (footer.link.x.href, footer.link.x.image.src, footer.link.x.image.alt and footer.link.x.image.title).

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. You can use the variable ${request.contextPath} to represent the <tomcat_home>/webapps/webapi directory when pointing to your own images. The maximum image height is 19px. 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. In order to support multiple languages, any text in the footer should be defined in messages.properties rather than written directly into configuration.xml.
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. In order to support multiple languages, any text in the footer should be defined in messages.properties rather than written directly into configuration.xml.

If you want to add your own footer images, you should:

• Save your image files somewhere on the server below the webapps directory.
• Add the alt text for the image to messages.properties.
• Update configuration.xml to include your image.

For example:

 footer.logoAltText=The alt text for the logo image

<entry key="footer.link.4.href">http://www.mywebsite.com</entry>
<entry key="footer.link.4.image.src">${request.contextPath}/layout/branding/mylogo.png</entry>
<entry key="footer.link.4.image.alt">${messages['footer.logoAltText']}</entry>
<entry key="footer.link.4.image.title">${messages['footer.logoAltText']}</entry>

Footer Text Links

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

footer.link.x.text

footer.link.x.href

If you want to add new text links, you can add new strings to messages.properties and then reference them here. Any text strings you add to messages.properties must have a unique name.

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

footer.newtext=My New Text 

<entry key="footer.link.5.text">${messages['footer.newtext']}</entry>
<entry key="footer.link.5.href">http://www.mywebsite.com</entry>