Sunday, September 27, 2015

Custom image on your APEX app login page

In a comment on my post APEX 5.0: pimping the Login page I got a question how to put your own logo or a custom image on the login page, instead of an icon.


You only need a bit of CSS to do the trick:

You can add the above CSS to your login page - Inline CSS in page attributes or you can add it to your page template or custom CSS in Universal Theme.

The result is this:


To differentiate the login page you can do a lot more, here're some things we show during our APEX UI training:

  • add transparency to the login box
  • add a background image to your entire page (blurred or not)
Again, you can do that with just some CSS.

11 comments:

Marco Oosterhoorn said...

Hello Dimitri,

This is working for the Universal Theme but not for the mobile theme 5.1. Do you know where to find that piece of css, because when going through the stylesheet of the mobile css there is no such thing as t-login or ui-login.

Regards,

Marco.

Arun said...

This is working when we have Image in Directory. But STATIC IMAGES is not working here. Any workaround?

John OToole said...

Great tip, thanks.

Arun said...

This is working when we have Image in Directory. But STATIC IMAGES is not working here. Any workaround?

Carlos B said...

Dimitri, you are the best!
I've made only a few changes:
- upload a logo.jpg in "Static Application Files"
- and with a little change in the CSS

span.t-Login-logo {
background-image: url(#APP_IMAGES#logo.jpg);
backgroung-size: cover;
width: 150px;
height: 80px;
}

And works perfect!

Николай Каретников said...

Thank you!
Note, that in case an image name has a space in it, put the whole reference in single quotes ''
span.t-Login-logo {
background-image: url('#APP_IMAGES#lexmark logotype.png');
background-size: cover;
width: 100px;
height: 40px;
}

Peter said...

does not work at all - uploaded image in 150px/80px size in app workspace and pasted css code above in Page 101: Login Page -> Page -> CSS -> Inline 8-(

span.t-login-logo {
background-image: url(#APP_IMAGES#renditegrab.png);
background-size: cover;
width: 150px;
height: 80px;
}

https://apex.oracle.com/pls/apex/f?p=78991

!!! image does not show up !!!

Dimitri Gielis said...

Hi Peter,

I see the image in your app?
(in Safari)

Dimitri

Francesco said...

Many thanks Dimitri.
PS: When your book?

Dimitri Gielis said...

Hi Francesco,

I've postponed my book till APEX 5.1...

Thanks,
Dimitri

Wayne len said...

Its working perfect. Thanks.