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-Body { background-image: url("/img/mi-bg-img.jpg"); background-size: cover; } De esta forma muy sencilla podemos personalizar nuestra página de Inicio Sesión de nuestras aplicaciones en APEX. Hasta Pronto!
↧