Transparent Login Page with Avatar in Oracle APEX - Javainhand Tutorial

In this Oracle APEX Tutorial post, We will explore about the transparent login page with avatar in Oracle APEX.

Most of the time we see a normal apex login page but it is the time to change simple oracle apex login page to transparent oracle apex login page.

As you can see in the above image, this amazing transparent login page in Oracle APEX. 

Let's Start and follow the below steps

Transparent Login Page with Avatar in Oracle APEX

Step 1. Go to your application shared components and click on Templates Link the below screenshot will help you out.

Step 2:- After Click on templates and type login in the search section after that, you find two templates one is a LOGIN PAGE and the second one is LOGIN REGION. The below screenshot will help you out.

Step 3:-Now copy the login region template with click on the copy icon and save with new name the below screenshot will help you out.

Step 4:- Now Upload Avatar image in your static application files and copy the image URL after that back on the template section click on new LOGIN-AVATAR Template, add (login-box) Class in starting div section, and add image src code for display avatar on region heading. The below screenshot and code will help you out.

<img src="#APP_IMAGES#avatar.png" alt="avatar" class="avatar">
Download Avatar Image:-https://apex.oracle.com/pls/apex/javainhand/r/69649/files/static/v7/avatar.png

Step 5:- Now Back on Login Page Designer Section and change your login region with the new LOGIN-AVATAR Template also, change layout settings the below screenshot will help you out.

Step 6:- Now Change All items label with a <p> tag. and change the username and password item template with optional with above also Add Static ID(login) with Login Button. The below screenshot will help you out.

For Example:-<p>Username</p>

Username and Password Template Changes

Login Button Static Id Screenshot

Step 7:- Now everything is set for use below CSS code in Page Inline CSS Property.

Download Background Image URL:-https://cdn.pixabay.com/photo/2017/01/03/09/11/sports-hall-1948912_960_720.jpg

body{
    margin: 0;
    padding: 0;
    background:url(pass image url which you want to set in background);
    background-size: cover;
    background-position: center;
    font-family: sans-serif;
}
.login-box{
   
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    
}
h1 {
    text-align: center !important;
    font-size: 22px !important;
    color: #fff !important;
}
.login-box p{
    color: #fff;
    font-weight: bold;
}
 #rem{
    color: #fff;
    font-weight: bold;
}
#P9999_USERNAME, #P9999_PASSWORD
{
    border: none !important;
    border-bottom: 1px solid #fff !important;
    background: transparent !important;
    outline: none !important;
    height: 40px !important;
    color: #fff!important;
   font-size: 16px;
}
#login
{
    border: none;
    outline: none;
    height: 44px;
    background: #1c8adb;
    color: #fff;
    font-size: 18px;
    border-radius: 20px;
}
#login:hover
{
    cursor: pointer;
    background: #39dc79;
    color: #000;
}
.t-Form-checkboxLabel, .t-Form-inputContainer .checkbox_group label, .t-Form-inputContainer .radio_group label, .t-Form-label, .t-Form-radioLabel {
    color: #fafaf8;
}
.avatar{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: -50px;
    left: calc(50% - 50px);
}
.apex-item-icon {
   color: black;
}
::placeholder { 
  color: white !important;
  opacity: 2 !important;
}

:-ms-input-placeholder {
  color: white !important;
}

::-ms-input-placeholder {
  color: white !important;
}

You can also watch  Transparent Login Page with Avatar in Oracle APEX Video Tutorial.

If you like this post please like share and subscribe to my youtube channel.
(Link):-https://www.youtube.com/channel/UCZa0SWr7cZRP4C7QjI0qQEw

Reference:-
https://www.youtube.com/watch?v=-RbkNcDwKbc