Page Comparison

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.

Consideraciones previas

...

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 45.31.x xxx en adelante
• Tener conocimientos básicos de CSS

Cambiando la página de marcadores

• 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 es el tema por defecto.

para cambiar a otro tema basta con agregar un nuevo archivo GServer_custom.properties con una property (puede ser en cualquier lugar, por ej: al final del archivo), en <o3>/jboss/server/default/gserver/deploy/gserver/0o3.ear/o3portal.war/styles/portal-custom.cssideasoft-o3/GServer_custom.properties, siendo alguna de las siguientes:

ideasoft.themes.defaultTheme = blue
ideasoft.themes.defaultTheme = green
ideasoft.themes.defaultTheme = red
ideasoft.themes.defaultTheme = grey

Una vez que se hizo ésto el cambio a otro tema prearmado consisten en cambiar el nombre del color en el archivo .properties y refrescar (no es necesario reiniciar el jboss)

Creando un nuevo tema : Violeta

A lo efectos de

...

veamos algunos cambios

descomentemos (sacar los /* */) de forma que quede así

body {
	background-color: #1571A2;
	color:            #FFFFFF;
	font-size:        8pt;
	font-family:      'Verdana';
}

• cambiamos background-color: #1571A2 para cambiar el color de fondo
• cambiamos color:#FFFFFF; cambiaremos el color de las letras

el sistema de colores es el clásico RGB en notación Hex (255 = FF,0 = 00)

Cambiando la página de ingreso

Acá es importante saber si usamos o no CAS

Ingreso sin CAS

En este caso usamos el mimos css que para la página de bookmarks, solo que descomentamos

.body-main {
	background-color: #1571A2;
	color:            #FFFFFF;
	font-size:        8pt;
	font-family:      'Verdana';
}

Ingreso con CAS

debemos editar el archivo que se encuentra en <O3>ejemplificar el proceso vamos a crear un nuevo tema que se llamará Violeta.

Pasos a seguir:

1. Copiar la carpeta <o3>/jboss/server/default/deploy/gserver/0o3.ear/o3portal.war/themes/red en el mismo lugar y la re nombramos como Violeta.
2. Copiar la carpeta <o3>/jboss/server/default/deploy/gserver/0o3.ear/o3cas.war/themes/red en el mismo lugar y la re nombramos como Violeta.

3. Avisarle al O3Server que use este nuevo tema, para ello en <o3>/jboss/server/default/ideasoft-o3/GServer_custom.propertiesagregamos la siguiente property

   Code Block
   ideasoft.themes.defaultTheme = Violeta

4. Cambiar al nuevo nombre los css, en:

• <o3>/jboss/server/default/deploy/gserver/0o3.ear/o3portal.war/themes/Violeta/common/css copiar el archivo red.css y re nombrarlo como Violeta.css
• Cambiar las clases dentro de Violeta.css. Editemos Violeta.css y cambiamos todos los .red por .Violeta
• <o3>/jboss/server/default/deploy/gserver/0o3.ear/o3portal.war/themes/Violeta/jdesktop/css modificar 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/server/default/deploy/gserver/0o3.ear/o3portal.war/themes/Violeta/common/css/Violeta.css, en el tenemos la mayoria de estilos que se aplicarán al o3portal.

El otro archivo importante es <o3>/jboss/server/default/deploy/gserver/0o3.ear/o3caso3portal.war/styles/portal-custom.css

ahí descomentamos

...

/themes/Violeta/jdesktop/css/common/Violeta.css, donde tenemos la mayoría de los estilos que controlan al portal un vez que abrimos un cubo.