Esquemas de color en Liferay 6.0 y 6.1

por

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;
  }


COMENTARIOS

18-08-2014 21:32:26
Hola @Jose, cuando creas un tema nuevo desde el eclipse o desde consola el proceso debería de create automáticamente esa carpeta dentro de docroot. En este post puedes ver como crear un tema desde consola http://sergioglez.webcindario.com/cargarArticulo.php?id=10 Otra cosa sería que lo estuvieras creando desde maven , en ese caso no existiría esa carpeta pero entiendo que tu lo estás creando a través de un proceso normal. Si tienes más problemas me dices ;)
18-08-2014 10:37:01
Hola, tengo una duda. La ruta_diffs/css/color_schemes/Esquema1.css donde se ubica el css, tiene un \"_diffs\" que no entiendo a qué hace referencia.¿ Debo crear una carpeta con ese nombre?

DEJA TU COMENTARIO