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);
  }
at

19 comments:

  1. Marco Oosterhoorn10/09/2015 12:57 PM

    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.

    ReplyDelete
  2. Arun Prakash10/19/2015 8:35 AM

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

    ReplyDelete
  3. John OToole10/19/2015 1:45 PM

    Great tip, thanks.

    ReplyDelete
  4. Arun Prakash10/28/2015 11:18 AM

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

    ReplyDelete
  5. Carlos B12/06/2015 9:09 PM

    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!

    ReplyDelete
  6. NSK1/30/2016 3:59 PM

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

    ReplyDelete
  7. Peter2/12/2016 2:39 PM

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

    ReplyDelete
  8. Dimitri Gielis2/14/2016 12:23 AM

    Hi Peter,

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

    Dimitri

    ReplyDelete
  9. L'immigrant4/07/2016 7:12 PM

    Many thanks Dimitri.
    PS: When your book?

    ReplyDelete
  10. Dimitri Gielis4/09/2016 2:41 PM

    Hi Francesco,

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

    Thanks,
    Dimitri

    ReplyDelete
  11. Wayne len7/18/2016 8:45 AM

    Its working perfect. Thanks.

    ReplyDelete
  12. Unknown10/19/2016 5:18 AM

    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

    ReplyDelete
  13. Apex_newbie10/20/2016 6:48 PM

    Danny: Try this:

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

    ReplyDelete
  14. Unknown10/24/2016 5:07 AM

    Yeah, i forgot with that height part...

    thanks buddy!

    ReplyDelete
  15. fx10112/02/2016 9:09 AM

    I used this in my app thanks dimitry

    ReplyDelete
  16. Max4/06/2017 8:15 PM

    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.

    ReplyDelete
  17. Dimitri Gielis4/06/2017 8:24 PM

    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#

    ReplyDelete
  18. Sonya5/09/2017 9:14 AM

    can you add additional info like video tutorial

    ReplyDelete
  19. Vipin Kumar12/08/2018 11:22 AM

    Hi Dimitri,

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

    ReplyDelete