Leveraging the configuration power of Liferay’s new Theme Settings API we can build footer Navigation links with the webcontent without needing to edit the theme and redeploying everytime a new link needs to be added or a style needs to be changed.

1. Create a theme setting attribute “footer-content-id” by following this liferay blog and adding the <settings> element to your liferay-look-and-feel.xml

<theme id="xtivia-one" name="Xtivia One" >
<setting configurable="true" key="footer-content-id" value="" type="text" />

2. Add the below code to your theme’s init_custom.vm

#set($footer-content-id = $theme_display.getThemeSetting("footer-content-id"))

3. And the below code to the portal_normal.vm

<div id="footer-nav">
<div class="xtivia-columns">

4. In your theme’s custom.css add the following styles. Modify the styles to fit your needs.

#footer-nav .xtivia-columns {
margin-left: 30%;
.xtivia-col-4-1 {
float: left;
padding: 0 0 10px 40px;
#footer-nav {
    background: -moz-linear-gradient(center top ,  #FFB980, #FFFFFF) repeat scroll 0 0 transparent;
background-image: -webkit-gradient(linear,0 0,0 100%,from(#FFB980),to(#FFFFFF));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFB980', endColorstr='#FFFFFF');
clear: both;
float: left;
width: 100%;
text-align: left;

5. With the theme ready and deployed, let’s create a webcontent item from Control Panel -> Webcontent

<div class="xtivia-col-4-1">
<h3>About Us</h3>
<li><a href="LINK TO YOUR PAGE">Our Executive Team</a></li>
<li><a href="LINK TO YOUR PAGE">Our Customers</a></li>
<li><a href="LINK TO YOUR PAGE">Our Partners</a></li>
<li><a href="LINK TO YOUR PAGE">Employment</a></li>
<div class="xtivia-col-4-1">
<li><a href="LINK TO YOUR PAGE">Support Forums</a></li>
<li><a href="LINK TO YOUR PAGE">Knowledge Base</a></li>
<li><a href="LINK TO YOUR PAGE">Submit a Support Request</a></li>
<div class="xtivia-col-4-1">
<li><a href="LINK TO YOUR PAGE">News</a></li>
<li><a href="LINK TO YOUR PAGE">Blogs</a></li>
<li><a href="LINK TO YOUR PAGE">Events</a></li>
<li><a href="LINK TO YOUR PAGE">Academic collaboration</a></li>
<li><a href="LINK TO YOUR PAGE">Research collaboration</a></li>
<div class="xtivia-col-4-1">
<h3>Contact Us</h3>
<li><a href="LINK TO YOUR PAGE">Write to Us</a></li>
<li><a href="LINK TO YOUR PAGE">Phone</a></li>

6. Take the content id of the webcontent and set it in theme setting attribute “footer-content-id” and save


Make necessary changes to the CSS styles to fit to your design needs

Share This