La manera más fácil de agregar un fondo y el logo en la página de inicio de sesión de APEX es usando las reglas CSS.
Actualmente tenemos la página de esta forma:
1. Vamos a cargar la imagen de fondo y el logo en nuestro espacio de trabajo desde Creador de Aplicaciones > Aplicación > Componentes Compartidos
2. Luego vamos al Diseñador de la Página del Inicio de Sesión > CSS > Inline y abajo colocamos las siguientes reglas CSS:
span.t-Login-logo {
background-image: url(#APP_IMAGES#logo-128px.png);
backgroung-size: cover;
width: 150px;
height: 140px;
}
.t-Body {
background-image:url(#APP_IMAGES#bg-demo.jpg);
background-repeat: no-repeat;
background-size : 100%;
background-position: 25%;
}
* Podemos calcular el ancho y la altura de la imagen de nuestro logo según corresponda.
Y el resultado final es una hermosa página de inicio de sesión como la imagen destacada de este post 🙂
Para la version de APEX 20.2 usamos el siguiente estilo CSS:
body {
background-image: url(#APP_IMAGES#BG.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
body .t-Login-region {
background-color: rgba(255,255,255,0.51);
border-radius: 25px;
}
body .t-Login-logo {
background-image: url(#APP_IMAGES#logo.png);
background-color: rgba(255,255,255,0);
background-repeat:no-repeat;
background-position: center center;
width: 180px;
height: 180px;
}
#P9999_USERNAME, #P9999_PASSWORD {
background-color: #ffffff;
border-bottom-color: #1e90ff;
border-width: 0 0 3px 0;
border-radius: 25px;
}
El resultado es el siguiente:
Hola Clarissa he probado de diferentes maneras y parece no funcionar en esta versión de APEX 19. He encontrado que en las características del template hay posibilidad de cambiar el fondo, lo cual es nuevo frente a otras versiones, sin embargo creo que implicaría modificar el template.
Hola Juan, yo lo he probado en 19.2 y puedo colocar la imagen de fondo sin problema.
No sé que es lo que quieres hacer por lo que te da error. Saludos
El problema es que no es .t-Body sino .t-PageBody–login
.t-PageBody–login {
background-image:url(#APP_IMAGES#bg-demo.jpg);
background-repeat: no-repeat;
background-size : 100%;
background-position: 25%;
}
Hola,
me funciono muy bien.
gracias, saludos