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: