Liferay CSS Javascript

Tema Liferay con estilos dinámicos

Escenario

Nuestro Theme Liferay dispone de ciertos parámetros personalizables por “settings” (ej: color de fondo de la página, color títulos, etc…). Dependiendo de dichas “settings” deberemos cambiar los estilos de sitio Liferay al que le hemos aplicado este Theme.

 

Primera aproximación

Siempre podemos hardcodear estilos en línea dentro de nuestra plantilla velocity. Así, en “portal_normal.vm”, justo antes de cerrar la etiqueta head, podríamos escribir:

…
$theme.include($top_head_include)
<style type="text/css">
body {
background-color: $theme.getSetting("color_de_fondo");
}
</style>
</head>
…

 

Problemas:

Por temas de experiencia de usuario y/o SEO no es aconsejable el uso de estilos inline ya que aumentan el tamaño de la página y no es cacheable.

Por temas de desarrollo, si el número de “settings” es elevado y/o los elementos a estilar por css son muchos la plantilla se convierte en un monstruo de espagueti code. Además dichos estilos no se encuentran en su lugar esperado (_diffs/css).

 

Estilos dinámicos al rescate

Podemos añadir en nuestra plantilla velocity una llamada a un archivo CSS (estático) que en realidad es un JSP (dinámico). Así, en la carpeta _diffs/css podemos crear un archivo, por ejemplo, estilos_dinamicos.jsp

…
$theme.include($top_head_include)
<link rel="stylesheet" type="text/css" href="$css_folder/estilos_dinamicos?cf=$theme.getSetting("color_de_fondo")">
</head>
…

 

En dicho archivo recogeremos el parámetro “cf” y podremos generar el archivo CSS, al vuelo.

<%@ page language="java" contentType="text/css; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String color_fondo = request.getParameter("cf");
%>
body {
background-color: #<%= color_fondo %>;
}

 

El truco para que Liferay sea capaz de interpretar el archivo JSP correctamente (sino no será enviado por el servidor) reside en servirlo con el “mime type correcto“, “text/css” en nuestro caso.

 

BOLA EXTRA:

Cualquiera mínimamente avezado en las lides de la programación Liferay será capaz de extrapolar esta solución a archivos javascript, imágenes, etc…

Deja un comentario