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:


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:


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


4 thoughts on “APEX 5 Login Screen

  • September 25, 2015 at 4:18 pm

    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.

    Satish Vemuri

  • September 25, 2015 at 5:58 pm

    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.

    Satish Vemuri

  • November 4, 2015 at 7:23 am

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

Comments are closed.