Un esquema de color es una variante de nuestro tema original de apariencia en el que se modifica alguna parte pero siempre, manteniendo el original.
Para que lo entendáis de una forma más clara, pongamos el ejemplo del tema de apariencia Classic que trae por defecto Liferay. Este tema de apariencia trae 2 esquemas de color diferentes: orange y blue. Como podéis observar si lo probáis, son clones del tema original, excepto en el color que dan al portal. En uno se dan tonalidades naranjas mientras que en el otro se dan azules. El original es todo gris.
Aunque en el tema classic sólo se modifica el color general del tema, podríamos modificar cualquier cosa que se nos ocurra y que se pueda desde un tema de apariencia.
A continuación, vamos a ver , paso por paso, cómo podemos crear un esquema de color de una forma muy sencilla:
Lo primero que debemos hacer es modificar el archivo /mitema-theme/docroot/WEB-INF/liferay-look-and-feel.xml. Donde "mitema-theme" es el nombre de vuestro tema de apariencia. En caso de que no exista este archivo debéis crearlo.
Dentro del archivo look-and-feel.xml debéis incluir lo siguiente:
<?xml version="1.0"?>
<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 6.0.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_6_0_0.dtd">
<look-and-feel>
<compatibility>
<version>6.0.0+</version>
</compatibility>
<theme id="NombreDelTema-theme" name="NombreDelTema">
<color-scheme id="01" name="Defecto">
<css-class>Defecto</css-class>
<color-scheme-images-path>$ {images-path}/color_schemes/Defecto</color-scheme-images-path>
</color-scheme>
<color-scheme id="02" name="Esquema1">
<css-class>Esquema1</css-class>
<color-scheme-images-path>${images-path}/color_schemes/Esquema1</color-scheme-images-path>
</color-scheme>
<color-scheme id="03" name="Esquema2">
<css-class>Esquema2</css-class>
<color-scheme-images-path>${images-path}/color_schemes/Esquema2</color-scheme-images-path>
</color-scheme>
</theme>
</look-and-feel>
Como véis en el código anterior, hemos creado 2 esquema de color(Esquema1 y Esquema2) además del tema por defecto que aparecerá con el nombre "Defecto".
El código anterior está hecho para una versión de compatibilidad 6.0.0, si quisiéramos hacerlo para la versión 6.1 tendríamos que cambiar todos los 6.0.0 por 6.1.0
En <color-scheme-images-path> debemos de poner la ruta de las imágenes que añadiremos en cada esquema de color.
El siguiente paso será crear los archivos css correspondientes de la siguiente forma:
- _diffs/css/color_schemes/Defecto.css
- _diffs/css/color_schemes/Esquema1.css
- _diffs/css/color_schemes/Esquema2.css
Lo siguiente será crear las carpetas de imágenes correspondientes a cada esquema de color. A continuación podéis ver el ejemplo correspondiente al Esquema1.
- _diffs/images/color_schemes/Esquema1/thumbnail.png
- _diffs/images/color_schemes/Esquema1/screenshot.png
- _diffs/images/color_schemes/Esquema1/cualquierImagen.png
Hace falta crear una captura de pantalla de la home con el nombre thumbnail.png y screenshot.png para cada esquema de color, para que salgan las miniaturas a la hora de escoger los esquemas de color desde Panel de control.
Por último, debemos enlazar los css que creamos con anterioridad en nuestro _diffs/css/main.css , justo al final del archivo:
@import url(color_schemes/Defecto.css); @import url(color_schemes/Esquema1.css); @import url(color_schemes/Esquema2.css);
Como os habréis fijado, hemos creado un esquema de color llamado "Defecto" que no hemos utilizado para nada. Este esquema es el que se mostrará por defecto(el tema original), sus css deberá ir vacío y en su carpeta de imágenes sólo deberá tener el thumbnail.png y el screenshot.png
Desde los css de los esquemas de color deberemos machacar aquellos estilos que queramos del original o añadir nuevos. Para ello, debemos poner por delante de cada selector .Esquema1 , por ejemplo:
.Esquema1 #wrapper{
background:#ff0000;
}