Este documento describe cómo crear y personalizar temas en Liferay. Explica que los temas permiten cambiar aspectos como las imágenes, el HTML, la posición de elementos y archivos JSP en el portal. Además, recomienda heredar de temas existentes para beneficiarse de actualizaciones y correcciones, y hacer los cambios mediante diferencias. Finalmente, proporciona consejos sobre el uso de CSS, plantillas, variables y servicios para personalizar completamente la apariencia y funcionalidad de Liferay.

1. Liferay Core Engineer
Julio Camarero
Desarrollo de Temas de
Apariencia para Liferay

2. ¿Qué se puede hacer
con un tema de
apariencia de Liferay?

13. Flexibilidad Total
• Desde un tema se pueden cambiar
todo!
‣ Todas las imágenes e iconos usadas dentro
y fuera de los portlets
‣ Html de cualquier parte del portal
‣ La posición y funcionamiento de todos los
elementos del portal
‣ Cualquier fichero jsp

14. Introducción
• Liferay Portal trae por defecto 2 temas:
‣ Classic: Tema por defecto, pensado para páginas no públicas.
‣ Control Panel: Tema utilizado en el Panel de Control
• Los temas se pueden buscar e instalar desde el
Instalador de Plugins del Panel de Control.
* En el sitio web de Liferay (y marketplace próximamente) se pueden encontrar y
descargar muchos temas adicionales (algunos de Liferay y otros de la comunidad):
http://www.liferay.com/web/guest/downloads/official_plugins

15. Manos a la obra!
• Desde el Liferay IDE:
File → New → Liferay Project
‣ Seleccionamos “Theme”
‣ Elegimos un nombre
‣ Seleccionamos el Plugins SDK
actual y el servidor dónde
tenemos Liferay.
* Por defecto, nuestro tema
extiende a _styled

16. Herencia de temas
• _unstyled
‣ plantillas (html)
‣ imágenes

17. Herencia de temas
•_styled
‣ estilo (css)

18. Herencia de temas
* El tema del que queremos heredar se cambia con la propiedad
theme.parent del fichero build.xml en la carpeta de nuestro tema.
• classic
• control panel

19. Nos basamos en diferencias
• En vez de empezar cada vez de cero, los temas de
Liferay se basan en diferencias sobre un tema en el
que nos basamos. (En general, styled o classic)
‣ Automáticamente nuestro tema tiene las últimas mejoras
‣ Nos beneficiamos de la corrección de fallos y parches de seguridad
‣ Se reduce el código a mantener
* La carpeta _diffs contendrá nuestros cambios.

20. Desplegarlo
• Para desplegar el tema, simplemente arrástralo hasta el
servidor.
* Para Exportarlo como un .war, click derecho en la raíz del
proyecto --> Export (pegando este war en la carpeta deploy de
otro servidor también se instala sólo)

21. Thumbnail
• Cambia el fichero screenshot.png por una captura real
para verlo desde la administración de páginas.

22. ¿Qué hay que
saber para hacer
un tema?

23. CSS
• Utiliza custom.css para incluir tus cambios o hacer
imports de otros ficheros
‣ al ser el último fichero cargado, siempre tiene preferencia)
‣ Si estás extendiendo un tema distinto de _styled reutiliza su
custom.css o incluso mejor impórtalo desde dentro del tuyo
para poder actualizarte en el futuro a nuevas versiones de ese
tema.
custom
.

24. Consejos CSS
• Utiliza firebug o inspectores similares para
visualizar de manera más rápida tus cambios.
• Utiliza las clases .ie, .ie6, .firefox, .safari, etc. en
lugar de “hacks” CSS “hacks” para aplicar
reglas CSS a navegadores específicos.
• Todos los portlets de liferay están rodeados por
una clase particular (asset-publisher-portlet,
users-admin-portlet...ect) que puede ser
encontrada en el liferay-portlet.xml

25. Nuevo en 6.1: SAAS
• Soporte de SASS in all the css files
Syntactically Awesome StyleSheets http://sass-lang.com/
‣ variables CSS
‣ Anidamiento de selectores
‣ Mixins (funciones)
‣ Herencia de selectores

26. Ficheros base CSS
• application.css - Estilos relacionados con la aplicación
(pestañas, selectores, ...)
• base.css - estilo básico que aplica a todo el portal
• dockbar - estilo relacionado con la dockbar
• forms – estilo relacionado con formularios
• layout.css - estilo relacionado con la maquetación de las
páginas
• main.css - importa al resto de ficheros css
• navigation.css - estilo de la navegación
• portlet.css - estilo de cada portlet
• custom.css - aquí irán nuestras diferencias

27. Plantillas
• Permiten crear contenido dinámico de manera sencilla
en el tema. Se puede utilizar velocity o freemarker.
• portal_normal.vm: Controla es esqueleto básico del
HTML de todas las páginas.
• init_custom.vm: En este fichero se pueden definir
nuevas varibales de velocity
• navigation.vm: Es llamado desde portal_normal.vm,
genera la barra de navegación. portal_pop_up.vm:
This file handles the pop-up notifications for Liferay.
• portlet.vm: Envuelve el contenido de cada portlet.

