Ticker

6/recent/ticker-posts

Attractive Login Page with Social Icons in Oracle APEX - Javainhand Tutorial


In this post, we are going to describe you to how to create an attractive login page with social icons in oracle apex. An Attractive login page is the most important part of the web application. An Attractive Login Page will easily grab user attention. In this post, you learn how you can customize the oracle apex login page.

If you want to make a good attractive login page or custom login page in the oracle apex then follow the below steps.

Attractive Login Page With Social Icons 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 Click on the New Elegan login page template and remove the existing code and replace it with a new code. the below code will use and save changes.


<div class="t-Login-region t-Form--stretchInputs t-Form--labelsAbove #REGION_CSS_CLASSES#" id="#REGION_ID#" #REGION_ATTRIBUTES#>

<div class="d-flex justify-content-end social_icon">
<span><i class="fa fa-facebook-square fab"></i></span>
<span><i class="fa fa-google-plus-square fab"></i></span>
<span><i class="fa fa-twitter-square fab"></i></span>
</div>
  <div class="t-Login-header">
    <span class="t-Login-logo #ICON_CSS_CLASSES#"></span>
    <h1 class="t-Login-title" id="#REGION_STATIC_ID#_heading">#TITLE#</h1>
  </div>
  <div class="t-Login-body">
    #BODY#
  </div>
  <div class="t-Login-buttons">
    #NEXT#
  </div>
  <div class="t-Login-links">
    #EDIT##CREATE#
  </div>
  #SUB_REGIONS#

</div>


Step 5:- Now Back on Login Page Designer Section and change your login region with the new Elegant Login Page Template also, Add CSS Classes CARD  the below screenshot will help you out.




Step 6:- Now Change All Item Label with <p> tag the below code will help.


<p class="remember">Username</p>

<p class="remember">Password</p>
<p class="remember">Remember Me</p>

Step 7:- Now Pass input-group-prepend CSS Classes in Username Item Field and Password. In Remember Item Pass remember Class in Appearance CSS Classes. Below Screenshot will help you out.




Step 8:- Now Add CSS Classes in Login Button Appearance Section login_btn. Below Screenshot will help you out.




Step 9:- All Steps is done now final step use below CSS code in your page CSS inline section.



@import url('https://fonts.googleapis.com/css?family=Numans');

html,body{
background-image: url('http://getwallpapers.com/wallpaper/full/a/5/d/544750.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 100%;
font-family: 'Numans', sans-serif;
}

.card{
margin-top: auto;
margin-bottom: auto;
background-color: rgba(0,0,0,0.5) !important;
}

.social_icon {
    position: absolute;
    right: 20px;
    top: -20px;
}
.social_icon .fab{
font-size: 60px;
margin-left: 10px;
color: #FFC312;
}

.social_icon span:hover{
color: white;
cursor: pointer;
}
.t-Login-title {
    font-size: 24px;
    margin: 16px 0;
    color: white !important;
}
.login_btn {
    color: black !important;
    background-color: #FFC312 !important;
    width: 100px !important;
    float: right;
}

.login_btn:hover{
color: black !important;
background-color: white !important;
}
.t-Login-logo {
    display: none;
}

.remember{
color: white;
font-size: 15px;
}
input:focus{
outline: 0 0 0 0  !important;
box-shadow: 0 0 0 0 !important;

}

.apex-item-icon {
    padding: 12px;
    left: 34px !important;
    margin-left: -34px !important;
    background-color: #FFC312;
    color: black;
    border: 0 !important;
}





If you like this post please like share and subscribe to my youtube channel.




Reference:-
https://bootsnipp.com/snippets/vl4R7

Post a comment

0 Comments