Objetivo:
Cambiar colores del portal en la página de ingreso y página de marcadores.
A partir de la versión 5 se implementó para facilitar el cambio de colores y otro cambios de L&F la idea de temas.
En este tutorial explicaremos como cambiar de tema, eligiendo algunos de los prearmados o definiendo uno propio, y personalizar el portal.
Consideraciones previas
- Este documento es válido para versiones 6.x en adelante
- Tener conocimientos básicos de CSS
- Recomendamos el uso de Firefox junto con el complento Firebug. La combinación facilita el desarrollo de temas en dos aspectos: i) inspeccionar la página web del portal para encontrar el estilo CSS que se debe modificar, ii) modificar directamente la página para probar una modificación de estilo CSS.
Temas pre armados
La instalación de O3PS prevee los siguiente temas por defecto:
red | blue | green | grey |
|---|---|---|---|
|
|
|
|
red es el tema por defecto.
para cambiar a otro tema basta con agregar una property, en <o3>/O3Server_custom.properties (sí el archivo no existiera, se deberá agregar) y <o3>/Portlets, siendo alguna de las siguientes:
ideasoft.themes.defaultTheme = blue ideasoft.themes.defaultTheme = green ideasoft.themes.defaultTheme = red ideasoft.themes.defaultTheme = grey
Advertencia!
Para los temas pre armados se debe respetar el uso de mayúsculas y minúsculas. La herramienta es Case Sensitive.
Reiniciar servicios
Creando un nuevo tema : Violeta
A lo efectos de ejemplificar el proceso vamos a crear un nuevo tema que se llamará Violeta.
Pasos a seguir:
- Copiar las carpetas <o3>/jboss/standalone/deployments/o3-server.ear/o3web.war/themes/red y <o3>/liferay/tomcat/webapps/o3portal/themes/red en las mismas ubicaciones y las re nombramos como Violeta.
- Copiar las carpetas <o3>/jboss/standalone/deployments/o3-server.ear/o3-cas.war/themes/red en el mismo lugar y la re nombramos como Violeta.
Avisarle al O3Server que use este nuevo tema, para ello en <o3>/O3Web.properties y <o3>/Portlets agregamos la siguiente property
ideasoft.themes.defaultTheme = Violeta
- Cambiar al nuevo nombre los css, en:
- <o3>/jboss/standalone/deployments/o3-server.ear/o3web.war/themes/Violeta/common/css y <o3>/liferay/tomcat/webapps/o3portal/themes/Violeta/common/css copiar los archivos red.css y re nombrarlos como Violeta.css
- Cambiar las clases dentro de Violeta.css. Editemos Violeta.css y cambiamos todos los .red por .Violeta
- <o3>/jboss/standalone/deployments/o3-server.ear/o3web.war/themes/Violeta/jdesktop/css y <o3>/liferay/tomcat/webapps/o3portal/themes/Violeta/jdesktop/css y modificamos el nombre red.css por Violeta.css
- Cambiar las clases dentro de Violeta.css. Editemos Violeta.css y cambiamos todos los .red por .Violeta
Si seguimos estos pasos habremos creado un nuevo tema Violeta. Vemos ahora como cambiar algunos estilos
Cambiando estilos en el nuevo tema
Como podemos ver la carpeta de temas tiene varias sub carpetas que ordenan y facilitan los cambios. En su mayoría lo que contienen son las imágenes correspondientes.
El archivo más importante es <o3>/jboss/standalone/deployments/o3-server.ear/o3web.war/themes/Violeta/common/css/Violeta.css y <o3>/liferay/tomcat/webapps/o3portal/themes/Violeta/common/css/Violeta.css en ellos tenemos la mayoría de estilos que se aplicarán a o3web (o3portal).
El otro archivo importante es <o3>/jboss/standalone/deployments/o3-server.ear/o3web.war/themes/Violeta/jdesktop/css/common/Violeta.css y <o3>/liferay/tomcat/webapps/o3portal/themes/Violeta/common/css/common/Violeta.css donde tenemos la mayoría de los estilos que controlan al portal un vez que abrimos un cubo.
Reiniciar servicios