Fancy Login Page

This post is about how to create a Fancy Login Page in Oracle APEX.

Thanks to Vincent Garreau for creating particles js.

Demo application: OAC

Download application: FancyLoginPage

Step 1

First of all we should visit this site and set our configuration then to download *.json file.

Step 2

Download files via FancyLoginPage

In this step we have two ways, we could set the name of *.json file at app.js or copy & paste below codes according the image and put it into app.js

Step 3

Adding JS Files

Step 4

We should make a copy from [login] template and create a new template for example "login-fancy" because we must add some codes to parts of template.

Step 5

a. we add this codes below the [div] tag

b. To add script tags

c. to add CSS codes to Inline part

body {
  margin: 0;
}

.t-Button {
       border-radius: 10px !important;
}

input.password,input[type=text] {
border-radius: 10px  !important;
border-color: #404040  !important;
}

.t-Login-region {
    border-radius: 25px;
}

.t-Login-header {
     padding: 0px 0;
}

#APEX_ERROR_MESSAGE {
   z-index: 900;
}

.t-Login-region {
    background-color: rgba(255, 255, 255, 0.23) !important;
}

h1.t-Login-title {
    font-size: 2.5rem;
    color: #ffffff;
    text-shadow: 2px 1px 4px #a8a9b3, 0 0 25px rgb(53, 54, 64), 0 0 5px #1b1815;
}

.t-Form-inputContainer input[type="text"]:visited, .t-Form-inputContainer input.text_field:visited, .t-Form-inputContainer input.password:visited, .t-Form-inputContainer textarea.textarea:visited, .t-Form-inputContainer input.datepicker:visited, .t-Form-inputContainer span.display_only:visited, .t-Form-inputContainer input.popup_lov:visited, .t-Form-inputContainer select:visited
{
    background-color: #eb602d !important;
    color: rgb(0, 0, 0) !important;
}

.t-Button--closeAlert, .a-Button--notification {
    color: initial !important;
}    

/*--------------------------------------particles css------------------------------*/
canvas{
  display:block;
  vertical-align:bottom;
}

/* ---- stats.js ---- */
.count-particles{
  background: #000022;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles{
  font-size: 1.1em;
}

#stats,
.count-particles{
  -webkit-user-select: none;
  margin-top: 5px;
  margin-left: 5px;
}

#stats{
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles{
  border-radius: 0 0 3px 3px;
}

/* ---- particles.js container ---- */
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(#b61924,#fcfcfc) !important;/*you could change backgroud color*/
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

Step 6

Now, we have to change the Page Template at the login page.

So run and enjoy with Fancy login.