info@aprenderdesarrolloapex.com
  • Twitter
  • Twitter
  • Galería
  • Multimedia
  • Webinars
  • Videos Tutoriales Gratis
Aprender Tecnologías Oracle, APEX, Toad y mucho más!
  • Inicio
  • Quienes Somos
  • Libros
  • Blog
  • Contacto
Select Page

Añadir Imagen de Fondo y Logo con CSS en Oracle APEX 19.2

by Clarisa Maman Orfali Kolodoczka | Nov 14, 2019 | Blog, Oracle APEX 19.2 | 4 comments

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:

4 Comments

  1. Juan Erazo
    Juan Erazo on December 19, 2019 at 2:28 pm

    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.

    Reply
    • Clarisa Maman Orfali
      Clarisa Maman Orfali on January 6, 2020 at 7:17 pm

      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

      Reply
  2. Mike
    Mike on April 29, 2020 at 3:45 pm

    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%;
    }

    Reply
  3. Ulises
    Ulises on August 27, 2020 at 6:59 am

    Hola,

    me funciono muy bien.

    gracias, saludos

    Reply

Submit a Comment Cancel reply

Your email address will not be published. Required fields are marked *

Buscar en el Blog

Categorías

  • APEX (13)
  • Autonomous Database (16)
  • Blog (122)
  • Hyper-V (2)
  • Lenguaje SQL (11)
  • OCI (9)
  • Oracle APEX 18.1 (6)
  • Oracle APEX 18.2 (5)
  • Oracle APEX 19.1 (11)
  • Oracle APEX 19.2 (15)
  • Oracle APEX 19.2 EA (1)
  • Oracle APEX 19.2 Early Adopter (1)
  • Oracle APEX 20.1 (5)
  • Oracle APEX 20.2 (7)
  • Oracle APEX 21.1 (2)
  • Oracle APEX 21.2 (1)
  • Oracle APEX 22.1 (8)
  • Oracle APEX 22.2 (7)
  • Oracle APEX 5.0 (12)
  • Oracle APEX 5.1 (1)
  • Oracle Cloud (4)
  • Oracle Database 21c (1)
  • Oracle Forms and Reports (1)
  • Oracle General (1)
  • ORDS (1)
  • Plugin AOP (4)
  • Podcast (1)
  • Seguridad (3)
  • SQL Developer (4)
  • Tema Universal (2)
  • Toad for Oracle (2)
  • Toad World (3)
  • Tomcat (1)
  • Tutoriales (15)
  • WebLogic (1)
  • Windows (5)
  • Política de Privacidad
  • Términos y Condiciones
  • Twitter
Todos los Derechos Reservados. Desde © 2013 - Hecho con ♥ por Clarisa Maman Orfali