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.

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

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: