(888) 685-3101 ext. 2

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

<look-and-feel>
<compatibility>
<version>6.1.0+</version>
</compatibility>
<theme id="xtivia-one" name="Xtivia One" >
<settings>
<setting configurable="true" key="footer-content-id" value="" type="text" />
</settings>
</theme>
</look-and-feel>

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">
#if($footer-nav-content)
$footer-nav-content
#end
</div>
</div>

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>
<ul>
<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>
</ul>
</div>
<div class="xtivia-col-4-1">
<h3>Support</h3>
<ul>
<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>
</ul>
</div>
<div class="xtivia-col-4-1">
<h3>Resources</h3>
<ul>
<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>
</ul>
</div>
<div class="xtivia-col-4-1">
<h3>Contact Us</h3>
<ul>
<li><a href="LINK TO YOUR PAGE">Write to Us</a></li>
<li><a href="LINK TO YOUR PAGE">Phone</a></li>
</ul>
</div>

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

look_feel

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

Share This