You’ve configured the Header and its navigation, but at the moment the Footer is a bit bare bones. In this section, you’ll update the Footer to include contact information for the Lunar Resort and include navigation with an embedded navigation portlet.
Follow these steps:
-
To keep the Portal Normal template uncluttered, create a separate template to hold the Footer’s markup. Create a new file called
footer.ftl
in the theme’s/src/templates/
folder. -
Copy the Footer markup (shown below) from
portal_normal.ftl
intofooter.ftl
:<footer id="footer" role="contentinfo"> <p class="powered-by"> <@liferay.language key="powered-by" /> <a href="http://www.liferay.com" rel="external">Liferay</a> </p> </footer>
And update the
<p>
element infooter.ftl
to include the classes shown below:<footer id="footer" role="contentinfo"> <p class="powered-by text-center text-white py-3 mb-0"> <@liferay.language key="powered-by" /> <a href="http://www.liferay.com" rel="external">Liferay</a> </p> </footer>
-
Add this
@liferay.navigation_menu
macro snippet above thepowered-by
paragraph to embed the navigation portlet. This configuration stores the portlet preferences in apreferencesMap
variable. ThedisplayDepth
of1
specifies that the portlet must only render the top-level parent navigation, andportletSetupPortletDecoratorId
sets the portlet decorator tobarebone
, which removes the portlet’s wrapper and only renders the portlet’s content:<nav id="navbarFooter"> <div class="text-center mx-auto"> <div class="nav text-uppercase" role="menubar"> <#assign preferencesMap = {"displayDepth": "1", "portletSetupPortletDecoratorId": "barebone"} /> <@liferay.navigation_menu default_preferences=freeMarkerPortletPreferences.getPreferences(preferencesMap) instance_id="footer_navigation_menu" /> </div> </div> </nav>
-
The visitors need some social media links so they can keep tabs on the latest and greatest news from the Lunar Resort. Replace the snippet you just added with the one below. This uses Clay icons and adds a wrapper to prepare for the next step.
<div id="navbarContactWrapper" class="row mx-0"> <nav id="navbarFooter" class="col-12 col-md-6 pt-5"> <div id="socialMediaWrapper" class="col-12 col-md-4 text-center mx-auto mb-4"> <h2 class="nav-heading"> Follow Us </h2> <div id="socialMediaLinks"> <ul class="nav flex-row mx-auto"> <li class="mx-2"> <div id="facebook"><a class="text-white" href="http://www.facebook.com/pages/Liferay/45119213107" target="_blank"><span class="hide">Facebook</span> <@clay["icon"] symbol="social-facebook" /> </a></div> </li> <li class="mx-2"> <div id="twitter"><a class="text-white" href="http://www.twitter.com/liferay" target="_blank"><span class="hide">Twitter</span> <@clay["icon"] symbol="twitter" /> </a></div> </li> <li class="mx-2"> <div id="linked-in"><a class="text-white" href="http://www.linkedin.com/company/83609" target="_blank"><span class="hide">LinkedIn</span> <@clay["icon"] symbol="social-linkedin" /> </a></div> </li> <li class="mx-2"> <div id="youtube"><a class="text-white" href="http://www.youtube.com/user/liferayinc" target="_blank"><span class="hide">YouTube</span> <@clay["icon"] symbol="video" /> </a></div> </li> </ul> </div> </div> <div class="text-center mx-auto"> <div class="nav text-uppercase" role="menubar"> <#assign preferencesMap = {"displayDepth": "1", "portletSetupPortletDecoratorId": "barebone"} /> <@liferay.navigation_menu default_preferences=freeMarkerPortletPreferences.getPreferences(preferencesMap) instance_id="footer_navigation_menu" /> </div> </div> </nav> </div>
-
Add this snippet below the closing
</nav>
tag to add the Lunar Resort’s contact information. Also, copy thelunar-resort-logo-vertical.png
asset from thelunar-resort-build/assets/images/
folder to the/src/images/
folder so you can use it in the Footer:<div class="contact-info-container text-center pt-5 pb-2 col-12 col-md-4 mx-auto mb-4"> <img alt="lunar-resort-logo" height="90" class="mb-2" src="${images_folder}/lunar-resort-logo-vertical.png" /> <div id="contactTextWrapper" class="row mx-0"> <p class="col-12 col-md-6"> 123 Mare Nectaris Lane<br> Mare Nectaris, Moon Colony 10010<br> </p> <p class="col-12 col-md-6"> Tel: 4-919-843-6666<br> Fax: 4-919-843-6667<br> <a href="mailto:info@lunarresort.com">info@thelunarresort.com</a> </p> </div> </div>
-
The Administrator doesn’t want to display the Footer on every page, so she would like the option to hide it. To do that, create a theme setting to optionally show the Footer. Open your theme’s
/src/WEB-INF/liferay-look-and-feel.xml
file and add this snippet just below the<template-extension>ftl</template-extension>
entry. This renders a togglable Show Footer option in the Look and Feel section for the theme’s configuration.<settings> <setting configurable="true" key="show-footer" type="checkbox" value="true" /> </settings>
-
Now you must define a FreeMarker variable to store the value of the
show-footer
theme setting so you can check for it inportal_normal.ftl
. Openinit_custom.ftl
and add the variable declaration below to set theshow_footer
variable to the value (true or false) of theshow-footer
theme setting:<#assign show_footer = getterUtil.getBoolean(themeDisplay.getThemeSetting("show-footer")) />
-
Open
portal_normal.ftl
and replace the Footer markup with the code snippet below to include the Footer template when theshow-footer
theme setting istrue
:<#if show_footer> <#include "${full_templates_path}/footer.ftl" /> </#if>
-
Open
_custom.scss
and add this snippet above the&.has-control-menu
styling to style the Footer:#footer { background-color: $lunar-resort-blue; color: $white; ul { margin-left: auto; margin-right: auto; &.navbar-nav { width: 410px; .nav-item.hover:after { width: auto; } a { color: $white; @include media-breakpoint-down(sm) { padding-left: 6px; padding-right: 6px; } } } } #socialMediaWrapper ul { width: 192px; li a { font-size: 2rem; } } p.powered-by a, .contact-info-container a { color: $lunar-resort-link-teal; } }
-
The majority of the Lunar Resort’s content is provided with Fragments. Since Fragments are out of the scope of this tutorial, you’ll upload the completed fragments. Open the Control Menu and navigate to Site Builder → Page Fragments, and select the Import option from the New dropdown menu. Import the
collections-lunar-resort.zip
asset from thelunar-resort-build/assets/
folder. -
Re-deploy the updated theme with the command below:
gulp deploy
The updated Footer and navigation should look like the figure below:
Figure 1: The updated Footer provides everything visitors need to follow and contact the Lunar Resort.
In the next section you’ll learn how to create a color scheme for the Lunar Resort.