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.

Update (feedback from Daniel Javer); if you are on mobile you can use in CSS of your page:
body {
  webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image:url('#APP_IMAGES#upbase/pic.jpg');
  }
  .ui-content.ui-body-a{
    background: rgba(0, 0, 0, 0.1);
  }
  .ui-responsive-panel.ui-page.ui-page-theme-a.ui-page-active{
    background: rgba(0, 0, 0, 0.1);
  }

19 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 Prakash 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 Prakash 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!

NSK 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

L'immigrant 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.

Unknown said...

Hi Dimitri,

I've tried to give background image on Login Page and it worked perfectly.
Then i added your css to give image logo. But it doesn't work.
Here my CSS inline in my login page :

.t-PageBody--login .t-Body {
background: url( #APP_IMAGES#cool-nature-wallpapers-for-desktop-hd.jpg );--
background-size: 100% auto;};

span.t-Login-logo {
background: url( #APP_IMAGES#Logo-Vaksindo.jpg );--
background-size: cover;
width: 150px;

I wait your answer...

Thanks,

Danny

Apex_newbie said...

Danny: Try this:

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

Unknown said...

Yeah, i forgot with that height part...

thanks buddy!

fx101 said...

I used this in my app thanks dimitry

Max said...

How can I reference an image from Shared Components from inside an uploaded CSS file?

My custom css file is in #WORKSPACE_IMAGES#

I have the following css directive in my custom css uploaded in the workspace:
body#uLogin {
background: url('WORKSPACE_IMAGES#loginbg2.png') 0 0 repeat;
}

The parsed URL comes out to be
http://localhost:8008/apex/wwv_flow_file_mgr.get_file?p_security_group_id=15530430522275528&p_fname=mystyles.css#WORKSPACE_IMAGES#loginbg2.png

and the image does not load because of the incorrect path. It appears the css is not parsing out #WORKSPACE_IMAGES#

Any help or advice would be appreciated. Thanks.

Dimitri Gielis said...

Yes, you can not do it this way - you would need to include the css in your page or theme.
Then you can reference #APP_IMAGES#

Sonya said...

can you add additional info like video tutorial

Vipin Kumar said...

Hi Dimitri,

How can i add background image and color to Oracle Apex Cards in a page