...
Cambiar colores del portal en la página de ingreso y página de marcadores
Consideraciones previas
...
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 y personalizar el portal.
Consideraciones previas
- Este documento es válido para versiones 45.3x.x xxx en adelante
- Tener conocimientos básicos de CSS
Cambiando la página de marcadores
...
Creando un nuevo tema : Green
Vamos a lo efectos de ejemplificar el proceso a crear un nuevo tema que se llamará Green.
Pasos a seguir:
- Copiar la carpeta <o3>/jboss/server/default/
...
- deploy/gserver/0o3.ear/o3portal.war/
...
| Warning | ||
|---|---|---|
| ||
A efectos de poder llevar nuestras personalizaciones a una nueva versión, se recomienda hacer los cambios en el portal-custom.css y no en portal.css |
veamos algunos cambios
descomentemos (sacar los /* */) de forma que quede así
| Code Block |
|---|
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
| Code Block |
|---|
.body-main {
background-color: #1571A2;
color: #FFFFFF;
font-size: 8pt;
font-family: 'Verdana';
}
|
Ingreso con CAS
...
- themes/red en el mismo lugar y la renombramos como Green.
- Avisarle a el server que use este nuevo tema, para ello en
<o3>/jboss/server/default/deploy/gserver/0o3.ear/o3portal.war/WEB-INF/webapp.properties agregamos la siguiente propertie (pude ser en cualquier lugar, por ej: al final del archivo).Code Block ideasoft.themes.defaultTheme = Green - Cambiar al nuevo nombre los css, en:
<o3>/jboss/server/default/deploy/gserver/0o3.ear/
...
- o3portal.war/
...
ahí descomentamos
...
- themes/Green/common/css modificar el nombre red.css por Green.css
- Cambiar las clases dentro de Green.css. Editmos Green.css y cambiamos todos lo .red por .Green
Si seguimos esto pasos habremos creado un nuevo tema Green. Vemos ahora como cambiar algunos colores