Liferay: Creación de Tema básico

Cuando enfrentamos un proyecto de desarrollo sobre Liferay enfrentamos no solamente el desarrollo de las caracteristicas funcionales del portal sino tambien el de las caracteristicas graficas del portal es decir la "cara " de nuestra web que normalmente esta compuesta por estilos , imagenes, banner y demas adiciones graficas que haran mas vistoso nuestro proyecto.

En liferay se maneja uno de sus plugins para toda este trabajo denominado theme, un theme es un plugin de Liferay sobre le cual se desarrollara e integrara todos los componente graficos del portal (maqueta grafica) conformado por : estilos css, librerias  javascript, imagenes, distribucion de componentes graficos, logos, banners y demas componentes que conformen el esqueleto grafico del proyecto.

En este post desarrollaremos la base para un theme liferay sobre el cual agregaremos nuestros componentes graficos.



Crearemos un tema con el IDE de Liferay de la siguiente manera: File -> New - >  Liferay Project del menu del eclipse.

Creando un nuevo proyecto Liferay

Seleccionamos el plugin tipo Theme y le ponemos un nombre

Añadimos un nombre

Se creara un proyecto vacío de tema, ejecutamos por medio de Ant:

Proyecto tema creado

La estructura de carpetas cambiara al ejecutar con ant:
•    _diffs: Es el directorio donde trabajaremos normalmente para añadir nuestros diseños (css,js) o imagenes
•    css: Es donde se ubicarán todos los estilos del tema
•    images: Es donde se ubicarán todas las imagenes del tema
•    js: Es donde se ubicarán los script javascript del tema
•    templates: Es donde se ubicarán las plantillas velocity del tema
•    WEB-INF/liferay-look-and-feel.xml: Es donde se define el identificador del tema en Liferay y la versión
•    WEB-INF/liferay-plugin-package.properties: Es donde se definen las características del paquete

Estructura de carpetas

Seleccionamos el nuevo tema del panel de control (Administrar > Página)

Seleccionamos el tema y se verá un home descuadrado, eso es porque se han quitado todos los estilos:

Para sobre escribir la configuración de diseño gráfico se debe no sobrescribir los archivos que vienen por defecto, sino usar el directorio "/docroot/_diffs" y replicar los subdirectorios "css" y "js" añadiendo nuestros estilos y/o script.