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
Make necessary changes to the CSS styles to fit to your design needs