28. Variables Velocity
• Encuentra todas las variables que tienes disponibles en
init.vm
• Entre ellas: $theme_display, $page, $portlet_display,
$user_id, $user_email_address, $language_id,
$company_logo, $nav_items... etc

29. Imágenes
• Separadas en carpetas por temática:
‣ common/ - imágenes genéricas.
‣ dockbar/ - imágenes relacioandas con la dockbar.
‣ portlet/ - imágenes relacionadas con cada portlet.
‣ ... etc

30. Consejos para
convertirte en un
gurú de los temas

31. Incrustar un portlet en una plantilla
• $theme.runtime(“3”) --> (búsqueda)
• $theme.runtime(“56_INSTANCE_ABCD”) --> Contenido
• Útil por ejemplo para:
‣ caja de búsqueda en todas las páginas
‣ pie de página
‣ funcionalidades transversales al portal

32. Acceder a los servicios
• $serviceLocator.findService(“...”)
‣ Para que los servicios no lancen excepciones:
$serviceLocator.findExceptionSafeService(“...”)
• Útil por ejemplo para acceder a:
‣ Listados de imágenes, documentos, contenidos...
#set($dlAppService =
$serviceLocator.findService("com.liferay.portlet.documentlibrary.service.DlAppServ
ice"))
#set($files = $dlAppService.getFileEntries($group_id, 0))
<ul>
#foreach($file in $files)
<li>$file.getTitle()</li>
#end

33. Acceder a los Custom Fields
• Permiten definir desde la Interfaz de Usuario nuevos
campos.
• Ejemplo para obtener el campo cssClass de la página
actual:
‣ $page.getExpandoBridge().getAttribute(“cssClass”)

34. Sobrescritura de jsps
• theme.jsp.override.enabled=true
• Duplica la estructura del jsp dentro de _diffs/templates
‣ Por ejemplo, para sobrescribir webapps/ROOT/html/portlet/
asset_publisher/display/abstracts.js
‣ Incluiríamos: my-theme/docroot/_diffs/templates/html/portlet/
asset_publisher/display/abstracts.vm
• Utiliza el lenguaje en el que se escribe tu tema!

35. Quiero tener varios
temas similares con
pequeñas diferencias

36. Esquemas de Color
• Permiten mostrar al usuarios variantes de un tema,
basadas en distintas imágenes y css.
• Se introducen en el fichero WEB-INF/liferay-look-and-
feel.properties
* si no tienes este fichero,
cópialo de la carpeta de tu
tema en el servidor de
aplicaciones dentro de
webapps

37. Ejemplo Esquemas de Color
<look-and-feel>
<theme id="my-training" name="My Training">
<color-scheme id="01" name="Blue">
<css-class>blue</css-class>
<color-scheme-images-path>${images-path}/color_schemes/${css-
class}</color-scheme-images-path>
</color-scheme>
<color-scheme id="02" name="Red">
<css-class>red</css-class>
<color-scheme-images-path>${images-path}/color_schemes/${css-
class}</color-scheme-images-path>
</color-scheme>
</theme>
</look-and-feel>

38. Theme Settings
• Pueden ser de 2 tipos:
‣ Estáticos: Nos permiten mostrar al usuario varios temas a elegir,
que en el fondo es uno sólo pero con pequeñas diferencias.
‣ Dinámicos: Permiten al usuario final seleccionar desde la
interfaz de usuario algunos elementos de configuración de su
tema.

39. Theme Settings Estáticos
<look-and-feel>
<theme id="tema1" name="Tema Uno">
<settings>
<setting key=”mi-setting” value=”mi-valor-1” />
<settings>
</theme>
<theme id="tema2" name="Tema Dos">
<settings>
<setting key=”mi-setting” value=”mi-valor-2” />
<settings>
</theme>
</look-and-feel>
* Desde Velocity: $theme_display.getThemeSetting("mi-
setting")

40. Theme Settings Dinámicos
<settings>
<setting configurable="true" key="bullet-style" options="dots,arrows"
type="select" value="dots" />
<setting configurable="true" key="portlet-setup-show-borders-default"
type="checkbox" value="true" />
</settings>
* Desde Velocity: $theme_display.getThemeSetting("bullet-
style")

41. Ejemplos Settings Dinámicos
Permiten utilizar javascript para hacer selectores dinámicos, por ejemplo,
un datapicker para elegir un color. Ver ejemplo aquí:
http://www.liferay.com/es/web/raymond.auge/blog/-/blogs/theme-settings-and-new-advanced-controls

42. ¿Es necesario usar un
IDE? ¿Tengo que
desplegar cada vez que
hago un cambio?
...no :)

43. Desarrollo Rápido: sandbox
• Permite diseñar temas al estilo PHP, sin necesidad de
editor ni entorno de plugins.
• Los cambios se visualizan inmediatamente
• Para activarlo:
‣ sandbox.deploy.enabled=true
‣ sandbox.deploy.dir=${liferay.home}/sandbox
• Ejmplo: crea una carpeta dentro de tu sandbox llamada
prueba-theme

44. ¡Gracias!
@liferay
@juliocamarero
julio.camarero@liferay.com