htmlr

#set($logFactory = $portal.getClass().forName('com.liferay.portal.kernel.log.LogFactoryUtil'))
#set($log = $logFactory.getLog('my-velocity-log'))
## Just don't forget you cannot use + as a concatenation in a VM file ;]
$log.debug("The value of the someVar variable: $someVar")

htmlr

#*
Lets say you want to customise a brand logo based on a custom var passed in the URL. Here's how I do it in Liferay 6.0 (below)

Unfortunately its not as clean as I would like, but i couldnt get any native cookie functions working in Liferay velocity so I had to use my own JS function to set the cookie and a foreach loop to search for the cookie :/

*#

#set($brand = "default")
#if(!$is_signed_in)
	#set($brand = $httpUtil.getParameter($current_url.toLowerCase(), "brand", false))

htmlr

#set ($document = $saxReaderUtil.readURL("$themeDisplay.getPortalURL()/c/journal/get_articles?delta=1&approved=true&expired=false&orderBy=modified-date"))
#set ($root = $document.getRootElement())
#set ($articles = $root.selectNodes("/result-set/result/root"))

#foreach ($article IN $articles)
            #set ($reserved-article-modified-date = $article.selectSingleNode("dynamic-element[@name='reserved-article-modified-date']/dynamic-content"))
            #set ($portalBeanLocator = $portal.getClass().forName('com.liferay.portal.kernel.bean.PortalBeanLocatorUtil'))
            #set ($dateFormatFactory = $portalBeanLocator.locate('com.liferay.portal.kernel.util.DateFormatFactoryUtil'))

        #set ($dateFormat = $dateFormatFactory.getSimpleDateFormat('EEE, dd MMM yyyy hh:mm:ss Z'))

htmlr

.featureBanner {
  position:relative;
  margin:20px
}
.featureBanner:before {
  content: "Featured";
  position:absolute;
  top:5px;
  left:-8px;
  padding-right: 10px;

htmlr

<div class="featureBanner">
  <img src="http://placehold.it/200x150" />
</div>

htmlr

<!-- Video element (live stream) -->
<label>Video Stream</label>
<video autoplay id="video" width="640" height="480"></video>

<!-- Canvas element (screenshot) -->
<label>Screenshot (base 64 dataURL)</label>
<canvas id="canvas" width="640" height="480"></canvas>

<!-- Capture button -->
<button id="capture-btn">Capture!</button>

htmlr

html, body { height: 100%; }
body { min-width:980px; margin:0; padding:0; }
section { width:100%; height:100%;  position:relative;
 background-repeat: no-repeat;
 background-position: center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

htmlr

div { border-radius:20px; border:1px solid #ccc; padding:20px; position:relative; margin-bottom:20px; }
div:before, div:after { content:" "; position:absolute; top:100%; display:block; border:1px solid #ccc; border-left:0; }
div:before {   width:25px; height:15px;background:white; border-top:0; border-bottom-right-radius: 15px; }
div:after { width:10px; height:14px; background: white;  border-bottom-right-radius: 20px; }

htmlr

a { display:block; }
a span { display:relative; }

htmlr

/*
Liferay 6.0.5 has printing issues in IE 6/7/8 it tends to trip up when printing the HTML 5 doctype as the html5 print shiv within Alloy UI has a bug (see https://issues.liferay.com/browse/LPS-16400). The below workaround renders content from a container element with class ".printarea" into a HTML 4 doctype within a popup to get around this issue.

Tested in IE 8, requires jQuery

*/
jQuery(document).on('click', '.printlink', function(e){
	e.preventDefault();
	 if(jQuery('.printarea').length > 0 && jQuery.trim(jQuery('.printarea').html())!=""){
	 	var win = window.open("about:blank", "Print", "width=700,height=550,menubar=1,toolbar=1,titlebar=1,resizable=1");