Using Custom Fields to Display Footer Navigation
The other day I was trying to figure out a good way to manage footer navigation in liferay through manage pages.
I wanted the theme to create a custom field of boolean type that could be set on a page. The benifit of the theme creating the custom field is that then the theme will know the name of the field to look for inorder to filter the navigation.
Here is what the navigation looks like. Footer Group 1 and Footer Group 2 have the Custom Field of “Footer Navigation” set to true.
Here is what the theme looks like.
Here is the code:
I create a variable called customFieldName so I can use that through my other vm files. I use the ExpandoBridge from the $layout class so the custom field will be added to the Page type in the custom fields. It checks to see if the custom field exsists, if not then it creates it.
In this file it only displays the navigation item if the custom field of “footer-navigation” is false
This code displays only the nav items that have the custom field “footer-navigation” set to true.
I would also like to thank Minhchau Dang for showing me an easier way of setting the Expando bridge
Skin Selectable Theme
A blog post on Liferay.com
Customize Look and Feel Settings for Portlet Embedded in a Theme by Ray Augé
setting look and feel settings on a non-instancable portlet embedded in the theme
(Source: liferay.com)
Add Localization in a Theme by Ray Augé
to add localizations in a theme, add this compile section your your build.xml and the languages in the usual location
- this can be useful if you add your own custom settings that the keys are not in the portal’s language.properties file.
(Source: liferay.com)
Compass and Sass Bundle for Textmate
Install Instructions:
mkdir -p ~/Library/Application\ Support/TextMate/Bundles
cd ~/Library/Application\ Support/TextMate/Bundles
git clone -b TextMate git://github.com/kuroir/SCSS.tmbundle.git “SCSS.tmbundle”
osascript -e ‘tell app “TextMate” to reload bundles’
Syze: Think @media queries powered by Javascript
syze is a library for JavaScript that lets you easily target your designs by device or browser sizes. syze makes designing for desktops, televisions, tablets, and mobile devices simultaneously as easy as CSS. syze works before page load so there is no flicker. Size can update on window resize and orientation change - it works cross-browser, cross-device, cross-library and is less than 1KB.
created by Jonathan Neal
Theme Layout Template PSD File
There is actually a PSD of layout temples located in webapps/ROOT/layouttpl/thumbnails.zip
this file helps you make thumbnails like below:
