Customise Header, Footer and Logo
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 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 | The alt and title text for your logo image, which are used by screen readers and displayed by most web browsers when you move your mouse over the image. By default these are set to ${messages['footer.bannerAlt']} , which will be replaced with whatever text is defined for this string in messages.properties for the current language. |
banner.pixel.width banner.pixel.height | The width and height of your logo image, in pixels. These values are used to position the other items on the navigation bar, as well as set the height of the bar. |
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 | The alt and title text for your logo image, which are used by screen readers and displayed by most web browsers when you move your mouse over the image. By default these are set to ${messages['footer.bannerAlt']} , which will be replaced with whatever text is defined for this string in messages.properties for the current language. |
banner.background.image | The location of the background gradient image. This image will repeat horizontally and vertically across the full width of the screen. By default, this setting is configured to use a plain white spacer image, so there is no visual gradient. If you want to show a gradient across the banner area, you can replace this with your own image.
|
banner.pixel.width | The height of the banner background image, in pixels. If you are changing the header logo, make sure you set this to a value that is big enough to accommodate the height of your new image. |
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
andfooter.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 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:
messages.properties
footer.logoAltText=The alt text for the logo image
configuration.xml
<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:
Setting | Description |
---|---|
footer.link.x.text | The link text to display. 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.href | The URL the text links to. |
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:
messages.properties
footer.newtext=My New Text
configuration.xml
<entry key="footer.link.5.text">${messages['footer.newtext']}</entry>
<entry key="footer.link.5.href">http://www.mywebsite.com</entry>