APEX 5 Login Screen

The login screens of some of the APEX 5 sample applications have a nice look and include a check mark when you enter text into the username/password fields. This article will demonstrate how to create your own login page to look like that of some of the sample applications.

Edit your Login page (101):

  • Change login region template to Login.
  • Changes to Username and Password fields:
    • Change Template to Hidden.
    • Change Value Placehoder to Username / Password respectively.
    • Change Value Required to Yes.
    • Change CSS classes:
      • Username: icon-login-username
      • Password: icon-login-password
    • Change Post Text for username and password to
      <span class=”t-Login-iconValidation a-Icon icon-check”></span>.
  • Change the Login button Button Position to Next.

Save the changes and run the page. The result should look like this:

login1

To can add one of the application icons from the the packaged applications select on of the icons my previous blog post and make the following changes:

Navigate to Edit Application Definition -> User Interface, and edit the interface for your application.

Edit User Interface

Under Cascading Style Sheets add the this CSS file: #IMAGE_PREFIX#pkgapp_ui/css/5.0#MIN#.css

Add CSS file

On the Login page (101) click the Log In region and add the name of the icon class to Icon CSS Classes:

css

Save and run the log in page. It should look something like this:

login2

4 thoughts on “APEX 5 Login Screen

  • September 25, 2015 at 4:18 pm
    Permalink

    Hi Chrsitoph, thanks for your valuable inputs, however, i couldn’t able to find few steps mentioned above:
    Change Value Placehoder to Username / Password respectively.
    Change Value Required to Yes.
    Change Post Text for username and password to
    .

    and finally Change the Login button Button Position to Next. in Edit Page of 101.

    As i have mentioned earlier, i am new to Oracle Apex, could you please suggest how to start with and learn, provide some authors to read. I have Understand Oracle Application Express 5.

    Regards
    Satish Vemuri

    Reply
  • September 25, 2015 at 5:58 pm
    Permalink

    Hi Christoph, Finally i have found the values in Shared Components view. Please help me on how to set background image to set full screen in login page. I was able to do it in 4.2 version.

    Regards
    Satish Vemuri

    Reply
  • November 4, 2015 at 7:23 am
    Permalink

    Hey the green images aren’t displaying next to the items, what have i done wrong?

    Reply

Leave a Reply

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