Hasta ahora, cada vez que necesitabamos temas de apariencia con colores alternativos usabamos los esquemas de color para modificarles ciertos estilos específicos.
Existe una forma alternativa de realizar esta tarea y que no nos limita a los N esquemas de colores que tengamos definidos sino que podremos usar cualquier color para el fondo y, además, cambiará automáticamente el color de letra entre blanco y negro dependiendo del color elegido gracias a una mejora que le hemos añadido.
Para realizar esta tarea basta con modificar el archivo de siempre, liferay-look-and-feel.xml quedando de esta manera:
<?xml version="1.0"?>
<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 6.1.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_6_1_0.dtd">
<look-and-feel>
<compatibility>
<version>6.1.0+</version>
</compatibility>
<theme id="MiTheme" name="MiTheme">
<settings>
<setting configurable="true" key="portal-main-color" type="text" value="#000">
<![CDATA[
AUI().ready(
'aui-color-picker-base',
function(A) {
var target = A.one('#[@NAMESPACE@]portal-main-color');
target.attr('readonly', 'readonly');
A.one('#[@NAMESPACE@]color-letter').attr('readonly','readonly');
var currentValue = target.val();
setTimeout(function() {
target.ancestor('.aui-field-element').append("<div id='[@NAMESPACE@]PortalMainColorPicker'></div>");
var [@NAMESPACE@]PortalMainColorPicker = new A.ColorPicker(
{
hex: currentValue,
after : {
colorChange : function(val) {
var hex = this.get('hex');
var rgb = hexToRgb(hex);
var red=rgb.r;
var blue=rgb.b;
var green=rgb.g;
var brightness;
brightness = (red * 299) + (green * 587) + (blue * 114);
brightness = brightness / 255000;
if (brightness >= 0.5) {
target.setStyle('color','#000000');
A.one('#[@NAMESPACE@]color-letter').val('#000000');
} else {
target.setStyle('color','#ffffff');
A.one('#[@NAMESPACE@]color-letter').val('#ffffff');
};
target.val('#' + hex);
target.setStyle('background','#' + hex);
}
}
}
).render('#[@NAMESPACE@]PortalMainColorPicker');
[@NAMESPACE@]PortalMainColorPicker.on('colorChange',
function(event) {
var hex = [@NAMESPACE@]PortalMainColorPicker.get("hex");
target.val('#' + hex);
}
);
function hexToRgb(hex) {
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
};
}, 1000);
}
);
]]>
</setting>
<setting configurable="true" key="color-letter" type="text" value="#fff"/>
<setting configurable="true" key="border-radius" type="select" options="0px,1px,2px,3px,4px,5px,6px,7px,8px,9px,10px"/>
</settings>
</theme>
</look-and-feel>
Si creamos nuestro archivo liferay-look-and-feel.xml de esta forma y desplegamos el theme obtendremos una vista en el panel de control de nuestro theme como esta:
Al clicar sobre el botón en forma de lápiz se mostraría lo siguiente:
Y una vez selecionado un color se mostraría de la siguiente forma:
El color de letra se selecciona automáticamente entre negro y blanco en función del color seleccionado.
El siguiente paso es recoger esos valores desde nuestra plantilla VM e introducirlos a la CSS. Para hacer esto debemos añadir a portal_normal.vm lo siguiente:
<style>
#parse ("$full_templates_path/estilos.vm")
</style>
Donde estilos.vm contendrá únicamente los estilos pertenecientes a los elementos con colores modificables(el fondo de la cabecera de los portlets, por ejemplo).
Para poder utilizar las variables declaradas en liferay-look-and-feel.xml debemos añadir lo siguiente:
#set ($background = $theme.getSetting("portal-main-color"))
#set ($color = $theme.getSetting("color-letter"))
body{background: $background;}
Recogemos las variables de color de letra y de fondo y modificamos el background del body para que coja el color de fondo seleccionado en el panel de control.
¡MUY IMPORTANTE!
En la versión de Liferay 6.1 GA2 EE(podría ocurrir en más) se ha encontrado con un bug de Liferay(si os ocurre veréis como donde debería aperecer el colorpicker os salen varias líneas de números y letras) que evita el poder crear este tipo de elementos mediante los elementos <![CDATA .
Para solucionar esto es necesario modificar la JSP portal-web/docroot/html/portlet/layouts_admin/look_and_feel_themes.jsp mediante un hook o editándola directamente en el servidor. La indidencia que refleja toda esta problemática es la siguiente:
https://github.com/liferay/liferay-portal/commit/53c82c32a5f9521b4f3fc626fed61570131644e1#diff-0