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

In this Oracle APEX Tutorial, We are going to discuss How can you create an Attractive Login Page with Social Icons in Oracle APEX.

We are trying to do some customization in Oracle APEX login page. I hope this post will help to change standard Oracle APEX login page to Attractive Oracle APEX Login Page with Social Icons.

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;
}

That's all for today, I think(Attractive Oracle APEX Login Page with Social Icons) post will helpful for you. If you like the post then share your view in the comment box.

Please support our youtube channel so we will upload more Oracle APEX Tutorial videos and blog.

Click here for demo

Reference:-

https://bootsnipp.com/snippets/vl4R7