Modules: Custom Footer

2024-04-19

Premium Feature — Available with all Premium Editions of LabKey Server. Learn more or contact LabKey.

The server provides a default site-wide footer which renders the text “Powered by LabKey” with a link to the labkey.com home page. Administrators can provide a custom header for the entire site or for an individual project.

To create a custom footer that can be made available anywhere on the site, place a file named _footer.html at the following location in a module of your choice:

mymodule
resources
views
_footer.html

The footer is written in HTML and can render any kind of HTML content, such as links, images, and scripts. It is also responsible for its own formatting, dependencies, and resources.

Images and CSS Files

Associated images and CSS files can be located in the same module, as follows, then used in the footer.

mymodule
resources
web
mymodule
myimage.png

To reference an image in a footer, you would use include soemthing like this in your html:

<p align="center">
<img src="<%=contextPath%>/customfooter/myimage.png"/> This is the Footer Text!
</p>

Example

The following simple _footer.html file adds icons and a message across the bottom of the page. Create a new _footer.html file in the location described above; we used a "footerTest" module created in our development test environment. The default LabKey footer, which reads "Powered by LabKey" is in the Core module. Using this sample content will give you a simple starting place for your own footer.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p style="text-align:center; font-size:16px;">
<br />
<span class="fa fa-flag"></span> <b>This is a custom footer - from the footerTest module</b> <span class="fa fa-flag"></span>
<br />
</p>
</body>
</html>

Controlling whether to display a footer and which version to use is done using the Page Elements tab. At the site level, this tab is on the Admin Console > Look and Feel Settings > Page Elements. At the project level, this tab is on the Project Settings page. Learn how in this topic:

The footer is shown at the bottom of the page.

Related Topics