APEX 5 Login Screen

July 23, 2015 at 11:48 am | Posted in Oracle Developement | 4 Comments
Tags: , , , ,

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:



RSS feed for comments on this post. TrackBack URI

  1. 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

  2. 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

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

    • You probably didn’t edit the Post Text properties of the fields.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Entries and comments feeds.

%d bloggers like this: