Muchas veces necesitamos personalizar la página de acceso a nuestras aplicaciones en APEX para darle un sentido de diferenciación entre cada aplicación. En la entrega de hoy voy a explicar cómo podemos llegar de esta página:
A esta otra página de inicio de sesión personalizada:
Ante todo ingresamos al Diseñador de Página de la página 101 de nuestra aplicación:
Lo primero que necesitamos cambiar es la plantilla que usa la región Conectar, donde se encuentran los elementos de página del username y password, en vez de ser la plantilla Standard la colocamos que sea Login.
Para que el botón LOGIN se ajuste al ancho de la región, seleccionamos el botón y en “Opciones de Plantilla” hacemos clic en el botón “Utilizar Valores por Defecto de Plantilla” para abrir la ventana modal y en el sector Avanzado, seleccionamos en la propiedad Width que sea Strech y guardamos los cambios.
Modificar Propiedades de Elementos de Páginas
Seleccionamos P101_USERNAME y en el panel de la derecha de propiedades en el sector de Apariencia ingresamos:
- Plantilla: Hidden
- Clases CSS: icon-login-username
De igual modo seleccionamos el elemento P101_PASSWORD e ingresamos:
- Plantilla: Hidden
- Clases CSS: icon-login-password
Agregar reglas CSS para personalizar colores y fondos
Seleccionamos el título: “Página 101: Página de Conexión” y en el panel de la derecha de propiedades del Diseñador de Páginas nos desplazamos hasta el sector de CSS e ingresamos las siguientes reglas en la casilla “En Línea”:
/* Imagen del logo */
span.t-Login-logo {
background-image: url("/img/mi-logo.png");
background-size: cover;
width: 376px;
height: 66px;
}
/* Color de fondo del botón LOGIN */
.t-Button--hot {
background-color: #57BB97
}
/* Color de fondo de la región Conectar */
.t-Login-region {
background-color: #4B5B68;
}
/* Color del título Conectar que está debajo del logo */
body .t-Login-title {
color: #fff;
}
/* Imagen de Fondo del cuerpo de la página */
.t-PageBody--login .t-Body {
background-image: url("/img/mi-bg-img.jpg");
background-size: cover;
}
Nota: Si queremos usar imagenes que esten alojadas dentro de nuestro espacio de trabajo en el CSS colocamos: background: url(&WORKSPACE_IMAGES.mi-logo-.jpg); tambien podemos hacerlo para el fondo de página.
De esta forma muy sencilla podemos personalizar nuestra página de Inicio Sesión de nuestras aplicaciones en APEX.
Hasta Pronto!