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;