I've created a new .tpl file for a new layout that has 3 columns with specific colspans

<div class="columns-for-compass" id="main-content" role="main">
<div class="portlet-layout row-fluid">
<div class="portlet-column portlet-column-first span2" id="column-1">
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
</div>

<div class="portlet-column span4" id="column-8">
$processor.processColumn("column-2", "portlet-column-content")
</div>

<div class="portlet-column portlet-column-last span2" id="column-3">
$processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")
</div>
</div>
</div>

This file is called compass-layout.tpl and I've included it in my custom theme under /docroot/WEB-INF/src/layouttpl/custom/ folder. And my liferay-look-and-feel.xml looks like this

<?xml version="1.0"?>
<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 6.2.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_6_2_0.dtd">

<look-and-feel>
<compatibility>
<version>6.2.2+</version>
</compatibility>
<theme id="compass" name="Compass Theme">

<layout-templates>
<custom>
<layout-template id="compass-new-layout" name="3 Columns - Compass">
<template-path>/WEB-INF/src/layoutttpl/custom/compass-layout.tpl</template-path>
<wap-template-path>/WEB-INF/src/layoutttpl/custom/compass-layout.tpl</wap-template-path>
<thumbnail-path>/images/thumbnail.png</thumbnail-path>
</layout-template>

</custom>
</layout-templates>

</theme>
</look-and-feel>

When I build and deploy this theme, I go to a Site Page settings and I can see the layout under the Details section of the page as "3 Columns - Compass" but when I select and Save it I see an error page "Site Pages is temporarily unavailable". And the logs only show

21:12:29,603 ERROR [http-bio-8080-exec-84][render_portlet_jsp:77] null
java.lang.ArrayIndexOutOfBoundsException

Any ideas??