Introduction

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:

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

Extension

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

<extension>
  <modules>
    <module>
      <id>Customize Web Script Template for Footer</id>
      <version>1.0</version>
      <auto-deploy>true</auto-deploy>
      <customizations>
        <customization>
          <targetPackageRoot>org.alfresco.components.footer</targetPackageRoot>
          <sourcePackageRoot>com.mycmpny.footer</sourcePackageRoot>
        </customization>
      </customizations>
    </module>
  </modules>
</extension>

Footer

I want to have three column footer displaying:

copyright

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>
</span>

version

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">
  <span>
    <a href="#" onclick="Alfresco.module.getAboutShareInstance().show(); return false;">
      Cool ECM app</a>
    (version ${version}) / 
    <a href="https://www.alfresco.com/">Alfresco</a> ${alfresco.client.war.version}
  </span>
</span>

link to ticket system

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

<span class="snow">
  <span>${msg("label.snow")}</span>
</span>

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:

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