Marfeel Docs

# Footer

If tenants choose to have a custom footer that shows their logo, links, etc, it must be enabled in the definition.json:

"customFooter" : {
    "links" : [ [ "Legal page", "https://example.com/legal-page/" ], [ "Terms and conditions", "https://example.com/terms-and-conditions" ] ],
    "mainLogo" : [ "Logo", "https://www.example.com/logo.png", 180 ]
}

Read in the definition.json article how to configure it in details.

Then, the styles of this custom footer can be edited with this mixin:

@include customFooter(
    $fontLinks: $secondaryFont,
    $textTransform: null,
    $backgroundColor: null,
    $topMargin: null,
    $linksColor: $secondary-color,
    $textColor: $mainTextColor,
    $linkDisplay: block,
	$padding: 30px $pageLayoutPadding);

There are cases where the previous extension point is not enough. Eg. The tenant needs extra images on top of the logo or links...

For that, and in combination with the previous flag, custom JSP can be added to fulfill the tenant's needs.

You can add content either to the top or bottom of the footer. To do so, create a file named customFooter__topExtras.jsp to add content on the top or customFooter_extras.jsp to add it to the bottom, in the tenant/themes/default/ folder.

AMP

To enable these extensions in AMP they must be AMP compatible, otherwise, AMP pages will be invalid.

Do so by adding the ampExtrasCustomFooter flag in definition.json.

Use a when block when required to configure separately AMP and non-AMP footers:

<c:choose>
 <c:when test="${!isAmp}">
     <img src="https://imagedomain.com/wp-content/image.jpg" width="300" height="250">
 </c:when>
 <c:otherwise>
     <amp-img src="https://imagedomain.com/wp-content/image.jpg" width="300" height="250">
 </c:otherwise>
</c:choose>

Don't forget to import <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> in your JSP to be able to use <c:> tags.

# Social Icons

To edit the social icons style, you can use this mixin:

@include customSocialIcons(
	$bgColor: null,
	$iconColors: null,
	$borderTop: null,
	$roundedIcon: null,
	$iconBg: null,
	$iconBorder: null,
	$margin: $trailingMargin);

Have in mind it affects the way social icons look in the lateral menu as well.

← Lateral Menu →