Get it on Google Play

Themes Liferay: Configuración y Color Schemes

15-09-2014
 

Cuando desarrollamos Themes Liferay podemos permitirle al usuario configurar el theme mediante uso de opciones de configuración y Color Schemes. Estas opciones aparecerán en el momento de seleccionar el theme. En la siguiente imagen se muestra el Tema ‘classic’ de Liferay con 3 esquemas de colores y una opción de configuración(Bullet style):

Liferay Themes: Color Schemes and Settings

Liferay Themes: Color Schemes and Settings

Opciones de configuración

Vamos a suponer que tenemos un cliente que quiere que en determinadas páginas, en la cabecera aparezca un título predeterminado de sección. Podemos permitirle al usuario seleccionar este título añadiendo la opción de configuración en el fichero ‘liferay-look-and-feel.xml’:

	…
	<settings>
		<setting configurable="true" key="section-title" type="text" value="" />
	</settings>
	…

Después podemos acceder a esta opción de configuración desde nuestras plantillas de Velocity de la siguiente manera:

	#if(  $theme_settings.section-title  != "" )
		<h3> $theme_settings.section-title  </h3>
	#end 

Color Schemes

Los Color Schemes nos permiten crear variantes de nuestro theme añadiendo un fichero CSS nuevo. Por ejemplo, en nuestro portal nos puede interesar usar el mismo theme para la parte pública y la privada, pero con pequeñas diferencias en las cabeceras. Para este cambio, no hace falta tener dos themes, porque se trata de una simple variación de CSS.

Para añadir un esquema de color nuevo editaremos el fichero ‘liferay-look-and-feel.xml’:

	…
	    <color-scheme id="private" name="Private Intranet">   
	        <css-class>private</css-class>
	        <color-scheme-images-path>
	            /images/color_schemes/${css-class}
	        </color-scheme-images-path>        
	    </color-scheme>
	…

Donde nuestro nuevo esquema de color se va a llamar “Private Intranet” y el nuevo CSS que cargará al final de los CSS de nuestro theme se llamará ‘/css/color_schemes/private.css’. Las imágenes(thumbnail, screenshot, etc.) de cada Scheme estarán en ‘/images/color_schemes/<h;id del esquema>’.

Interesado en formación Liferay?

 

Leave a Reply

© Albert Coronado Calzada