Ticker

6/recent/ticker-posts

Transparent Login Page with Avatar in Oracle Apex - Javainhand Tutorial


Hello Friends, Welcome to Javainhand.com in this post we are going to describe to you that how you can create a transparent login page with the avatar in oracle apex
Most of the time we see a normal apex login page but now it is the time to you have made a good transparent login page with the avatar in oracle apex.

If you are searching on the internet to find the unique or good transparent login page in oracle apex then you are in the right place. 

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

Post a comment

0 Comments