Actually Alfresco documentation already has quite good article on how to customize footer. But it took me some time to understand it and implement my version of footer, because I am not very familiar with Surf. What I want to achieve is to remove Alfresco logo because it takes to much space, decrease footer size and add some useful information to it - like version of the deployed application, link to ticket system, version of Alfresco.

Let’s see how to achieve following result: Custom Alfresco footer

Unfortunately this approach doesn’t work for pages which are built using Aikau (like Search results page)


First thing to do is create /web-extension/site-data/extensions/mycmpny/efiles/footer/footer.xml and register extension there:

<id>Customize Web Script Template for Footer</id>


I want to have three column footer displaying:

Usually copyright is just a static text, like MyCmpny © 2013-2016, but then you need to change the end year every year, since footer implementation is in *.ftl** file let’s use some dynamic features. Like getting the current year: ${.now?string.yyyy} and put it in span:

<span class="copyrightMycmpny">
<span><a href="http://home.mycmpny" target="_blank">MyCmpny</a> &copy; 2015-${.now?string.yyyy}</span>


Ftl (maybe Spring, not sure) provides access to the maven version of the application with simple ${version} and also the version of Alfresco which is being used ${alfresco.client.war.version}:

<span class="version">
<a href="#" onclick="Alfresco.module.getAboutShareInstance().show(); return false;">
Cool ECM app</a>
(version ${version}) /
<a href="">Alfresco</a> ${alfresco.client.war.version}

It would be just a link with text, but let’s add multilanguage support. Add file /web-extension/site-webscripts/mycmpny/efiles/footer/ with label.snow=Support is <a href=""> here. To get the proper message ftl has msg() function which is used like this:

<span class="snow">

Put everything together in /web-extension/site-webscripts/mycmpny/efiles/footer/footer.get.html.ftl:

and style with some css in src/main/resources/META-INF/components/footer/my-footer.css:

float: right;
line-height: 20px;
width: 33%;
text-align: right;
padding-right: 1em;
float: left;
line-height: 20px;
padding-left: 1em;
width: 33%;
text-align: left;
line-height: 20px;
width: 33%;
text-align: center;
.sticky-footer {
height: 20px;
margin-bottom: -20px;